Svelte Preprocessor Demo

svelte-seoul

Preprocess-demo

--style-props

In Svelte, 1 is syntactic sugar for 2.

<!-- 1 -->
<Welcome
  --my-color=blue
  --my-bg-color=red
/>

<!-- 2 -->
<div style="display: contents;  --my-color: blue; --my-bg-color: red">
  <Welcome/>
</div>

So in Welcome, css-variables are available.

Using preprocessor

Of cource this is useless. But I made it for practice.

Here's new App.svelte.

<!-- App.svelte -->
<Welcome/>

<style>
    Welcome {
        --my-color: blue;
        --my-bg-color: red;
    }
</style>

Preprocessor modify Welcome.svelte using App.svelte before compile time.

<!-- Welcome.svelte -->
<div style="display: contents;  --my-color: blue; --my-bg-color: red">
    <h2>Hello {name}!</h2>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</div>

Note that there's no need to modify Welcome.svelte. Wrapping Welcome with div in App.svelte produces same output. I just did it for preparing more complicated example.

Top categories