Registry / web-framework / rollup-plugin-react-scoped-css

rollup-plugin-react-scoped-css

library1.2.3jsnpmunverified

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.

web-framework

npm install rollup-plugin-react-scoped-css

github ↗package ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-REAC

rollup-plugin-react-scoped-css

web-frameworkjavascriptv1.2.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

reactScopedCssPlugin

✓ import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'

✗ const reactScopedCssPlugin = require('rollup-plugin-react-scoped-css')

The package is ESM-only since v1.0.0; named export for Vite, also default export for Rollup.

reactScopedCssPlugin (default)

✓ import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css'

Works in both Vite and Rollup configs. In Vite, it's more typical to use named import.

FilterPattern types

✓ import type { FilterPattern } from 'rollup-plugin-react-scoped-css'

✗ import { FilterPattern } from 'rollup-plugin-react-scoped-css'

FilterPattern is a TypeScript type alias, not a runtime value. Use `import type` to avoid runtime errors.

Set up Vite with the scoped CSS plugin and create a simple component using a .scoped.css file.

// vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css' export default defineConfig({ plugins: [react(), reactScopedCssPlugin()] }) // Component.jsx import './Component.scoped.css' export default function Component() { return ( <div className="wrap"> <h1>Hello</h1> </div> ) } /* Component.scoped.css */ .wrap h1 { color: red; }

Debug

Known issues

breakingv1.0.0 changed to ESM-only; CJS require() will fail.

fix

Migrate to ESM imports (import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css') or use dynamic import().

affects: >=1.0.0

breakingv1.0.0 dropped support for Node < 18 and Vite < 5.

fix

Upgrade Node to >= 18 and Vite to >= 5.

affects: >=1.0.0

deprecatedThe `include` and `exclude` options have been deprecated since v1.2.0 in favor of Vite's built-in filter.

fix

Remove `include`/`exclude` from plugin options; use Vite's `plugins` array filtering if needed.

affects: >=1.2.0

gotchaScoped styles apply per file, not per component. Multiple components in the same file share the same scope.

fix

Keep one component per file or manually ensure unique class names.

affects: *

gotchaThe plugin does not transpile CSS preprocessors (SCSS, Less) when used without Vite. You need to add separate plugins for those.

fix

For Rollup without Vite, add @rollup/plugin-scss or similar before reactScopedCssPlugin.

affects: *

gotchaWhen using Rollup alone, the plugin returns an array of two plugins. You must insert them in the correct position relative to other CSS plugins.

fix

Use: const [pre, post] = reactScopedCssPlugin(); plugins: [pre, /* other CSS plugins */, post]

affects: *

Errors

Common errors & fixes

Error [ERR_REQUIRE_ESM]: require() of ES Module /node_modules/rollup-plugin-react-scoped-css/dist/index.js from not supported.

Trying to require() an ESM-only module with CJS require().

fix

Use import syntax or dynamic import(). If using CommonJS config file, rename to .mjs or use import() inside async function.

Error: Cannot find module 'vite'

Missing peer dependency 'vite' when using plugin in Rollup without Vite.

fix

Install vite as devDependency: npm install -D vite. Or use in a Vite project.

Error: Target element is not a JSX element. (line X, col Y)

Attempting to scope a non-JSX file (e.g., .js) that contains JSX but file extension not recognized.

fix

Add the file extension to jsxFileExtensions option: reactScopedCssPlugin({ jsxFileExtensions: ['jsx', 'tsx', 'js'] })

Error: 'reactScopedCssPlugin' is not a function

Incorrect import: using default import when package exports named export.

fix

Use import { reactScopedCssPlugin } from '...' (named import) or check your bundler configuration.

Upgrade

Version history

1.2.3latest on npm

Audit

Dependencies

viteoptionalpeer dependency for Vite use; plugin leverages Vite's plugin system with enforce ordering

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/cmseguin/rollup-plugin-react-scoped-css ↗

packagehttps://www.npmjs.com/package/rollup-plugin-react-scoped-css ↗