From d603fe01ebfce82dfcd6995ea4f93609a618ae8d Mon Sep 17 00:00:00 2001 From: GHOSt Date: Wed, 12 Jan 2022 08:56:34 +0000 Subject: [PATCH 1/5] fix by replacing - with _ --- src/compiler/compile/render_dom/wrappers/Element/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 59d06b8c9206..3981c8e793a5 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -923,7 +923,7 @@ export default class ElementWrapper extends Wrapper { const snippet = expression.manipulate(block); let cached_snippet; if (should_cache) { - cached_snippet = block.get_unique_name(`style_${name}`); + cached_snippet = block.get_unique_name(`style_${name}`.replace(/-/, '_')); block.add_variable(cached_snippet, snippet); } From 46ded440775395da5fc93fddae5d228009425220 Mon Sep 17 00:00:00 2001 From: GHOSt Date: Wed, 12 Jan 2022 09:54:43 +0000 Subject: [PATCH 2/5] test kebab case patch --- .../_config.js | 17 +++++++++++++++++ .../main.svelte | 6 ++++++ 2 files changed, 23 insertions(+) create mode 100644 test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js create mode 100644 test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js new file mode 100644 index 000000000000..0bd9bfdb98d6 --- /dev/null +++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js @@ -0,0 +1,17 @@ +export default { + html: ` +
+ `, + + test({ assert, target, window }) { + const div = target.querySelector('div'); + const styles = window.getComputedStyle(div); + + assert.equal(styles['background-image'], 'url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png)'); + + assert.htmlEqual( + target.innerHTML, + '
' + ); + } +}; diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte new file mode 100644 index 000000000000..c9b5fae70549 --- /dev/null +++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte @@ -0,0 +1,6 @@ + + +
From d30e6e239d02159b11159d840b1b6800068ce2ca Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Wed, 12 Jan 2022 11:12:22 +0100 Subject: [PATCH 3/5] code style --- src/compiler/compile/render_dom/wrappers/Element/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 3981c8e793a5..cec5828a013d 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -923,7 +923,7 @@ export default class ElementWrapper extends Wrapper { const snippet = expression.manipulate(block); let cached_snippet; if (should_cache) { - cached_snippet = block.get_unique_name(`style_${name}`.replace(/-/, '_')); + cached_snippet = block.get_unique_name(`style_${name.replace(/-/, '_')}`); block.add_variable(cached_snippet, snippet); } From cfd567c83062a12df46370da9d623303f84ff630 Mon Sep 17 00:00:00 2001 From: GHOSt Date: Wed, 12 Jan 2022 10:16:02 +0000 Subject: [PATCH 4/5] fix: multiple dash --- src/compiler/compile/render_dom/wrappers/Element/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index cec5828a013d..12cf7aaa1fac 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -923,7 +923,7 @@ export default class ElementWrapper extends Wrapper { const snippet = expression.manipulate(block); let cached_snippet; if (should_cache) { - cached_snippet = block.get_unique_name(`style_${name.replace(/-/, '_')}`); + cached_snippet = block.get_unique_name(`style_${name.replace(/-/g, '_')}`); block.add_variable(cached_snippet, snippet); } From 6e083c946045a63d2551a20f11bb518db566c86d Mon Sep 17 00:00:00 2001 From: GHOSt Date: Wed, 12 Jan 2022 10:23:05 +0000 Subject: [PATCH 5/5] expand test to cover css vars --- .../_config.js | 5 +++-- .../main.svelte | 7 ++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js index 0bd9bfdb98d6..3bd6d38ea5f3 100644 --- a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js +++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/_config.js @@ -1,6 +1,6 @@ export default { html: ` -
+
`, test({ assert, target, window }) { @@ -8,10 +8,11 @@ export default { const styles = window.getComputedStyle(div); assert.equal(styles['background-image'], 'url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png)'); + assert.equal(styles.getPropertyValue('--css-variable'), 'rgba(0, 0, 0, 1)'); assert.htmlEqual( target.innerHTML, - '
' + '
' ); } }; diff --git a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte index c9b5fae70549..dbfba08d6480 100644 --- a/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte +++ b/test/runtime/samples/inline-style-directive-string-variable-kebab-case/main.svelte @@ -1,6 +1,11 @@ -
+