{"id":24069301,"url":"https://github.com/aleclarson/vite-react-classname","last_synced_at":"2025-04-23T19:39:03.787Z","repository":{"id":271160549,"uuid":"912500600","full_name":"aleclarson/vite-react-classname","owner":"aleclarson","description":"Vite plugin for automatic className insertion in TypeScript JSX","archived":false,"fork":false,"pushed_at":"2025-02-11T22:39:56.000Z","size":98,"stargazers_count":13,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-16T02:59:47.200Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aleclarson.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-05T18:38:07.000Z","updated_at":"2025-03-15T19:46:26.000Z","dependencies_parsed_at":"2025-01-06T00:24:40.407Z","dependency_job_id":"134e5779-7dd7-40c1-9866-0dfa13331f31","html_url":"https://github.com/aleclarson/vite-react-classname","commit_stats":null,"previous_names":["aleclarson/vite-tsx-cn"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-react-classname","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-react-classname/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-react-classname/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aleclarson%2Fvite-react-classname/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aleclarson","download_url":"https://codeload.github.com/aleclarson/vite-react-classname/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250500895,"owners_count":21440907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-09T14:08:45.261Z","updated_at":"2025-04-23T19:39:03.776Z","avatar_url":"https://github.com/aleclarson.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-react-classname\n\nImagine if every function component in your project automatically received a `className` prop. What if this `className` prop was automatically forwarded to the JSX elements returned by the component? What if you never had to manually merge class names with a utility function (e.g. `cn`, `clsx`, etc.) ever again?\n\nThis Vite plugin gives you that.\n\n#### Example\n\nImagine you have a component like this:\n\n```tsx\nimport { cn } from '@lib/utils'\n\nexport function Button({ className }) {\n  return \u003cdiv className={cn('btn', className)} /\u003e\n}\n```\n\nWith this plugin, you can now write:\n\n```tsx\nexport function Button() {\n  return \u003cdiv className=\"btn\" /\u003e\n}\n```\n\nNote that only `.jsx` and `.tsx` files are transformed. Any JSX that's been compiled to JS will not be transformed. This can lead to false positives in the type definitions, since the `className` prop will be added to the `React.Attributes` interface. It's recommended for JSX libraries to use `\"jsx\": \"preserve\"` in their `tsconfig.json` file, rather than compiling JSX to JS.\n\n## Install\n\n```\npnpm add vite-react-classname -D\n```\n\n## Usage\n\n```tsx\nimport reactClassName from 'vite-react-classname'\n\nexport default defineConfig({\n  plugins: [reactClassName()],\n})\n```\n\n### Plugin options\n\n- `ignoredTagNames?: string[]`  \n  When a JSX element is encountered with one of these “tag names”, its first child will receive the `className` prop instead. The tag name may include a dot to indicate a nested component.\n\n  Note that tag names ending in \"Provider\" are automatically ignored.\n\n- `skipNodeModules?: boolean`  \n  Whether to skip transforming components in `node_modules`. Note that only uncompiled JSX is transformed (not `React.createElement` or `jsx` calls). Defaults to `false`.\n\n### TypeScript\n\nAdd the following \"triple-slash directive\" to a module in your project (usually the entry module):\n\n```ts\n/// \u003creference types=\"vite-react-classname/types/react\" /\u003e\n```\n\nThis will add the `className` prop to the `React.Attributes` interface.\n\n### The `class` prop\n\nThis plugin also adds a `class` prop to every component. This prop gets transformed into a `className` prop at compile time. This has 2 main benefits:\n\n- It's more concise than `className`\n- It supports an _inline_ array expression:\n\n  ```tsx\n  function Component() {\n    const [foo, setFoo] = useState(false)\n\n    return \u003cdiv class={['btn', foo \u0026\u0026 'foo']}\u003e\n  }\n  ```\n\n  The `class` array must be a _static_ array. It's transformed into a [`$join`](https://github.com/aleclarson/vite-react-classname/blob/f64086920b3e7ed07394b3c28f24638f814b17d4/src/client.ts) function call at compile time, which filters out falsy values, flattens nested arrays (which _can_ be dynamic), and joins the class names with a space.\n\n\u003e [!WARNING]\n\u003e You _cannot_ use both `class` and `className` on the same JSX element, but also spreading props with `{...props}` is perfectly fine even if `props.className` is defined.\n\n## FAQ\n\n#### What kinds of components are supported?\n\n- Most function components (arrow syntax, `function` keyword), but not [method definition](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions) syntax.\n- Class components are **NOT** supported (PR welcome).\n\n#### Is this React-specific?\n\nNot really. It works with any JSX library, but currently, the package only ships with a `react` type definition. That doesn't mean you can't use it with other libraries; you'll just have to add your own type definitions. PRs welcome!\n\n#### When is transformation skipped?\n\n- When props destructuring is encountered, and the `className` prop is explicitly declared, it's assumed the `className` prop is being forwarded. No transformation is done in this case.\n  ```tsx\n  // ❌ Component is not transformed\n  function Example({ className, ...props }) {\n    return \u003cdiv className={cn('btn', className)} {...props} /\u003e\n  }\n  ```\n- When the `props` variable is spread into a JSX element, it's assumed the `className` prop is being forwarded. No transformation is done in this case.\n  ```tsx\n  // ❌ Component is not transformed\n  function SpreadExample(props) {\n    return \u003cdiv {...props} /\u003e\n  }\n  // ✅ Component is transformed\n  function AnotherExample(props) {\n    return \u003cdiv {...props} className=\"btn\" /\u003e\n  }\n  ```\n- Context providers are ignored. Their immediate JSX child is transformed instead.\n  ```tsx\n  // ✅ The props argument has className added\n  function MyComponent({ xyz }) {\n    return (\n      // ❌ Provider is not transformed\n      \u003cMyContextProvider value={xyz}\u003e\n        // ✅ …but its child is forwarded the className value\n        \u003cdiv className=\"inset-0 bg-red-500\" /\u003e\n      \u003c/MyContextProvider\u003e\n    )\n  }\n  ```\n\n## Ideas\n\nHere are some ideas for improvements:\n\n- Add support for class components\n- Add support for other JSX libraries\n\nContributions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleclarson%2Fvite-react-classname","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faleclarson%2Fvite-react-classname","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleclarson%2Fvite-react-classname/lists"}