Using classnames with purgecss

Question

I am using classnames with purgeCSS and Webpack.

Apparently PurgeCSS can't handle those classnames itself. How can I implement an extractor that filters classnames defined in the classnames() function?

my webpack.config.js is in the answers as I could not save it here

Answer 1

const path = require( 'path' );
const glob = require('glob-all');

// Plugins
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const CssoWebpackPlugin = require( 'csso-webpack-plugin' ).default;
const PurgecssPlugin = require('purgecss-webpack-plugin');
const TerserJSPlugin = require( 'terser-webpack-plugin' );
const OptimizeCSSAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );

// External Scripts
const externals = require('./config/externals');

const PurgeCssPaths = {
    block: path.join(__dirname, 'src', 'block')
};

module.exports = [
    // Compile Javascript
    {
        mode: 'production',
        entry: {
            blocks: './src/blocks.js',
            accordion: './src/block/accordion/scripts/accordion.js',
        },
        optimization: {
            minimize: true,
            minimizer: [
                new TerserJSPlugin( {
                    sourceMap: true,
                    terserOptions: {
                        output: {
                            comments: false,
                        },
                    },
                    extractComments: false,
                } ),
            ],
        },
        output: {
            path: path.resolve( __dirname, 'dist/js' ),
            filename: '[name].bundle.js',
        },
        module: {
            rules: [
                {
                    test: /\.(jsx?)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                    },
                },
            ],
        },
        externals: externals
    },
    // Compile CSS
    {
        mode: 'production',
        entry: {
            editor: './src/block/editor.scss',
            style: './src/block/style.scss',
        },
        output: {
            path: path.resolve( __dirname, 'dist/css' ),
            filename: '[name].bundle.js',
        },
        optimization: {
            minimize: true,
            minimizer: [
                new TerserJSPlugin( {
                    sourceMap: true,
                    terserOptions: {
                        output: {
                            comments: false,
                        },
                    },
                    extractComments: false,
                } ),
                new OptimizeCSSAssetsPlugin( {} ),
            ],
        },
        plugins: [
            new MiniCssExtractPlugin( {
                filename: '[name].css',
                chunkFilename: '[id].css',
            } ),
            new CssoWebpackPlugin( {
                pluginOutputPostfix: 'min',
            } ),
      new PurgecssPlugin({
                paths: glob.sync([
                    `${PurgeCssPaths.block}/**/*`
                ], {nodir: true}),
        extractors: [
          {
            extractor: content => content.match(/[A-z0-9-:\/]+/g) || [],
            extensions: ['js', 'ts', 'php']
          }
        ],
        whitelist: [],
        whitelistPatterns: [],
        whitelistPatternsChildren: []
      })
        ],
        module: {
            rules: [
                {
                    test: /\.(png|jpg|jpeg|gif|ico)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'images',
                            },
                        },
                    ],
                },
                {
                    test: /\.svgz?$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]',
                                outputPath: 'images',
                            },
                        },
                        {
                            loader: 'svgo-loader',
                        },
                    ],
                },
                {
                    test: /\.(pc|sa|sc|c)ss$/,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                esModule: false,
                            },
                        },
                        'css-loader',
                        'postcss-loader',
                        'sass-loader',
                    ],
                },
            ],
        },
    },
];