Closed fantasyui-com closed 4 years ago
I am going to learn a little bit more about the surrounding systems, I fear I am wasting your time at this point.
Having read the situation while myself is learning svelte for fast MVP and emotion could be a tool to keep my code clean.
I am looking over https://github.com/sveltejs/svelte/issues/4661 and coming from https://github.com/sveltejs/svelte/issues/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 https://github.com/sveltejs/svelte/issues/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
Please look over the emotion docs for more: https://emotion.sh/docs/introduction
As to the issue of Theming (https://github.com/sveltejs/svelte/issues/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 section to keep leading the way.
You are all amazing, Thank You, and apologies if I posted this in the wrong place.