rollup-plugin-jsx-scoped-css

React 组件样式隔离：完美使用 Vue 的 scoped css 特性

This is a plugin that can be used in both Rollup and Vite.

Friends who have experience with Vue must be familiar with scoped CSS in Vue's single-file components, but currently, there is no such tool available in React's build tools.

With the official Vue tooling package, you can perfectly utilize all the features supported by Vue scoped CSS.

Demo

1// vite.config.js
2// import jsxScopedCssPlugin from 'rollup-plugin-jsx-scoped-css'
3// or
4import { jsxScopedCssPlugin } from 'rollup-plugin-jsx-scoped-css'
5export default defineConfig({
6  plugins: [react(), jsxScopedCssPlugin()]
7})

1// index.scoped.scss
2.page {
3  background-color: red;
4
5  .title {
6    color: green;
7  }
8
9  .content {
10    background-color: gray;
11    // v2
12    ::v-deep {
13      h1 {
14        color: blue;
15      }
16      p {
17        color: yellow;
18      }
19      a {
20        color: pink;
21      }
22    }
23  }
24  :global(p) {
25    color: red;
26  }
27  // v3
28  :deep(p) {
29    background-color: black;
30  }
31}

1// App.tsx
2import 'index.scoped.scss'
3
4const Page = (props) => {
5  const contentRef = useRef(null)
6  const textAreaRef = useRef(null)
7
8  useEffect(() => {
9    contentRef.current.innerHTML = `<h1>vue-loader</h1><p>官方文档地址<a href="https://vue-loader.vuejs.org/zh/guide/scoped-css.html">Scoped CSS</a></p>`
10  }, [])
11
12  return (
13    <div className="page">
14      <h1 className="title">scoped css</h1>
15      <div className="content" ref={contentRef}></div>
16      <div>
17        <textarea ref={textAreaRef} name="" id="" cols="30" rows="10"></textarea>
18      </div>
19    </div>
20  )
21}

Options

1export interface jsxScopedCssOptions {
2  include?: FilterPattern // 包含的文件
3  exclude?: FilterPattern // 排除的文件
4  hashPrefix?: string // hash前缀 默认是v
5  jsxFileExtensions?: string[] // jsx文件后缀 默认是['jsx', 'tsx', 'js', 'ts']
6  legacyScopedCss?: boolean // 默认使用@vue/compiler-sfc，true则使用 @vue/component-compiler-utils
7  isScopedCssFile?: (fileName: string) => {} // 判断是不是scoped css文件
8}

Documents

• Vue2：https://vue-loader.vuejs.org/zh/guide/scoped-css.html
• Vue3：https://cn.vuejs.org/api/sfc-css-features.html#scoped-css

Reference

• https://github.com/estree/estree
• https://astexplorer.net/
• https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme
• https://github.com/cmseguin/rollup-plugin-react-scoped-css
• https://github.com/gaoxiaoliangz/react-scoped-css