Incorrect replacement for single-value attributes in CSS

[ericcornelissen]

Package(s)

language-css (v0.1.29)

Description

Mangling CSS using the language-css package as a plugin results in attribute selectors being mangled incorrectly if the attribute value matches single-value attribute configured to be mangled.

Actual Behaviour

Mangling a single-value attribute in CSS with the language-css package as a plugin on a piece of CSS that contains a matching single-value attribute selector results in the whole attribute selector being replaced by the mangled value.

Expected Behaviour

The attribute selector should be maintained and only the attribute value should be mangled.

Working Example

1. Checkout 7999a8bd1c4e653740f78715b3573d04fc39fa4e
2. Setup the repo with npm install
3. Initialize the file packages/cli/.webmanglerrc.js with:

   const { BuiltInLanguagesSupport } = require("webmangler/languages");
   const { BuiltInManglers, RecommendedManglers } = require("webmangler/manglers");
   
   module.exports = {
     plugins: [
       // Include the html-id mangler, mangling ids prefixed with "id-" by default.
       new BuiltInManglers(),
     ],
     languages: [
       // Mangle CSS, HTML, and JavaScript
       new BuiltInLanguagesSupport({
         cssExtensions: [".css"],
         htmlExtensions: [".html"],
         jsExtensions: [".js"],
       }),
     ],
   };

4. Add the following CSS to testdata/sample.css:

   .bug-poc[id="id-example"] {
     color: red;
   }

5. Run

   npm run cli --workspace=packages/cli -- ../../testdata --stats --write

6. Validate in testdata/sample.css that the mangled output contains (something like):

   .bug-poca {
     color: red;
   }

Workaround

Not known

Notes

This was discovered while creating additional end-to-end tests for the language-css package in #391. Enable the e2e test created in that Pull Request when working on this.