You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/test/runtime/samples/inline-style-directive-spre.../main.svelte

12 lines
169 B

[feat] Style directives (#5923) * add Style node, interfaces * style-directives: add parser and runtime test * style-directives: push styles in to styles array on Element * style-directives: minimal ssr work * style-directives: ssr add_styles * style-directive: tests * style-directives: work in progress * obviously incorrect hard-coded color * tweak * style directive interface * style-directives: get text from info in Style node * style-directives: add_styles func in ElementWrapper * style-directives: ssr rendering * handle text-only style directive in tag.ts * style-directives: handle spread styles in ssr * style-directives: more parser tests * style-directives: more inline tests * style-directives: remove solo tests * style-directives: cleanup * style-directives: tweak spread ssr internal * style-directives: push updater into update chunks; add dynamic test; * remove .solo * check for dynamic dependencies before adding update chunk * add test of multiple styles; remove null styles; * style-directives: docs; more tests of multiple styles * style-directives: use camelcase * style-directives: cleanup * style-directives: fix mustache template case with template literal * style-directives: use ternary * style-directives: linting * style-directives: remove "text" from interface * style-directives: actually, remove StyleDirective interface entriely * add more test, fix test for ssr * fix lint and tidy up * add test for css variables * fix linting errors Co-authored-by: pmurray73 <pmurray73@bloomberg.net> Co-authored-by: Tan Li Hau <lhtan93@gmail.com>
3 years ago
<script>
export let spread = { style: 'color: red;' };
export let color = null;
export let style = 'color: blue';
</script>
<p
style:color
{...spread}
{style}
/>