Dynamic Stylesheets are simple via emotion, worried that issue 4661 is not solving things in the Svelte way.

[Dr. Meow]

I am looking over sveltejs/svelte#4661 and coming from sveltejs/svelte#1550 (Theming) and see that CSSOM will not be treated the same way as DOM, if we can't just use standard notation like in the dom (ex: {var}) it does not really make things simpler. Here is simpler.

For those of you who want dynamic CSS. CSS rules/declaration updating when Svelte variables change.

I would not normally create a new issue, but this is so simple when compared to sveltejs/svelte#4661 that it becomes an issue.

The following snippet uses https://emotion.sh/ which the author (no affiliation) describes as "Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported."

I give example of both Object and Strings

<script>
  import { css } from 'emotion'

  let primary = 'salmon';

  $: boxStyleObject = {

    backgroundColor: primary,

    '&:hover': {
      backgroundColor: 'tomato',
    }
  }
  // $: boxClass = css(boxStyleObject); // use object

  $: boxStyleCSS = `
    background-color: ${primary};
     &:hover {
      background-color: tomato;
    }
  `;
  $: boxClass = css`${boxStyleCSS}`; // use string

</script>

<svelte:head>
  <title>𝗖𝗔𝗧𝗣𝗘𝗔: Component Designer</title>
</svelte:head>


<input type="color" bind:value={primary}>

<div class="container">
    <div class="row">
      <div class="col p-3">
        <div class="box p-3 {boxClass}">

          Example Box
          {boxClass}

        </div>
      </div>
    </div>
</div>

Please look over the emotion docs for more: https://emotion.sh/docs/introduction

As to the issue of Theming (sveltejs/svelte#1550), I have bootstrap scss loaded via https://github.com/kaisermann/svelte-preprocess altering Bootstrap's scss code automatically re-compiles via https://github.com/sass/sass Here is my rollup.config.js: https://github.com/fantasyui-com/catpea-com/blob/master/rollup.config.js

As my private opinion, overall there should be no difference between handling of variable in CSSOM and DOM. Adding variable interpolation on CSS level, will cause this problem: https://sass-lang.com/documentation/variables where pre-processor functions will see var(--hello), intead of the value which pre-processors need for functions like darken(). In sass darken(var(--hello)) does not work as value of var(--hello) is not available to pre-processing. It is a run time variable with it's own behaviour (see Heads up! in https://sass-lang.com/documentation/variables for a nicer explanation)

I can see that Svelte has beat Vue and React,
You have earned a place in the History of Evolution of Software.
Upgrade to {cury-variable} interpolation in <style/> section to keep leading the way.

You are all amazing,
Thank You,
and apologies if I posted this in the wrong place.

[Dr. Meow]

I am going to learn a little bit more about the surrounding systems, I fear I am wasting your time at this point.

[Gilberto Espinoza Maciel]

Having read the situation while myself is learning svelte for fast MVP and emotion could be a tool to keep my code clean.