[BUG] Incorrect action pseudo-class selector matching

[hoangnhan2ka3]

Type

• [x] Incorrect Class Name Extraction
• [ ] Incorrect JavaScript Obfuscation
• [x] Incorrect HTML Obfuscation
• [ ] 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 Problem with three : in a className, eg:

<div className="first:*:hover:rotate-180 last:*:hover:opacity-100"></div>

To Reproduce Steps to reproduce the behavior:

Try to obfuscate the following className.

<div className="first:*:hover:rotate-180 last:*:hover:opacity-100"></div>

Expected behavior

Screenshots

hover is not a single class here, this bug only occur with three : classNames.

Config

module.exports = {
    enable: true, // Enable or disable the plugin.
    mode: "random", // Obfuscate mode, "random" or "simplify".
    buildFolderPath: ".next", // Build folder of your project.
    classConversionJsonFolderPath: "./css-obfuscator", // The folder path to store the before obfuscate and after obfuscated classes conversion table.
    refreshClassConversionJson: process.env.NODE_ENV !== "production", // Refresh the class conversion JSON file.

    classLength: 6, // Length of the obfuscated class name.
    classPrefix: "n", // Prefix of the obfuscated class name.
    classSuffix: "", // Suffix of the obfuscated class name.

    classIgnore: [
        "no-transition",
        "transform",
        "resize",
        "2d",
        "data-theme",
        "dark",
        "light",
        "ltr",
        "rtl",
        /progress*/,
        /fa-.*/,
        /__variable_.*/,
        /__className_.*/,
        /os-.*/,
    ], // The class names to be ignored during obfuscation.

    allowExtensions: [".jsx", ".tsx", ".js", ".ts", ".html", ".rsc"], // The file extensions to be processed.

    contentIgnoreRegexes: [/\.jsxs\)\("\w+"/g], // The regexes to match the file content to be ignored during obfuscation.

    whiteListedFolderPaths: [], // Only obfuscate files in these folders

    blackListedFolderPaths: [
               "./.next/cache",
               /\.next\/cache/,
               /\.next\/.*\/\w+-image.*/,
               /\.next\/.*\/edge-chunks/,
        ], // Don't obfuscate files in these folders

    enableMarkers: false, // Enable or disable the obfuscate marker classes.
    markers: ["obf"], // Classes that indicate component(s) need to obfuscate.
    removeMarkersAfterObfuscated: true, // Remove the obfuscation markers from HTML elements after obfuscation.

    removeOriginalCss: true, // Delete original CSS from CSS files if it has a obfuscated version.

    generatorSeed: "84817818898", // The seed for the random generator.

    //! Experimental feature (Alpha)
    enableJsAst: false, // Whether to obfuscate JS files using abstract syntax tree parser (Experimental feature)

    logLevel: "info", // Log level
};

Related files

Raw: 748204b435cd75e5.css.txt

Obfuscated: 824c35810ca53037.css.txt

Demos (if any)

<Link href="/" className={clsx(
  "relative flex h-full shrink-0 items-center justify-center px-6",
  "first:*:z-[1] first:*:w-8 first:*:h-8 first:*:w-auto first:*:transition-transform first:*:duration-500 first:*:hover:rotate-180",
  "last:*:absolute last:*:left-1/2 last:*:top-1/2 last:*:z-0 last:*:w-8 last:*:h-8 last:*:w-auto last:*:-translate-x-1/2 last:*:-translate-y-1/2 last:*:opacity-0 last:*:blur-lg last:*:transition-opacity last:*:duration-500 last:*:hover:opacity-100"
)}>
  <div className="bg-blue-600"></div>
  <div className="rounded-full bg-red-600 blur-lg"></div>
</Link>

Additional context Add any other context about the problem here.

[hoangnhan2ka3]

@soranoo Something broke in both 2.2.11 and 2.2.11-beta.2:

When I rollbacked to 2.2.10, it's fine.

[hoangnhan2ka3]

But the main problem of this issue is solved

[hoangnhan2ka3]

I just discovered that if I change * to an alphabetic form like img, it works, it seems the problem here is just sth like: /\w+/ to /.+/.

// not works ⛔
<div className="first:*:hover:rotate-180 last:*:hover:opacity-100"></div>

// works ✅
<div className="first:img:hover:rotate-180 last:img:hover:opacity-100"></div>

Just try in my repo, cuz img: is my custom children selector, not Tailwind's official.

Tested with v2.2.10