purgecss purgecss-webpack-plugin removes React css modules

purgecss-webpack-plugin removes React css modules

Open npearson72 opened this issue 2 years ago • 3 comments

Describe the bug Using the purgecss-webpack-plugin strips out React css module classes.

To Reproduce Steps to reproduce the behavior:

When using the following config with purgecss-webpack-plugin I don't see any of my React css module classes:

      new plugins.PurgecssPlugin({
        paths: glob.sync(`${paths.srcPath}/**/*`, { nodir: true })
      }),

I've also tried to introduce a defaultExtractor but to no avail:

      new plugins.PurgecssPlugin({
        paths: glob.sync(`${paths.srcPath}/**/*`, { nodir: true }),
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
      }),

I'm also using MiniCssExtractPlugin and CssMinimizerPlugin.

My full setup:

    module: {
      rules: [
        ...
        {
          test: /\.css$/i,
          use: [
            plugins.MiniCssExtractPlugin.loader,
            'css-loader',
            'postcss-loader'
          ]
        },
        ...
      ]
    }
    plugins: [
      ...
      new plugins.PurgecssPlugin({
        paths: glob.sync(`${paths.srcPath}/**/*`, { nodir: true }),
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
      }),
      new plugins.MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash:8].css',
        chunkFilename: 'css/[name].[contenthash:8].chunk.css'
      }),
      new plugins.CssMinimizerPlugin(),
     ...
    ]
    ...

However, if I remove the purgecss-webpack-plugin from my webpack configs, and instead use the standard PostCSS plugin in my postcss.config.js it works fine, example:

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.ts', './src/**/*.tsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    }),
    require('autoprefixer')
  ]
};

Expected behavior I would expect purgecss-webpack-plugin to not strip out the React module classes

Environment (please complete the following information):