whitespace and !important token valid in css custom properties but not in svelte

[tanangular]

Describe the bug

h1 {
  --foo: ;
  color: var(--foo) blue;
}
	
h2 {
  --foo: !important;
  color: green var(--foo);
}

When I read this article The CSS Custom Property Toggle Trick, I am trying to use whitespace in css custom properties with svetle, it say "invalid value", but it should be valid according to W3C custom properties specification.

Ref: https://www.w3.org/TR/css-variables-1/#syntax

Reproduction

svelte REPL: https://svelte.dev/repl/d563fcb1d63e405da8a74ae1ef8f30ad?version=3.46.2
codepen: https://codepen.io/tanangular/pen/rNGPgRa

Logs

No response

System Info

System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 360.45 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.3.0 - ~/.nvm/versions/node/v17.3.0/bin/node
    npm: 8.3.0 - ~/.nvm/versions/node/v17.3.0/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Chrome Canary: 99.0.4828.0
    Edge: 93.0.961.47
    Firefox: 96.0
    Safari: 15.2
    Safari Technology Preview: 15.4
  npmPackages:
    rollup: ^2.3.4 => 2.64.0 
    svelte: ^3.0.0 => 3.46.2

Severity

annoyance

[baseballyama]

This is just memo but it works well on Firefox.

[tanangular]

@baseballyama, thanks you, you 're right.
This bug has gone on

• Firefox 96.0.1 ✅
• Safari 15.2 (17612.3.6.1.6) ✅
• Safari Technology Preview Release 137 (Safari 15.4, WebKit 17613.1.11.8) ✅
• Google Chome Canary 99.0.4828.0 ✅

but still have a bug on

• Google Chrome Version 97.0.4692.71 ❌
• Microsoft Edge Version 97.0.1072.62 ❌

[geoffrich]

I think this is a browser bug. Svelte minifies --foo: ; to --foo:;, which should be the same, per the spec. However, Chrome treats --foo:; as invalid. This was recently fixed, and your REPL does work in Chrome Canary (v99).

[adamwathan]

Just reposting my comment from #7288 (comment):

---

Looks like the change to the spec that makes --foo:; and --foo: ; equivalent is quite recent (in terms of spec changes anyways).

Personally I think it would be best to change this in Svelte regardless for better compatibility, it's a change lots of other tools have had to make as well since historically --foo:; and --foo: ; were not equivalent.

This is what the spec said last time I looked a couple of months ago:

Note: While must represent at least one token, that one token may be whitespace. This implies that --foo: ; is valid, and the corresponding var(--foo) call would have a single space as its substitution value, but --foo:; is invalid.

...so I wouldn't be surprised if this sneaky problem shows up a lot for a while. It'll be a while before Electron is on 99 for example I bet.

[Conduitry]

This should be fixed in 3.46.5 for browsers that don't follow the latest spec.