Unquoted attribute value aren't mangled in CSS

[ericcornelissen]

Package(s)

language-css (v0.1.29)

Description

Mangling CSS using the language-css package as a plugin does not mangle single value attributes if the value isn't quoted.

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 whose value isn't quoted results in the attribute value not being mangled.

Expected Behaviour

Unquoted attribute values should be mangled.

Working Example

1. Checkout 875e55872cf018654862eced3936b4543595102f
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:

   .poc[id="id-works"] {
    color: red;
   }
   .poc[id="id-also-works"] {
    color: white;
   }
   .poc[id=id-fails] {
    color: blue;
   }
   
   .reference-a[id="id-fails"] {
    color: orange;
   }
   .reference-b[id='id-fails'] {
    color: orange;
   }

5. Run

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

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

   .poc[id="b"] {
    color: red;
   }
   .poc[id="c"] {
    color: white;
   }
   .poc[id=id-fails] {
    color: blue;
   }
   
   .reference-a[id="a"] {
    color: orange;
   }
   .reference-b[id='a'] {
    color: orange;
   }

Workaround

Don't use unquoted attribute values in CSS.

Notes

No response

[ericcornelissen]

The same problem also applies to what are normally multi-value attributes when they have only one value:

Working Example

1. Checkout commit 1525dc9e9b078223e798a6974074d7b23cdc9696
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 css-class mangler, mangling ids prefixed with "cls-" 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:

   .poc[class="cls-works"] {
    color: red;
   }
   .poc[class="cls-also-works"] {
    color: white;
   }
   .poc[class=cls-fails] {
    color: blue;
   }
   
   .reference-a[class="cls-fails"] {
    color: orange;
   }
   .reference-b[class='cls-fails'] {
    color: orange;
   }

5. Run

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

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

   .poc[class="d"] {
    color: red;
   }
   .poc[class="e"] {
    color: white;
   }
   .poc[class=cls-fails] {
    color: blue;
   }
   
   .reference-a[class="c"] {
    color: orange;
   }
   .reference-b[class='c'] {
    color: orange;
   }