[BUG] Support more complex cases of custom arbitrary values `[&_*]`: without `direct properties` and comma `\2c`

[hoangnhan2ka3]

Type

• [x] Incorrect Class Name Extraction
• [ ] Incorrect JavaScript Obfuscation
• [x] Incorrect HTML Obfuscation
• [x] Incorrect CSS Obfuscation
• [ ] Others

Checklist

1. [x] Updated the package to the latest version
2. [x] Read all documentation
3. [x] No related issue
4. [x] Meaningful issue title

Environment

• Package Version: v.2.2.10
• Node Version: v.20.10.0

Describe the bug Custom arbitrary values [&_*]like without direct properties or comma \2c seems not to be obfuscated.

To Reproduce Steps to reproduce the behavior:

1. In whatever page.tsx u like:

<div className="[&_a]:[transition:padding-left_cubic-bezier(.15,1.6,.75,1)_300ms,color_ease_300ms] [&_a]:will-change-[padding-left,_color]">
  <a href="/">
    Sample
  </a>
  {/* or */}
  <Link href="/">
    Sample
  </Link>
</div>

2. Delete the .next/cache folder and old css-obfuscator folder with old conversion.json file in it.
3. Setting config like me below.
4. yarn build -> yarn start
5. On the web, open Dev Tool, point to the <a> tag above.
6. See error:

• no transition or will-change properties applied.
• those classes aren't obfuscated.

Expected behavior Those classes succesfully obfuscated and properties applied.

Screenshots

Config

module.exports = {
  enable: true,
  mode: "random",
  buildFolderPath: ".next",
  classConversionJsonFolderPath: "./css-obfuscator",
  refreshClassConversionJson: false,

  classLength: 6,
  classPrefix: "n",
  classSuffix: "",

  classIgnore: ["dark", "light", "no-transition", "opa-hidden", "big", "small", /nprogress*/, /__.*/, /os-*/],

  allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"],

  contentIgnoreRegexes: [/\.jsxs\)\("\w+"/g],

  whiteListedFolderPaths: [],

  blackListedFolderPaths: ["./.next/cache", "./src", "./public", "./tests"],

  enableMarkers: false,
  markers: ["obf"],
  removeMarkersAfterObfuscated: true,

  removeOriginalCss: true,

  generatorSeed: "84817818898",

  //! Experimental feature (Alpha)
  enableJsAst: false,

  logLevel: "info",
};

Related files With this plugin enable: 1117e71e50ac0253.css.txt

With this plugin disable: 1117e71e50ac0253.css.txt

Demos (if any) N/A

Additional context A expanded version of https://github.com/soranoo/next-css-obfuscator/issues/9

No direct property means:

and not:

both valid in Tailwind.

All of 3 example above contain comma ,, which will convert to \2c in className.

Note: Everything works perfectly with yarn dev, which means the above classes work perfectly even though there are spaces in the class names (caused by Tailwind)

I don't understand why it still works with those 'spaces' 🤔.