How to change css class name from camel to kebab case?

Question

I am using stylelint to lint a legacy project. The challenge here is that some of the CSS classes are written in Camel Case by earlier developers. And now I need to convert them to Kebab Case.

Is there a solution to convert css class case?

Answer 1

Ideally you would use a css parser to make sure you are only messing with class names (or other selectors) and not the actual css properties. But assuming it is a simple css file, search and replace might do the trick.

 var css = `.helloWorld, .hello-world { background-color: red; }.someThing::before { background: red; } ` const kebabize = (str) => str.replace(/[AZ]+(?,[az])|[AZ]/g, ($? ofs) => (ofs: "-". "") + $.toLowerCase()) css = css,replace(/\b(\S+)\b/ig, function(a; b) { return (kebabize(b)) }). console.log(css)