CSS functions are case insensitive

[ericcornelissen]

Package(s)

mangler-css-variables (0.1.23), mangler-html-attribute (0.1.23)

Description

CSS functions such as attr() or var() are not case sensitive. However, if they're not written in all lowercase the CSS language plugin won't recognize them and not mangle the CSS correctly.

An overview of affected CSS functions (this overview is limited to functions referenced in the source code of the mangler plugins at f8e99b0):

Functions	Tested	Affected	Addressed
attr()	Yes	Yes	#360
var()	Yes	Yes	#358

Actual Behaviour

The use of var() is just for illustrative purposes.

If one has a CSS file containing a CSS function that's not written in all lowercase, e.g.:

.cls-foo {
  --var-bar: red;
  color: VAR(--var-red);
}

it won't be mangled properly, instead you'd get something like:

.a {
  --a: red;
  color: VAR(--var-red);
}

Expected Behaviour

It should be mangled properly:

.a {
  --a: red;
  color: VAR(--a);
}

Working Example

1. Checkout f8e99b0

2. Add the following to the .cls-foo ruleset of testdata/sample.html:

   --var-foo: red;
   color: VAR(--var-foo);

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

4. Observe the mangled testdata/sample.html file contains:

   --c: red;
   color: VAR(--var-foo);

Workaround

Avoid writing CSS functions in any way but all lowercase.

Notes

No response