Unquoted attribute value aren't mangled in CSS
Closed this issue · 1 comments
ericcornelissen commented
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
- Checkout
875e55872cf018654862eced3936b4543595102f
- Setup the repo with
npm install
- 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"], }), ], };
- 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; }
- Run
npm run cli --workspace=packages/cli -- ../../testdata --stats --write
- 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 commented
The same problem also applies to what are normally multi-value attributes when they have only one value:
Working Example
- Checkout commit
1525dc9e9b078223e798a6974074d7b23cdc9696
- Setup the repo with
npm install
- 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"], }), ], };
- 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; }
- Run
npm run cli --workspace=packages/cli -- ../../testdata --stats --write
- 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; }