Class names with square brackets and escaped characters

[da-yauhenzadziarkouski]

The code

const files = {
    css: fg.sync("_site/**/*.css"),
    js: fg.sync("_site/**/*.js"),
    html: fg.sync("_site/**/*.html"),
}

files.css.forEach((filePath) => rcs.fillLibraries(fs.readFileSync(filePath, "utf8")))

rcs.optimize()

Object.keys(files).forEach((key) => {
    files[key].forEach((filePath) => {
        const content = rcs.replace[key](fs.readFileSync(filePath, "utf8"))
        fs.writeFileSync(filePath, content)
    })
})

The problem
I use TailwindCSS with rcs-core. There is an ability to define a css property value between square brackets, but rcs.replace works incorrectly.

Example

CSS:
.bottom-\[99999px\] {bottom: 99999px;}

HTML:
<div class="bottom-[99999px]"></div>

Expected:

CSS:
.a {bottom: 99999px;}

HTML:
<div class="a"></div>

Actual result:

CSS:
.a[99999px] {bottom: 99999px;} /* also, it's broken, because backslashes were removed */

HTML:
<div class="bottom-[99999px]"></div>

---

I've also tried to exclude, but that didn't work either. Example:

rcs.selectorsLibrary.setExclude(/[A-z0-9-[.#]*]/g)
console.log("is excluded: bottom-[123px]", rcs.selectorsLibrary.isExcluded("bottom-[123px]")) // is excluded: bottom-[123px] true
console.log("is excluded: leading-none", rcs.selectorsLibrary.isExcluded("leading-none") // is excluded: leading-none false

[JPeer264]

Hey @da-yauhenzadziarkouski thanks for your detailed issue. I'm going to investigate ASAP.

[JPeer264]

@da-yauhenzadziarkouski should work in v3.6.2