jsx-css-scoped-loader

在jsx实现css scoped的webpack loader、babel plugin、swc plugin、postcss plugin。

• 处理jsx文件的webpack loader: @renzp/jsx-scoped-loader
• 处理jsx文件的babel plugin: @renzp/babel-plugin-jsx-scoped
• 处理jsx文件的swc plugin: @renzp/swc-jsx-scoped
• 处理css文件的webpack loader: @renzp/css-scoped-loader
• 处理css文件的postcss plugin: @renzp/postcss-css-scoped

Tips: 如果要实现css scoped的话，需要同时使用JSX和CSS的处理插件。

原理：通过将css文件中的类名全部转化为xx[data-scoped-xxx]，然后将每个有className的元素加上data-scoped-xxx属性

css

/* 转化前 */
.test{
  color: red;
}
/* 转化后 */
.test[data-scoped-729a2688]{
  color:red;
}

tsx

// 转化前
<div className="test">test</div>
// 转化后
<div class="test" data-scoped-729a2688="true">test</div>

如果需要在css Scoped文件中写全局样式可以通过::global

::global .test {
  color: red;
}

webpack

npm i @renzp/jsx-scoped-loader @renzp/css-scoped-loader -D

webpack.config.js

module: {
  rules: [
    {
      test: /\.tsx$/,
      exclude: /node_modules/,
      use: ['swc-loader', '@renzp/jsx-scoped-loader'],
    },
    {
      test: /\.scope\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        'css-loader',
        '@renzp/css-scoped-loader',
      ],
    },
  ],
},

babel

如果你没有用webpack，但是用了babel，那么可以使用babel插件：@renzp/babel-plugin-jsx-scoped，但是还需要配置postcss处理的插件：@renzp/postcss-css-scoped

swc

可以使用swc插件：@renzp/swc-jsx-scoped和postcss处理的插件：@renzp/postcss-css-scoped