sndyuk/mangle-css-class-webpack-plugin

Request - Just replace the string that listed in CSS

lamualfa opened this issue · 3 comments

Instead specify the string (that will be replaced) with classNameRegExp options, just grab all class name in CSS file and collect them into 1 array. After that replace all the string in JS and HTML code that matched with the string in the array that was collected before.

Example:

index.css

.alert {}
.button {}
.divider {}

index.js

doSomethingTo('alert')
doSomethingTo('button')
doSomethingTo('divider')

if('production') {
   console.log('hello world')
}

production & hello world string will not replaced because they are is not listed in index.css file as a class name.


Generate the list of class names that contained inindex.css:

['alert', 'button', 'divider']

and then replace all string in JS Code based on class name list that has been generated:

index.js

doSomethingTo('a')
doSomethingTo('b')
doSomethingTo('c')

if('production') {
   console.log('hello world')
}

With method above, we don't need to specify a prefix in all of the class name in your exisiting project.

To extract all of the CSS Selector in a CSS File, we can use this useful library: https://github.com/csstree/csstree

I was originally thinking do so. but the plugin needs to handle multiple types of file such as vanilla JS, React, CSS, HTML, and so on. So it's difficult to parse all files if we use AST.

@lamualfa I'll close the issue. Please feel free to re-open if you have any ideas.