[WIP/RFC] CSS-in-JS styling

[maxdeviant]

This is a very early stage PR which aims to get us moving in the direction of a CSS-in-JS solution for styling SUIR. I've read over #1009 and am taking @levithomason's thoughts into account with the implementation.

The current plan is to use glamor as the CSS-in-JS solution for React. The full list of features can be found here, but some important highlights:

• Framework agnostic
• Supports all the pseudo :classes/::elements
• Support for @media / @font-face / @keyframes
• SSR support

The base styles themselves will be distributed in a separate package, and will not be tied to React. This will allow for implementations for other JS frameworks. The one caveat here is that while the base JS style objects are generally the same between CSS-in-JS implementations, they start to vary when you get down to the pseudo-selectors, @media queries, etc. This means that the raw styles themselves would probably need to be glamor-specific, or at least something that looks a lot like glamor (such as cxs). Given that glamor is not tied to a particular framework, I do not see this as being a show stopper.

Currently the styles are located at maxdeviant/semantic-ui-css-in-js and have a corresponding npm package. The approach here is going to look very similar to the LESS files in the main Semantic UI library. The primary difference will be that instead of exposing the styles directly, the package will expose style creators that take in the theme to allow for dynamic theming at runtime.

In way of theming, the theme configuration will be passed down using context via some sort of ThemeProvider component.

Landing this PR will close #1009.

@levithomason Would love to hear your thoughts on this 😄

[codecov-io]

Codecov Report

Merging #1579 into master will decrease coverage by 0.16%.
The diff coverage is 33.33%.

@@            Coverage Diff             @@
##           master    #1579      +/-   ##
==========================================
- Coverage   99.74%   99.58%   -0.17%     
==========================================
  Files         141      141              
  Lines        2381     2383       +2     
==========================================
- Hits         2375     2373       -2     
- Misses          6       10       +4

Impacted Files	Coverage Δ
src/elements/Button/Button.js	91.3% <33.33%> (-8.7%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 68b08a6...6cf8065. Read the comment docs.

[levithomason]

Very glad to see this. I've been thinking it's time to move forward on this endeavor.

I'm on vacation this week, but, will be back next week. Thanks for the PR and deep dive.

[maxdeviant]

Made some more progress tonight!

The button on the left is rendered using Glamor, and the one on the right is
using ye olde Semantic UI classnames 😮

I think the hardest part in all of this will probably be converting all of the Less over to JS. Some things that are making it easier:

• TypeScript for managing all of the variables in a type-safe manner
• ✨ polished for replacing the built-in Less functions
  • The only hard part here is ensuring the same behavior when going from Less to ✨ polished

I'm curious if there would be a way to generate TypeScript from Less, but I think that might be asking for too much 😅

[levithomason]

SUI LESS is very minimal, mostly making use of variables only. They do not make use of nesting, complex mixins, or LESS functions. Because they are so simple, it may be possible to generate TypeScript and also style objects.

I do like what Styletron offers in terms of performance and approach over others, you can read more here https://ryantsao.com/blog/virtual-css-with-styletron.

@davezuko and I will investigate this endeavor a bit and offer some more ideas and feedback, hopefully soon.

[maxdeviant]

@levithomason That blog post was a very good read. Seems like Styletron has a lot going for it.

[levithomason]

@maxdeviant I've posted a high-level update regarding investigations and goals in #1009 (comment). You may be interested.

[layershifter]

I close this for housekeeping, there is no decision about CSS-in-JS library now (#1009).

[levithomason]

Thanks for cleaning up.

So the community knows, this is still on my mind (along with a better theme customizer) but the time is not on my hands. I would love to see a concerted community effort to pull this off, though.