Javascript Interpolation in Styles via CSS Variables?

[colah]

Back in November, there was some discussion of whether svelte could support javascript variable interpolation in style sheets (sveltejs/v2.svelte.dev#9). Unfortunately, this didn't seem feasible, since CSS classes are per class, and can't be specialized per instance.

It seems like this could be possible using CSS variables. Consider adding the following (functional) svelte code to the standard counter example:

<div class="bar" style="--count:{{count}}"></div>

<style>
  .bar {
    width: calc(40px * var(--count) );
  }
</style>

• repl link

This sort of pattern might be attractive for a a few reasons:

• It avoids messy inline styling.
• It allows pure CSS for certain kinds of interactivity (eg. :hover).
• It may (?) be faster in certain situations like spritemap manipulation where one wants to prevent certain parts of the style from being updated? (I don't understand the underlying model well enough to know if or when this would be true).

(To be clear, I've only done a few toy things this way. I'm completely open to the possibility that it may not be a good idea at all!)

While the example above works, and might be handy, it seems unnecessarily clunky. It also runs a risk that CSS variables may end up with different names than their JS counterparts, accumulating technical debt.

Potential Svelte Integration

If svelte wanted to facilitate this kind of pattern, there's a broad spectrum of options it could take.

1. At the very mild end, it could support a kind of CSS variable binding syntax. This could cut down on repretition and encourage variable names to stay in sync:

<div class="bar" css_bind:count ></div>

2. The next step up might be to detect variable usage and implicitly bind them. So you'd just do this without explicitly setting up --count:

width: calc(40px * var(--count) );

3. Yet stronger might be to allow javascript variables through the usual syntax and implicitly create the css variable:

width: calc(40px * {{count}} );

Or maybe this, if you wanted to still remind the user that it's a variable:

width: calc(40px * var({{count}}) );

4. Finally, one could go all the way in:

width:  {{40 * count}}px;

Which would compile into something like:

<div class="bar" style="--svelte-css-1234:{{40 * count}}px"></div>

<style>
  .bar {
    width: var(--svelte-css-1234);
  }
</style>

Potential Downsides

• This could lead to less transparent CSS code when inspected in the browser. Compare:

width: 120px;

--count: 3;
width: calc(40px * var(--count) );

--svelte-css-1234: 120px;
width: var(--svelte-css-1234);

On the flip side, it may make some things more transparent -- especially if we can keep variable names synced to javascript.

• It may also complicate the model for understanding what your code is doing behind the scenes...

[Conduitry]

I do really like this idea, but I'm worried about having to put disclaimers next to certain features about 'if you use this feature, the compiled code will not work in Internet Explorer'. Unless something's changed, there aren't official browsers that Svelte commits to supporting, but in the past we've aimed to produce code that runs in the last few versions of IE.

[Rich-Harris]

That REPL example is super cool! I actually think that's already quite nice and usable. May even start using it in a few places where I don't need to support IE.

glam manages to polyfill CSS vars somehow. Haven't studied the implementation, but maybe there's something in there that Svelte could be doing. (No idea.)

If we did want a more concise approach, I think it's number 4:

width:  {{40 * count}}px;

The implementation certainly could get a bit hairy, especially if polyfilling was involved, but I don't see a huge amount of value in the intermediate versions over and above the example that works today.

[colah]

@Conduitry: that's a very reasonable reservation to have.

According to this blog post, Microsoft now supports CSS custom properties in their "Windows Insider Release". And the blog post is by the program manager for Edge and has a very positive tone, so I'd read that as a pretty strong signal that they intend to support it. No idea how long it takes features to move from their insider release to public consumption, let alone to trickle out to wide spread use.

[Rich-Harris]

One other consideration — csstree won't parse this:

div {
  color: {{color}};
}

Just to make things a bit more annoying!

[Conduitry]

It might be neat to revisit this, now that we're no longer supporting IE11. It also looks like recent versions of csstree are able to parse CSS that contains mustaches/tags.

[colah]

For what it's worth, this would still be very exciting to me!

My svelte code constantly turns into tags with style="multiple lines of css styling with mustaches" that's not very readable. It really feels like that this would make it much cleaner!

[saabi]

Here's a REPL with the Counter example in v3.

It's not too cumbersome, but some support for doing it directly in CSS, while keeping compatibility with other preprocessors would be great.

Something like this:

<input type=number bind:value={count}>
<button on:click={() => count += 1}>count</button>
<div class="count-bar"></div>

<!--
var-prefix could be optional, default would just be '--' which 
would replace all CSS vars that match a component variable.
However, specifying it improves readability as it makes 
intent explicit.
And perhaps it should be required to enable replacement, so
as to avoid surprises with unexpected replaced vars.
-->
<style var-prefix='--s-'> 
	.count-bar {
		height: 40px;
		width: calc( var(--s-count) * 1px + 1px);
		background-color: gray;
	}
</style>

[michalczaplinski]

@Rich-Harris Is this still a desirable feature? As per @colah's solution number 4:

width:  {{40 * count}}px;

I'd like to send a PR because I'm missing this coming from styled-components.

Also, could you clarify your comment there #1687 (comment) :

(To clarify: no, you can't use component state in <style>, because the styles are shared between all component instances. It would be very inefficient for the browser to have a copy of the styles per component; for coarse-grained customisation like the primary button, classes are the preferred mechanism, and for fine-grained per-component customisation, inline styles are the appropriate tool for the job.)

Perhaps I misunderstood, but does this mean that the compiler would have to create a copy of the styles for each component instance if we interpolate JS in <style>...? Does this prevent the current issue from being implementable?

PS. Just started using Svelte a couple days ago and, wow, I'm super impressed. Great work! 🙂

[pngwn]

With the current CSS implementation, yes. There is one CSS file for each component, not for each component instance. In the above example you could have several instances of a component with several width values but only one CSS file.

The only way to make this work would be for the compiler to check which values were dynamic and manage those values in the component instance rather than in the CSS file. There is more to think about here as well (can you interpolate which nth-of-type gets a style applied to it?) How much of a CSS runtime would this introduce, and how would this conflict with svelte's general goal.

CSS is definitely something that we want to improve, so I don't mean to be negative but there are some important things to consider before implementing these kinds of changes both from a design point of view and a technical point of view.

[michalczaplinski]

@pngwn Thanks for the explanation - that makes sense. I ll have a look at how other libs deal with it and try to come up with some ideas.

[salvoravida]

<script>
	import { css } from 'emotion';

	export let width = 200;

    $: boxStyle = css`
        border: solid 1px red;
        height: 200px;
    	width: ${width} px;
    	font-size: 1em;
    	white-space: nowrap;
    `;
</script>

<style>
	h1 {
		color: red;
	}
</style>

<div class={boxStyle}>
   <h1>Hello {width}!</h1>
</div>

styled component like in Svelte!

@Rich-Harris first: great works!

Some tips to make Svelte a real-big-apps alternative to React :

1. Styled Components like, with runtime css is something too important in big Apps, so please try to do this with less boilerplate than my example.

2. make possible to export multiple components from one file (like styled components)

3. compiler should understand derivate invalidation props without $: statement
   if a variable is used inside the template than should be auto-invalidate even if without $:
   Think like syncronization beetween "scope state" and rendered html

<script>
	import { css } from 'emotion';
	export let width = 200;
        let boxStyle = css`
        border: solid 1px red;
        height: 200px;
    	width: ${width} px;
    	font-size: 1em;
    	white-space: nowrap;
    `;
</script>
<div class={boxStyle}>
   <h1>Hello {width}!</h1>
</div>

again: great works! :D