{"id":19904362,"url":"https://github.com/alloc/vite-react-css","last_synced_at":"2025-05-03T00:31:37.108Z","repository":{"id":38799598,"uuid":"421572839","full_name":"alloc/vite-react-css","owner":"alloc","description":"Scoped CSS for React components","archived":false,"fork":false,"pushed_at":"2022-08-20T15:26:32.000Z","size":92,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-26T01:43:38.579Z","etag":null,"topics":["vite-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alloc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-10-26T20:22:03.000Z","updated_at":"2024-03-02T14:22:52.000Z","dependencies_parsed_at":"2022-08-27T13:34:51.920Z","dependency_job_id":null,"html_url":"https://github.com/alloc/vite-react-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-react-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-react-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-react-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Fvite-react-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alloc","download_url":"https://codeload.github.com/alloc/vite-react-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252126559,"owners_count":21698964,"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":["vite-plugin"],"created_at":"2024-11-12T20:28:05.163Z","updated_at":"2025-05-03T00:31:36.242Z","avatar_url":"https://github.com/alloc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-react-css\n\nVite plugin that emulates Scoped CSS for React components (using generated class names)\n\n- Compatible with SSR\n- Automatic code-splitting\n- Hot-reloading support\n\n```tsx\nimport { defineConfig } from 'vite'\nimport reactCss from 'vite-react-css'\n\n// This example uses the default options.\nexport default defineConfig({\n  plugins: [\n    reactCss({\n      // The tag name used by scope elements.\n      scopeType: 'div',\n    }),\n  ],\n})\n```\n\n**Note:** This plugin depends on `@vitejs/plugin-react` to work right.\n\n\u0026nbsp;\n\n## How it works\n\nTo add scoped CSS to your React component, create a file with the same name but a different extension (any of the supported CSS dialects). For example, if your component file is named `Foo.tsx`, you could create a `Foo.css` file to accompany it.\n\nNote that your React component **must** be the default export or be named the same as its file (minus the file extension, of course). Lastly, **only function components** are supported.\n\n```jsx\n// Works if module is named \"Foo.jsx\" or \"Foo.tsx\"\nexport const Foo = props =\u003e \u003cdiv {...props} /\u003e\n```\n\nUse the `:scope` pseudo selector to stylize the element that wraps every JSX element you return from your React component.\n\nFor selectors without `:scope` in them, the unique scope class is prepended. One exception is when the selector contains an `html` selector in it (eg: `html.darkMode .foo`). In that case, the unique scope class is injected _after_ the `html` selector (eg: `html.darkMode .scopeID .foo`), so you can customize styles in relation to the class names used by the `\u003chtml\u003e` element.\n\nThe `.scoped` class can be used within your global CSS to customize all scope elements at once.\n\n### Scope elements\n\nBy default, a \"scope element\" is inserted wherever your main React component returns a JSX element. It wraps your JSX element, has the `scoped` and `{scopeId}` CSS classes, and uses the `scopeType` option as its element type.\n\nIf you define the `scopeTags` option, you can instruct `vite-react-css` to inject the `scoped` and `{scopeId}` class names into your root JSX elements, instead of inserting a scope element. For example, if `scopeTags: [\"div\"]` is used, and your main React component returns a `\u003cdiv\u003e` as its root element, that element will have the scope classes added to its `className` prop (or the `className` prop will be added if undefined). Any element type is valid in `scopeTags`, but make sure it can handle the `className` prop.\n\n\u0026nbsp;\n\n### Quirks\n\n- The rules within your scoped CSS will affect all descendants of your React component, even ones not created within the component itself.\n\n\u0026nbsp;\n\n### Why not support `\u003cstyle scoped\u003e` in React components?\n\nI'm open to this feature being added, but currently have no personal need for it.\n\nIf someone wants to implement it, here's how I would do it. First, use Babel to detect `\u003cstyle scoped\u003e` JSX element within TSX/JSX modules. Then, wrap the siblings of `\u003cstyle scoped\u003e` elements with a `\u003cdiv className=\"scoped {scopeId}\"\u003e` tag and remove the `\u003cstyle scoped\u003e` element. Inject an `import from \"./{moduleBasename}.css\"` declaration into the TSX/JSX module. Then use `resolveId` and `load` plugin hooks to provide the `.css` import generated from the extracted `\u003cstyle scoped\u003e` CSS text.\n\nAs a bonus, we could support dynamic CSS (eg: using JS variable interpolation) inside the `\u003cstyle scoped\u003e` element if we use a special `ScopedStyles` component instead of a simple `\u003cdiv\u003e` tag. The `ScopedStyles` component would extract the `\u003cstyle scoped\u003e` JSX element from its `children` prop and manage an `HTMLStyleElement` injected into the `\u003chead\u003e` DOM element. Each instance of a React component using `ScopedStyles` would have its own `\u003cstyle\u003e` element. Personally, I think supporting dynamic CSS within `\u003cstyle scoped\u003e` would be overkill, and it's better to use something like [ui-box](https://github.com/segmentio/ui-box) or the plain ol' `style` prop when you need dynamic styles.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Fvite-react-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falloc%2Fvite-react-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Fvite-react-css/lists"}