search

svelteuidev / svelteui

SvelteUI Monorepo
https://svelteui.dev
MIT License
1.3k stars 62 forks source link

Explore different CSS-in-JS libraries #432

Open BeeMargarida opened 1 year ago

BeeMargarida commented 1 year ago

Necessary since Stitches is now not being currently maintained.

Current Options: ✅ PandaCSS 🚫 Emotion 🚫 Styled Components 🚫 Linaria

BeeMargarida commented 1 year ago

Currently doing a POC in a SK project with Panda

mrbrianevans commented 1 year ago

would it be viable to style components using css in the svelte files in <style> tags, and having shared .css files for common theme styles, and allowing users to inject styles inline using the style prop? Would this significantly reduce the bundle size by not requiring a runtime library?

BeeMargarida commented 1 year ago

Right now, without using any runtime library, the only way to override in <style> with be with :global(), since svelte does not provide any other way. One of the things we are exploring is to pass css variables as props (svelte allows this), but we still want to enforce the theme (so passing a blue with result in using our color variable for blue600, for example). This is still in POC phase, since we want to maintain the same feature set, even if the style API totally changes

DominikRusso commented 1 year ago

Another possibility would be vanilla-extract.

notramo commented 9 months ago

What about using SUIT CSS naming convention and SASS in component <style> tags? Then users could import a global stylesheet via JS import statement in the layout, which could override needed parts. The naming scheme would make it clear what class belong to what component. Also, as it would not depend on external library, but Svelte built-in solution, it would reduce the risk of having to refactor again in case a 3rd party styling library is selected, and it gets abandoned.