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 inindex.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.