feat: introduces mangleCssVariables option

Closes #51

Author: tameraydin

README.md

@@ -36,6 +36,7 @@ module.exports = {
   plugins: [
     new MangleCssClassPlugin({
       classNameRegExp: '[cl]-[a-z][a-zA-Z0-9_]*',
+      mangleCssVariables: true,
       log: true,
     }),
   ],
@@ -90,6 +91,9 @@ classGenerator: (original, opts, context) => {
 }
 ```
 
+#### mangleCssVariables
+When truthy, the plugin will also mangle CSS variables (custom properties) whose name is matching the same ``classNameRegExp``. Disabled by default.
+
 ### Example
 #### Source code
 ```html

lib/optimizer.js

@@ -19,9 +19,13 @@ const validate = (opts, classGenerator) => {
 const optimize = (compiler, [file, originalSource], compilation, opts, classGenerator) => {
   let classnameRegex;
   if (file.match(/.+\.css.*$/)) {
-    classnameRegex = new RegExp(`\\\.(${opts.classNameRegExp})`, 'g');
+    classnameRegex = opts.mangleCssVariables
+      ? new RegExp(`(?:\\\.|--)(${opts.classNameRegExp})`, 'g')
+      : new RegExp(`\\\.(${opts.classNameRegExp})`, 'g');
   } else if (file.match(/.+\.js.*$/) || file.match(/.+\.html.*$/)) {
-    classnameRegex = new RegExp(`["'\`.\\\s](${opts.classNameRegExp})`, 'g');
+    classnameRegex = opts.mangleCssVariables
+      ? new RegExp(`(?:["'\`.\\\s]|--)(${opts.classNameRegExp})`, 'g')
+      : new RegExp(`["'\`.\\\s](${opts.classNameRegExp})`, 'g');
   }
   if (!classnameRegex) {
     return;

spec/BasicSpec.js

@@ -221,4 +221,27 @@ describe('MangleCssClassPlugin', () => {
       })]
     }, ["<p class=\\\"c1\\\">hoge-a<div class=\\\"b c1\\\">CASE 4</div></p>"], done);
   });
+
+  it('replace a css variable', (done) => {
+    testPlugin({
+      entry: path.join(__dirname, 'fixtures/case5.js'),
+      output: {
+        path: OUTPUT_DIR,
+        filename: 'case5.js'
+      },
+      module: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: ['style-loader', 'css-loader']
+          },
+        ]
+      },
+      plugins: [new MangleCssClassPlugin({
+        classNameRegExp: defaultCssClassRegExp,
+        mangleCssVariables: true,
+        log: true,
+      })]
+    }, [":root {\\\\n  --a: 100%;\\\\n}\\\\n\\\\n.b {\\\\n  width: var(--a);"], done);
+  });
 });

spec/fixtures/case5.css

@@ -0,0 +1,7 @@
+:root {
+  --l-a: 100%;
+}
+
+.l-b {
+  width: var(--l-a);
+}

spec/fixtures/case5.js

@@ -0,0 +1 @@
+import './case5.css';