更改 rollup-plugin-postcss 为某些文件生成的 CSS 类名

Question

我需要配置 rollup-plugin-postcss 只修改某些文件的 CSS 类名。我知道 WebPack 可以做到这一点，但我不知道如何使用 Rollup 来做到这一点。理想情况下，我想给出一个正则表达式来描述如何处理符合该条件的 CSS 文件。

这就是我的 rollup.config.js 的样子：

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";
import pkg from "./package.json";
import babel from "rollup-plugin-babel";
import sourcemaps from "rollup-plugin-sourcemaps";
import postcss from "rollup-plugin-postcss";
import static_files from "rollup-plugin-static-files";
import image from "@rollup/plugin-image";

export default {
  input: "src/index.ts",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: "es",
      sourcemap: true,
    },
  ],
  plugins: [
    external(),
    image(),
    babel({
      exclude: "node_modules/**",
      plugins: ["babel-plugin-styled-components"],
    }),
    static_files({ include: ["./public"] }),
    resolve(),
    commonjs(),
    typescript({
      tsconfig: "tsconfig.json",
    }),
    sourcemaps(),
    postcss({
      use: ["sass"],
      extract: true,
      modules: true,
    }),
  ],
  external: ["react", "react-dom"],
};

Answer 1

我有点想通了。我使用了 rollup-plugin-postcss-modules 而不是 rollup-plugin-postcss。这就是我的 rollup.config.js 最终的样子：

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from 'rollup-plugin-peer-deps-external';
import typescript from "rollup-plugin-typescript2";
import pkg from './package.json';
import babel from 'rollup-plugin-babel';
import sourcemaps from 'rollup-plugin-sourcemaps';
import postcss from "rollup-plugin-postcss-modules";
import static_files from 'rollup-plugin-static-files';
import image from '@rollup/plugin-image';
import stringHash from "string-hash";

export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true
    }
    , {
      file: pkg.module,
      format: 'es',
      sourcemap: true
    }
  ]
  , plugins: [
    external()
    , image()
    , babel({
      exclude: 'node_modules/**'
      , plugins: ["babel-plugin-styled-components"]
    })
    , static_files({ include: ['./public'] })
    , resolve()
    , commonjs()
    , typescript({
      tsconfig: "tsconfig.json"
    })
    , sourcemaps()
    , postcss({
      use: ['sass']
      , extract: true
      , modules: {
        generateScopedName: (name, filename, css) => {
          if (filename.includes("react-pdf-highlighter") || filename.includes("pdf-viewer") || filename.includes("pdfjs-dist")) {
            return name;
          }
          /*
           * NOTE:  The code below is from the default implementation of generateScopedName -- Jonathan Byrne 04/16/2021
           */
          const i = css.indexOf(`.${name}`);
          const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
          const hash = stringHash(css).toString(36).substr(0, 5);
        
          return `_${name}_${hash}_${lineNumber}`;
        }
      }

    })

  ]
  , external: ['react', 'react-dom']
};