Empty CSS variables are incorrectly minified

[adamwathan]

Describe the bug

This is valid CSS:

.my-class {
  --my-var: ;
}

Importantly, the value of the variable is a single space character. SvelteKit is minifying this CSS (in development and production) to this:

.my-class {
  --my-var:;
}

This is syntactically invalid and breaks the semantics of the original CSS.

Unfortunately this breaks compatibility with Tailwind CSS, as we rely on empty variables to make certain types of styles composable, which you can read about in this blog post if would like a deeper explanation: https://adamwathan.me/composing-the-uncomposable-with-css-variables/

esbuild used to have the same bug but it was fixed a long time ago: evanw/esbuild#760

I've confirmed that esbuild is minifying this code safely:

/* Input */
.a {
  --blur: ;
}

/* Output */
.a{--blur: }

...so I'm not sure where in the chain this is happening.

Reproduction

Here's a basic SvelteKit project that demonstrates the issue:

https://github.com/adamwathan/sveltekit-css-minification-bug/blob/main/src/routes/index.svelte

Logs

No response

System Info

System:
    OS: macOS 12.0
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.34 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /var/folders/7p/9j_d6ys502scd371yx3nwfkm0000gn/T/fnm_multishells/57296_1645277079681/bin/node
    Yarn: 1.22.17 - /var/folders/7p/9j_d6ys502scd371yx3nwfkm0000gn/T/fnm_multishells/57296_1645277079681/bin/yarn
    npm: 8.1.0 - /var/folders/7p/9j_d6ys502scd371yx3nwfkm0000gn/T/fnm_multishells/57296_1645277079681/bin/npm
  Browsers:
    Brave Browser: 98.1.35.100
    Chrome: 98.0.4758.102
    Chrome Canary: 101.0.4897.0
    Firefox: 94.0.2
    Safari: 15.0
    Safari Technology Preview: 15.4
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.17
    @sveltejs/kit: next => 1.0.0-next.278
    svelte: ^3.46.0 => 3.46.4

Severity

blocking all usage of SvelteKit

Additional Information

No response

[dominikg]

likely a bug in svelte itself, see css output tab in this repl https://svelte.dev/repl/06b3ee703d9542abb7a8bc35ff301f4b?version=3.46.4

[bluwy]

It also looks like a Chrome only bug. Safari and Firefox renders fine. (Reminds me of this esbuild release)

[geoffrich]

From my research in an earlier issue, this is technically a Chrome bug and will be fixed in the next release (99): #7152 (comment)

[adamwathan]

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.

[adamwathan]

I'm going to close this in favor of #7152 regardless though, thanks for pointing me there!