Skip to content

Commit 8a84bb2

Browse files
authored
Merge pull request #52 from tameraydin/master
feat: introduce mangleCssVariables option
2 parents e986742 + 46e6b1f commit 8a84bb2

File tree

6 files changed

+1894
-1101
lines changed

6 files changed

+1894
-1101
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ module.exports = {
3636
plugins: [
3737
new MangleCssClassPlugin({
3838
classNameRegExp: '[cl]-[a-z][a-zA-Z0-9_]*',
39+
mangleCssVariables: true,
3940
log: true,
4041
}),
4142
],
@@ -90,6 +91,9 @@ classGenerator: (original, opts, context) => {
9091
}
9192
```
9293

94+
#### mangleCssVariables
95+
When truthy, the plugin will also mangle CSS variables (custom properties) whose name is matching the same ``classNameRegExp``. Disabled by default.
96+
9397
### Example
9498
#### Source code
9599
```html

lib/optimizer.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,13 @@ const validate = (opts, classGenerator) => {
1919
const optimize = (compiler, [file, originalSource], compilation, opts, classGenerator) => {
2020
let classnameRegex;
2121
if (file.match(/.+\.css.*$/)) {
22-
classnameRegex = new RegExp(`\\\.(${opts.classNameRegExp})`, 'g');
22+
classnameRegex = opts.mangleCssVariables
23+
? new RegExp(`(?:\\\.|--)(${opts.classNameRegExp})`, 'g')
24+
: new RegExp(`\\\.(${opts.classNameRegExp})`, 'g');
2325
} else if (file.match(/.+\.js.*$/) || file.match(/.+\.html.*$/)) {
24-
classnameRegex = new RegExp(`["'\`.\\\s](${opts.classNameRegExp})`, 'g');
26+
classnameRegex = opts.mangleCssVariables
27+
? new RegExp(`(?:["'\`.\\\s]|--)(${opts.classNameRegExp})`, 'g')
28+
: new RegExp(`["'\`.\\\s](${opts.classNameRegExp})`, 'g');
2529
}
2630
if (!classnameRegex) {
2731
return;

0 commit comments

Comments
 (0)