) => {
4 | return Test
5 | })
6 |
--------------------------------------------------------------------------------
/test/fixtures/function-component.tsx:
--------------------------------------------------------------------------------
1 | function Component() {
2 | return Test
3 | }
4 |
--------------------------------------------------------------------------------
/test/fixtures/higher-order-component.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentType } from 'react'
2 |
3 | export function withExtraProps(
4 | WrappedComponent: ComponentType
5 | ) {
6 | return function EnhancedComponent(props: P) {
7 | return (
8 |
12 | )
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/fixtures/ignored-tag-names.tsx:
--------------------------------------------------------------------------------
1 | declare const FocusRing: React.ComponentType
2 |
3 | function Component() {
4 | return (
5 |
6 | Child 1
7 | Child 2
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/test/fixtures/nested-component.tsx:
--------------------------------------------------------------------------------
1 | function Component() {
2 | function NestedComponent() {
3 | return
4 | }
5 | return (
6 |
7 |
8 |
9 | )
10 | }
11 |
--------------------------------------------------------------------------------
/test/fixtures/node_modules/component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | function Component() {
4 | return Test
5 | }
6 |
--------------------------------------------------------------------------------
/test/fixtures/spread-props.tsx:
--------------------------------------------------------------------------------
1 | function Component(props: any) {
2 | return (
3 |
4 | Test
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/test/fixtures/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["./"],
3 | "compilerOptions": {
4 | "allowSyntheticDefaultImports": true,
5 | "strict": true,
6 | "jsx": "react-jsx",
7 | "types": ["../../types/react.d.ts"]
8 | }
9 | }
--------------------------------------------------------------------------------
/test/plugin.test.ts:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import path from 'path'
3 | import { createServer } from 'vite'
4 | import { describe, expect } from 'vitest'
5 | import reactClassName, { Options } from '../src/index'
6 |
7 | describe('vite-react-classname', () => {
8 | test('add className to function component', async () => {
9 | const result = await transform('function-component.tsx')
10 | expect(result).toMatchInlineSnapshot(`
11 | "function Component({ className: $cn }) {
12 | return Test
13 | }
14 | "
15 | `)
16 | })
17 |
18 | test('add className to arrow function component', async () => {
19 | const result = await transform('arrow-function-component.tsx')
20 | expect(result).toMatchInlineSnapshot(`
21 | "const Component = ({ className: $cn }) => {
22 | return Test
23 | }
24 | "
25 | `)
26 | })
27 |
28 | test('add className to forwardRef component', async () => {
29 | const result = await transform('forwardRef-component.tsx')
30 | expect(result).toMatchInlineSnapshot(`
31 | "import { forwardRef } from 'react'
32 |
33 | const Component = forwardRef(({className: $cn,}, ref: React.Ref) => {
34 | return Test
35 | })
36 | "
37 | `)
38 | })
39 |
40 | test('preserve existing className prop', async () => {
41 | const result = await transform('existing-classname.tsx')
42 | expect(result).toMatchInlineSnapshot(`
43 | "import { joinClassNames as $join } from "/@fs//path/to/vite-react-classname/client.js";
44 | import clsx from 'clsx'
45 |
46 | function Component({ className: $cn }) {
47 | return Test
48 | }
49 |
50 | function Component2({ className: $cn }) {
51 | return Test
52 | }
53 | "
54 | `)
55 | })
56 |
57 | test('handle destructured props', async () => {
58 | const result = await transform('destructured-props.tsx')
59 | expect(result).toMatchInlineSnapshot(`
60 | "import { ReactNode } from 'react'
61 |
62 | function Component({className: $cn, children }: { children: ReactNode }) {
63 | return {children}
64 | }
65 | "
66 | `)
67 | })
68 |
69 | test('skip context provider', async () => {
70 | const result = await transform('context-provider.tsx')
71 | expect(result).toMatchInlineSnapshot(`
72 | "import { joinClassNames as $join } from "/@fs//path/to/vite-react-classname/client.js";
73 | import { createContext } from 'react'
74 |
75 | const Context = createContext({})
76 |
77 | function Foo({ className: $cn }) {
78 | return (
79 |
80 | Test
81 |
82 | )
83 | }
84 | "
85 | `)
86 | })
87 |
88 | test('skip when spread props are used', async () => {
89 | const result = await transform('spread-props.tsx')
90 | expect(result).toMatchInlineSnapshot(`
91 | "import { joinClassNames as $join } from "/@fs//path/to/vite-react-classname/client.js";
92 | function Component(props: any) {
93 | return (
94 |
95 | Test
96 |
97 | )
98 | }
99 | "
100 | `)
101 | })
102 |
103 | test('handle `class` prop with an array expression', async () => {
104 | const result = await transform('array-expression.tsx')
105 | expect(result).toMatchInlineSnapshot(`
106 | "import { joinClassNames as $join } from "/@fs//path/to/vite-react-classname/client.js";
107 | function Foo({ className: $cn }) {
108 | return (
109 |
115 | )
116 | }
117 |
118 | function Bar({ className: $cn }) {
119 | return
120 | }
121 | "
122 | `)
123 | })
124 |
125 | test('skip node_modules when skipNodeModules is true', async () => {
126 | const result = await transform('node_modules/component.tsx', {
127 | skipNodeModules: true,
128 | })
129 | expect(result).toMatchInlineSnapshot(`
130 | "import React from 'react'
131 |
132 | function Component() {
133 | return Test
134 | }
135 | "
136 | `)
137 | })
138 |
139 | test('the ignoredTagNames option', async () => {
140 | const result = await transform('ignored-tag-names.tsx', {
141 | ignoredTagNames: ['FocusRing'],
142 | })
143 | expect(result).toMatchInlineSnapshot(`
144 | "declare const FocusRing: React.ComponentType
145 |
146 | function Component({ className: $cn }) {
147 | return (
148 |
149 | Child 1
150 | Child 2
151 |
152 | )
153 | }
154 | "
155 | `)
156 | })
157 |
158 | test('higher-order component', async () => {
159 | const result = await transform('higher-order-component.tsx')
160 | expect(result).toMatchInlineSnapshot(`
161 | "import { joinClassNames as $join } from "/@fs//path/to/vite-react-classname/client.js";
162 | import { ComponentType } from 'react'
163 |
164 | export function withExtraProps(
165 | WrappedComponent: ComponentType
166 | ) {
167 | return function EnhancedComponent(props: P) {
168 | return (
169 |
173 | )
174 | }
175 | }
176 | "
177 | `)
178 | })
179 |
180 | test('nested component', async () => {
181 | const result = await transform('nested-component.tsx')
182 | expect(result).toMatchInlineSnapshot(`
183 | "function Component({ className: $cn }) {
184 | function NestedComponent({ className: $cn }) {
185 | return
186 | }
187 | return (
188 |
189 |
190 |
191 | )
192 | }
193 | "
194 | `)
195 | })
196 | })
197 |
198 | async function transform(fixtureId: string, options: Options = {}) {
199 | const root = path.join(__dirname, 'fixtures')
200 | const fixturePath = path.join(root, fixtureId)
201 |
202 | let result = fs.readFileSync(fixturePath, 'utf-8')
203 |
204 | const server = await createServer({
205 | root,
206 | logLevel: 'silent',
207 | plugins: [
208 | reactClassName({
209 | ...options,
210 | onTransform(code) {
211 | result = code
212 | },
213 | }),
214 | ],
215 | environments: {
216 | client: {
217 | dev: {
218 | moduleRunnerTransform: false,
219 | },
220 | },
221 | },
222 | })
223 |
224 | await server.transformRequest('/@fs/' + fixturePath, {
225 | ssr: false,
226 | })
227 |
228 | return result
229 | }
230 |
--------------------------------------------------------------------------------
/test/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "include": ["./"],
4 | "compilerOptions": {
5 | "types": ["node", "vitest/globals"]
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src"],
3 | "compilerOptions": {
4 | "strict": true,
5 | "lib": ["esnext"],
6 | "target": "esnext",
7 | "module": "esnext",
8 | "moduleResolution": "bundler",
9 | "declaration": true,
10 | "emitDeclarationOnly": true,
11 | "allowSyntheticDefaultImports": true,
12 | "skipLibCheck": true,
13 | "types": []
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 |
3 | export default defineConfig({
4 | entry: ['src/index.ts', 'src/client.ts'],
5 | format: ['esm'],
6 | dts: true,
7 | })
8 |
--------------------------------------------------------------------------------
/types/react.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace React {
2 | type ClassName = string | readonly ClassName[] | false | null | undefined
3 |
4 | interface Attributes {
5 | /**
6 | * Classes allow CSS and JavaScript to select and access specific elements via [class
7 | * selectors][1] or functions like `document.getElementsByClassName()`.
8 | *
9 | * Note: This attribute doesn't exist at runtime. It gets transformed by the
10 | * `vite-react-classname` plugin. You may want to edit your `.cursorrules` file or similar to
11 | * prevent coding assistants from adding this attribute to your components.
12 | *
13 | * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
14 | *
15 | * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class
16 | */
17 | class?: string | readonly ClassName[] | undefined
18 |
19 | /**
20 | * Classes allow CSS and JavaScript to select and access specific elements via [class
21 | * selectors][1] or functions like `document.getElementsByClassName()`.
22 | *
23 | * This attribute exists on every component, thanks to the `vite-react-classname` plugin in your
24 | * Vite config. You may want to edit your `.cursorrules` file or similar to prevent coding
25 | * assistants from adding this attribute to your components.
26 | *
27 | * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
28 | *
29 | * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/className
30 | */
31 | className?: string | undefined
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config'
2 |
3 | export default defineConfig({
4 | test: {
5 | globals: true,
6 | isolate: false,
7 | exclude: ['**/vendor/**', 'node_modules'],
8 | env: {
9 | TEST: 'vite-react-classname',
10 | },
11 | },
12 | })
13 |
--------------------------------------------------------------------------------