A rollup plugin designed to allow scoped css to be run in react (Compatible with vite and rollup)
npm install rollup-plugin-react-scoped-css``sh`
$ npm i rollup-plugin-react-scoped-css
in vite:
`js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), reactScopedCssPlugin()]
})
`
in rollup:
`js
// rollup.config.js
import reactScopedCssPlugin from 'rollup-plugin-react-scoped-css';
export default {
input: 'src/input.js',
output: { file: 'ouput.js' },
plugins: [ reactScopedCssPlugin() ]
};
`
Notes: Because this plugin has been built with vite as its primary usecase, it doesn't transpile LESS, SCSS or other preprocessors. For that reason, you will likely need to add your transpilation plugins before reactScopedCssPlugin if you plan on using this without vite.
ts
{
/**
* Which files should be included and parsed by the plugin
* Default: undefined
*/
include?: FilterPattern; /**
* Which files should be exluded and that should not be parsed by the plugin
* Default: undefined
*/
exclude?: FilterPattern;
/**
* If you want regular files to be scoped & global files to be .global.css
* Default: false
*/
scopeStyleByDefault?: boolean;
/**
* If you want to customize the pattern for scoped styles.
* This will only work if scopeStyleByDefault is false
* Default: 'scoped'
*/
scopedStyleSuffix?: string;
/**
* If you want to customize the pattern for global styles.
* This will only work if scopeStyleByDefault is true
* Default: 'global'
*/
globalStyleSuffix?: string;
/**
* If you want to customize the pattern for style files.
* Default: ['css', 'scss', 'sass', 'less']
*/
styleFileExtensions?: string[];
/**
* If you want to customize the pattern for jsx files.
* Default: ['jsx', 'tsx']
*/
jsxFileExtensions?: string[];
/**
* If you want to customize the attribute prefix that is added to the jsx elements
* Default: 'v'
*/
hashPrefix?: string;
}
`$3
Since this plugin works in two parts, you might need to expose the first part, then add any other plugin, and then expose the second part of the plugin. This part is automatically handled with vite thanks to the enforce attribute.`js
const reactScopedPlugins = reactScopedCssPlugin()
export default {
//...
plugins: [ reactScopedPlugins[0], {...stylingPlugins}, reactScopedPlugins[1] ]
};
`Usage
`jsx
// Component.jsx
import './Component.scoped.scss'export default function Sub() {
return (
My Component
)
}
``scss
// Component.scoped.scss
.wrap {
width: 500px;
h1 { color: red; }
}
`
And just like that the styles will be scoped to the component.Limitations
Due to the way this plugin is working, it will apply the scope to the file and not the component individually... This may differ from other frameworks since they don't really let you define multiple components in the same file. This then means that if you have 2 components in the same file, the styles might conflict.$3
If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the ::deep combinator:
`css
.a::deep .b { / ... / }
`
The above will be compiled into:
`css
.a[data-f3f3eg9] .b { / ... / }
`
Another exepted format, which will generate the same resutl, is:
`scss
.a::v-deep .b { / ... / }
`
This is primarly for backwards compatibility, we recommend the ::deep` selector.Be careful with descendant selectors in recursive components! For a CSS rule with the selector .a .b, if the element that matches .a contains a recursive child component, then all .b in that child component will be matched by the rule.