webc:scoped and `lch()`

cc @georgedoescode

TL;DR

• The upstream issue I filed: https://github.com/csstree/csstree/issues/209
• Marginally related upstream issue: https://github.com/csstree/csstree/issues/52
• Technically the whitespace removed values still render ok in Safari

The synopsis:

• Related: https://css.land/lch/

Currently <style webc:scoped="my-prefix">div { color: lch(97% 44.2% 240); }</style> returns .my-prefix div{color:lch(97% 44.2%240)}.

This is independent of WebC and is the same in our raw upstream dependency output from css-tree https://www.npmjs.com/package/css-tree

import { generate, parse, walk } from "css-tree";
let ast = parse(str);

console.log(generate(ast));

This occurs with both spec or safe mode in the generate method. https://github.com/csstree/csstree/blob/HEAD/docs/generate.md#mode

Notably there is only one browser that supports lch right now so I plugged that value into Safari and it was invalid there—THOUGH confusingly I did find evidence of that same format in the spec 😅 at https://w3c.github.io/csswg-drafts/css-color/#ex-lch-samples

All that said, using an lch() without a percentage as the second value gives back the same issue in css-tree:

div { color: lch(67.5345% 42.5 258.2); }

/* returns */
div { color: lch(67.5345%42.5 258.2); }

I filed the above test case upstream at https://github.com/csstree/csstree/issues/209

All THAT said, both the preprocessed value and the postprocessed value render fine in Safari.

Reproduce the examples in the issue using css-tree's parse and generate APIs, including both generator modes, and compare the output with the expected whitespace in lch() values. Read the linked css-tree issue 209 first; done means the dependency or its integration preserves valid lch() syntax without breaking the scoped style output.