Interpolation of JS values in CSS?

[jvivs]

I'm digging what you've got started here. At work we're wrapping up the initial pass on a react-based framework and I appreciate the simplicity and straightforwardness of svelte's interface.

After cruising the docs, guide, and code samples, I got thinking about how one might achieve skinnable reusable components in Svelte. It doesn't seem like there's any mention of it in the docs, but is there any preprocessing or JS variable interpolation in the <style> blocks? It seems like that could be a nice enhancement when reusing components.

Thanks in advance for taking the time to response and for sharing Svelte!

[Rich-Harris]

Unfortunately not – because CSS is shared between component classes, it can't vary per instance – in other words this...

<!-- App.html -->
{{#each colors as color}}
  <Widget color='{{color}}'/>
{{/each}}

<!-- Widget.html -->
<p>some {{color}} text</p>

<style>
  p {
    color: {{color}};
  }
</style>

...couldn't work because then you'd have to inject as many blocks of CSS as there were components, which would be problematic.

There's been some talk of preprocessing though – mainly to allow for things like SASS and CoffeeScript, but it could also allow for variable interpolation for component classes as a whole.