[v4] Namespace override syntax is not valid CSS

[malobre]

I'm using a CSS formatter (biome) that won't parse namespace overrides, e.g: --font-*, because it is not a valid ident-token according to https://drafts.csswg.org/css-syntax-3/#ident-token-diagram

I see two possibilities:

• Keep the current syntax:
  In this case we should also support the escaped version (which is valid CSS syntax), e.g: --font-\*: initial;.
• Change the syntax:
  The simplest alternative would be to drop the asterisk, e.g --font: initial;.

[adamwathan]

Yeah I think we should support the escape syntax — removing the asterisk is ambiguous because that's how you configure suffix-less values in v4, for example:

--shadow: 0 2px 4px rgb(0 0 0 / 5%);

...can be used to configure a shadow utility (as opposed to shadow-sm or shadow-md).

[malobre]

The CSS syntax is quite limited in this context (without resorting to escaping), I guess you could have trailing dashes or underscores: --font-: initial; but it looks kinda weird.

[malobre]

One more thing: by having the default syntax not being valid CSS we might run into other issues like syntax highlighting acting weird etc