Svelte: CSS constants

[drop1down]

CSS in svelte is today very static and hardcoded.
Most people like to use constant values for many components.
So my idea is to allow svelte to use own css-constants:

<style>
    button {
        background-color: $primary-color
    }
</style>

We need a place to store css-constants like "$primary-color" somewhere.
What about ".css" file at project root?

If you use for example a svelte ui package and you want to override presets.
You could add your own .css file to your project.

At this moment, here are 2 (bad) alternatives:

1) svelte-preprocessor
https://github.com/kaisermann/svelte-preprocess
This work perfect for own project - but a component library imported as package need to fork/modify

2) css-variables
do not work with old browsers

[Conduitry]

This isn't really something we're interested in implementing. Pretty much the only reason I can think of to implement something like this as an alternative to css variables would be for the sake of IE11, which by percentage is a very small benefit.

For writing a component library, I'd recommend option 2 - css variables. If you need to consume these in an app that needs to work on IE11, I'd recommend finding or writing a simple preprocessor that looks for for var(...)s in CSS and replaces them.

[sw-yx]

possibly related issue but yeah https://github.com/sveltejs/svelte/issues/758

[Conduitry]

Whoops yeah I had linked to #758 while writing my comment by apparently lost it during editing.

edit: Double whoops, I had mentioned it in #4355. Glad I'm not going crazy.

[drop1down]

This isn't really something we're interested in implementing. Pretty much the only reason I can think of to implement something like this as an alternative to css variables would be for the sake of IE11, which by percentage is a very small benefit.

here are 2 advantages:
1) it is much easier to use (compared to css-vars)
2) it can work out of the box with old browsers

And i think it is easy to add to svelte (just a simple const replace preprocessor) and no runtime updates needed. Output is same static css.

So why not?

[AlexGalays]

This isn't really something we're interested in implementing. Pretty much the only reason I can think of to implement something like this as an alternative to css variables would be for the sake of IE11, which by percentage is a very small benefit.

here are 2 advantages:

1. it is much easier to use (compared to css-vars)
2. it can work out of the box with old browsers

And i think it is easy to add to svelte (just a simple const replace preprocessor) and no runtime updates needed. Output is same static css.

So why not?

A third advantage is that it's way better/safer than css variables when using TypeScript.

Can we reopen please? This is a common use case.