Export SCSS to JS

[mattapperson]

Use case:
If developing more dynamic components, or are looking to use something like styled-components then you need access to the colors and mixins from JS .

• Support an API for accessing colors / sizes
• Support an API for accessing mixins

references:

• https://www.npmjs.com/package/sass-mixins-loader
• https://www.npmjs.com/package/sass-vars-to-js-loader
• https://www.npmjs.com/package/sass-export
• https://www.npmjs.com/package/scss-to-json
• https://github.com/jgranstrom/sass-extract-loader

[snide]

Things to consider...

• Theme dictates what file you're pulling from (dark / light / k6...etc)
• Probably want to think through how we could minimize breaks here. If a variable is malformed in the sass, it won't compile and we know immediately. What will happen in the JS? Note that since we started using EUI, I don't think we've ever removed a global var, we've simply changed their values.
• Dynamically pulling them is likely OK, but I have no idea if that becomes a performance hit. Previously where I worked we would actually build a JSON file from the sass (using sass-export or something similar). Then you just had this static file you pulled from.

No idea what is best here. Again, we should likely ping @sqren who has an interest in this.

[mattapperson]

in my mind it's probably best to pull in all themes all the time at compile time... then just have a theme selector that pulls the active theme?

[snide]

Saw this today. Looked very interesting.

https://github.com/4Catalyzer/css-literal-loader/blob/master/README.md#experimental-component-api

Specifically look at how you can call a sass mixin into the JS side. I like that it's not a replacement, but more of a pull-through.

[snide]

Closed via #642