Can it work with HtmlWebpackPlugin?

[hariroshan]

Hello. I'm trying to make this plugin work with html-webpack-plugin. It seems to not mangle the classes generated by HtmlWebpackPlugin. But the JS and CSS resources are mangled. Here's my plugins and rules list

plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new MiniCssExtractPlugin({ filename: 'styles.css' }),
    new MangleCssClassPlugin({
      classNameRegExp: '(((hover|focus|dark|xs|md|sm|lg|xl)[\\\\]*:)*tw__[a-z_-][a-zA-Z0-9_-]*)',
      // ignorePrefixRegExp: '((hover|focus|xs|md|sm|lg|xl)[\\\\]*:)*',
      // log: true,
    }),
    new CleanWebpackPlugin(),
  ],

rules : [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/i,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: path.resolve(__dirname, 'dist'),
              emit: true
            },
          },
          'css-loader',
          'postcss-loader'
        ],
      },
    ]

[sndyuk]

Hmm, it looks HtmlWebpackPlugin doesn't add their html files to the Webpack pipeline. I have an idea something we can do is that adding externalFiles option to the plugin then handle these external files. But I think it's dirty from Webpack point of view 🤔

    new MangleCssClassPlugin({
      classNameRegExp: '(((hover|focus|dark|xs|md|sm|lg|xl)[\\\\]*:)*tw__[a-z_-][a-zA-Z0-9_-]*)',
      externalFiles: ['dest/index.html'],
    }),

[hariroshan]

Greetings @sndyuk, sorry for the late reply. I have wrapped the mangle-css-class-webpack-plugin with the following

// htmlManglePlugin.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MangleCssClassPluginOptimizer = require('mangle-css-class-webpack-plugin/lib/optimizer');

class HtmlAndAssetsManglePlugin {
    constructor(opts = {}) {
        this.opts = opts;
    }

    apply(compiler) {
        compiler.hooks.compilation.tap('HtmlAndAssetsManglePlugin', (compilation) => {
            console.log('The compiler is starting a new compilation...')
            const optimizer = MangleCssClassPluginOptimizer(compiler, compilation, this.opts)
            let count = (compilation.options.plugins.filter(x => x instanceof HtmlWebpackPlugin).length); -- counts all the html webpack plugin in the webpack pipeline.
            HtmlWebpackPlugin.getHooks(compilation).afterEmit.tapAsync(
                'HtmlAndAssetsManglePlugin',
                (data, cb) => {
                    if (count <= 1) {
                        optimizer(compilation.assets); -- executes once when all the html webpack plugin has emitted output
                    }
                    count -= 1;
                    cb(null, data)
                }
            )
        })
    }
}
module.exports = HtmlAndAssetsManglePlugin;

// webpack.config.js

new HtmlAndAssetsManglePlugin({
    classNameRegExp: '((group-hover|hover|peer|focus|dark|xs|md|sm|lg|xl)[\\\\]*:)*tw__[a-z_-][a-zA-Z0-9_-]*'
 })

Your feedback is appreciated.

[sndyuk]

@hariroshan It looks nice, thanks! Released the new version, 5.0.9. Please check it out.

The diff: https://github.com/sndyuk/mangle-css-class-webpack-plugin/commit/3eeffcefe817eafd321ab545f25c004b796962cb