Jss: Better custom props / css vars

[kof]

We do support custom props right now, but they have some inherent problems:

1. Declaring --something requires quotes in object syntax
2. Using them requires string-based syntax 'var(--something)'
3. CSS implements them again in the global namespace with cascade and inheritance

We can keep the current syntax and additionally provide a better one.

Let's have this conversation started.

[HenriBeck]

Not sure what the use cases for css vars are in our case, because we support both from the javascript side.

Theming can be done via the ThemeProvider and styling on a component basis can be done by using function values.

[kof]

JSS core is a generic tool, after all, supporting CSS features in a good way is important. I could imagine some people want to use custom props for various reasons. Many things like theming and dynamic values could be implemented using custom props.

Once JSS has a full static extraction, custom props could be one way to do all the dynamic cases without a runtime.

[brianmhunt]

One niceity that appears like it might be along these lines would be a trivial plugin that converts __customVar to --custom-var, so:

property: {
   '--custom-var': '123'
}

can be simplified to:

property: {
   __customVar: '123'
}

... which might seem tiny, but adds a lot to editor consistency/syntax highlighting.

[kof]

I was already even thinkig to add somethig that would allow dashes in property names without quotes.