[fix] handle kebab case style directives (#7123)

fixes #7122
pull/7135/head
GHOST 4 years ago committed by GitHub
parent 4d1d1861eb
commit c67f8ef14c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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(/-/g, '_')}`);
block.add_variable(cached_snippet, snippet);
}

@ -0,0 +1,18 @@
export default {
html: `
<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>
`,
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.equal(styles.getPropertyValue('--css-variable'), 'rgba(0, 0, 0, 1)');
assert.htmlEqual(
target.innerHTML,
'<div style="background-image: url(https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png); --css-variable: rgba(0, 0, 0, 1);"></div>'
);
}
};

@ -0,0 +1,11 @@
<script>
let url =
"https://raw.githubusercontent.com/sveltejs/branding/master/svelte-vertical.png";
let alpha = 1;
</script>
<div
style:background-image="url({url})"
style:--css-variable="rgba(0, 0, 0, {alpha})"
/>
Loading…
Cancel
Save