From d8e9d1117a2abeaf827387b80d36396283aaa92f Mon Sep 17 00:00:00 2001 From: Geoff Rich <4992896+geoffrich@users.noreply.github.com> Date: Tue, 22 Feb 2022 08:57:17 -0800 Subject: [PATCH 1/3] fix: do not collapse whitespace-only css vars --- src/compiler/compile/css/Stylesheet.ts | 2 ++ test/css/samples/css-vars/expected.css | 2 +- test/css/samples/css-vars/input.svelte | 4 ++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts index 8f88f0cbd406..7f0c0b52ca9b 100644 --- a/src/compiler/compile/css/Stylesheet.ts +++ b/src/compiler/compile/css/Stylesheet.ts @@ -145,6 +145,8 @@ class Declaration { ? this.node.value.children[0] : this.node.value; + if (first.type === 'Raw' && /^\s+$/.test(first.value)) return; + let start = first.start; while (/\s/.test(code.original[start])) start += 1; diff --git a/test/css/samples/css-vars/expected.css b/test/css/samples/css-vars/expected.css index c2bd56375b1f..3c252b8d0522 100644 --- a/test/css/samples/css-vars/expected.css +++ b/test/css/samples/css-vars/expected.css @@ -1 +1 @@ -:root{--root-test:20}div.svelte-xyz{--test:10} \ No newline at end of file +:root{--root-test:20}div.svelte-xyz{--test:10}div.svelte-xyz{--foo: } \ No newline at end of file diff --git a/test/css/samples/css-vars/input.svelte b/test/css/samples/css-vars/input.svelte index 7aa48617a48b..3679e0d45393 100644 --- a/test/css/samples/css-vars/input.svelte +++ b/test/css/samples/css-vars/input.svelte @@ -7,4 +7,8 @@ div { --test: 10; } + + div { + --foo: ; + } From 6eec9cbaaa8c88bd4c6cb30e6181f9f24bb24d15 Mon Sep 17 00:00:00 2001 From: Geoff Rich <4992896+geoffrich@users.noreply.github.com> Date: Tue, 22 Feb 2022 09:20:08 -0800 Subject: [PATCH 2/3] add !important test --- test/css/samples/css-vars/expected.css | 2 +- test/css/samples/css-vars/input.svelte | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/test/css/samples/css-vars/expected.css b/test/css/samples/css-vars/expected.css index 3c252b8d0522..d9ff79a2a9c8 100644 --- a/test/css/samples/css-vars/expected.css +++ b/test/css/samples/css-vars/expected.css @@ -1 +1 @@ -:root{--root-test:20}div.svelte-xyz{--test:10}div.svelte-xyz{--foo: } \ No newline at end of file +:root{--root-test:20}div.svelte-xyz{--test:10}div.svelte-xyz{--foo: ;--bar: !important} \ No newline at end of file diff --git a/test/css/samples/css-vars/input.svelte b/test/css/samples/css-vars/input.svelte index 3679e0d45393..4a969428ab6d 100644 --- a/test/css/samples/css-vars/input.svelte +++ b/test/css/samples/css-vars/input.svelte @@ -10,5 +10,6 @@ div { --foo: ; + --bar: !important; } From 8916563d5415ee92c1f5fc4ec41a4c27d512d444 Mon Sep 17 00:00:00 2001 From: Geoff Rich <4992896+geoffrich@users.noreply.github.com> Date: Wed, 23 Feb 2022 08:14:41 -0800 Subject: [PATCH 3/3] Add explanatory comment --- src/compiler/compile/css/Stylesheet.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/compiler/compile/css/Stylesheet.ts b/src/compiler/compile/css/Stylesheet.ts index 7f0c0b52ca9b..0a3098db6d63 100644 --- a/src/compiler/compile/css/Stylesheet.ts +++ b/src/compiler/compile/css/Stylesheet.ts @@ -145,6 +145,8 @@ class Declaration { ? this.node.value.children[0] : this.node.value; + // Don't minify whitespace in custom properties, since some browsers (Chromium < 99) + // treat --foo: ; and --foo:; differently if (first.type === 'Raw' && /^\s+$/.test(first.value)) return; let start = first.start;