Changing rollup-plugin-postcss generated CSS class names for only certain files

Question

I need to configure rollup-plugin-postcss to only modify the CSS class names of certain files. I know this is possible with WebPack but I can't figure out how to do it with Rollup. Ideally I would like to give a regular expression that describes what to do with CSS files that match that criteria.

This is what my rollup.config.js looks like:

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

I kind of figured it out. I used rollup-plugin-postcss-modules instead of rollup-plugin-postcss. This is what my rollup.config.js ended up looking like:

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']
};

Answer 2

As suggested by Ritesh in the previous answer's comment section, I was able to solve it with the following:

postcss({
    modules: false, // Disables class modification by default
    autoModules: true, // Enables class modification for .module.css .module.sss .module.scss .module.sass .module.styl .module.stylus .module.less files
    
    ...
    OTHER_CONFIG
    ...

})