whitespace and !important token valid in css custom properties but not in svelte #7152
Description
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.2Severity
annoyance