{"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.","language":"javascript","status":"active","last_verified":"Mon Apr 27","install":{"commands":["npm install rollup-plugin-react-scoped-css"],"cli":null},"imports":["import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'","import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css'","import type { FilterPattern } from 'rollup-plugin-react-scoped-css'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}