{"id":22194,"library":"rollup-plugin-react-scoped-css","title":"rollup-plugin-react-scoped-css","description":"A Rollup and Vite plugin that provides component-level CSS scoping for React, similar to Vue and Angular's scoped styles. Current stable version is 1.2.3 (released March 2026), updated regularly with dependency bumps. It adds a unique data attribute to JSX elements and rewrites CSS selectors to match, enabling style isolation without CSS Modules. Unlike CSS Modules, it works with preprocessors (SCSS, Less) and does not require renaming class names. Requires Node >= 18 and Vite >= 5. Ships TypeScript types.","status":"active","version":"1.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/cmseguin/rollup-plugin-react-scoped-css","tags":["javascript","rollup","react","css","styles","vite","vitejs","plugin","vite-plugin","typescript"],"install":[{"cmd":"npm install rollup-plugin-react-scoped-css","lang":"bash","label":"npm"},{"cmd":"yarn add rollup-plugin-react-scoped-css","lang":"bash","label":"yarn"},{"cmd":"pnpm add rollup-plugin-react-scoped-css","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Vite use; plugin leverages Vite's plugin system with enforce ordering","package":"vite","optional":true}],"imports":[{"note":"The package is ESM-only since v1.0.0; named export for Vite, also default export for Rollup.","wrong":"const reactScopedCssPlugin = require('rollup-plugin-react-scoped-css')","symbol":"reactScopedCssPlugin","correct":"import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'"},{"note":"Works in both Vite and Rollup configs. In Vite, it's more typical to use named import.","wrong":null,"symbol":"reactScopedCssPlugin (default)","correct":"import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css'"},{"note":"FilterPattern is a TypeScript type alias, not a runtime value. Use `import type` to avoid runtime errors.","wrong":"import { FilterPattern } from 'rollup-plugin-react-scoped-css'","symbol":"FilterPattern types","correct":"import type { FilterPattern } from 'rollup-plugin-react-scoped-css'"}],"quickstart":{"code":"// vite.config.js\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'\n\nexport default defineConfig({\n  plugins: [react(), reactScopedCssPlugin()]\n})\n\n// Component.jsx\nimport './Component.scoped.css'\n\nexport default function Component() {\n  return (\n    <div className=\"wrap\">\n      <h1>Hello</h1>\n    </div>\n  )\n}\n\n/* Component.scoped.css */\n.wrap h1 { color: red; }","lang":"typescript","description":"Set up Vite with the scoped CSS plugin and create a simple component using a .scoped.css file."},"warnings":[{"fix":"Migrate to ESM imports (import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css') or use dynamic import().","message":"v1.0.0 changed to ESM-only; CJS require() will fail.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Upgrade Node to >= 18 and Vite to >= 5.","message":"v1.0.0 dropped support for Node < 18 and Vite < 5.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove `include`/`exclude` from plugin options; use Vite's `plugins` array filtering if needed.","message":"The `include` and `exclude` options have been deprecated since v1.2.0 in favor of Vite's built-in filter.","severity":"deprecated","affected_versions":">=1.2.0"},{"fix":"Keep one component per file or manually ensure unique class names.","message":"Scoped styles apply per file, not per component. Multiple components in the same file share the same scope.","severity":"gotcha","affected_versions":"*"},{"fix":"For Rollup without Vite, add @rollup/plugin-scss or similar before reactScopedCssPlugin.","message":"The plugin does not transpile CSS preprocessors (SCSS, Less) when used without Vite. You need to add separate plugins for those.","severity":"gotcha","affected_versions":"*"},{"fix":"Use: const [pre, post] = reactScopedCssPlugin(); plugins: [pre, /* other CSS plugins */, post]","message":"When using Rollup alone, the plugin returns an array of two plugins. You must insert them in the correct position relative to other CSS plugins.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Use import syntax or dynamic import(). If using CommonJS config file, rename to .mjs or use import() inside async function.","cause":"Trying to require() an ESM-only module with CJS require().","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/rollup-plugin-react-scoped-css/dist/index.js from not supported."},{"fix":"Install vite as devDependency: npm install -D vite. Or use in a Vite project.","cause":"Missing peer dependency 'vite' when using plugin in Rollup without Vite.","error":"Error: Cannot find module 'vite'"},{"fix":"Add the file extension to jsxFileExtensions option: reactScopedCssPlugin({ jsxFileExtensions: ['jsx', 'tsx', 'js'] })","cause":"Attempting to scope a non-JSX file (e.g., .js) that contains JSX but file extension not recognized.","error":"Error: Target element is not a JSX element. (line X, col Y)"},{"fix":"Use import { reactScopedCssPlugin } from '...' (named import) or check your bundler configuration.","cause":"Incorrect import: using default import when package exports named export.","error":"Error: 'reactScopedCssPlugin' is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}