Use css-modules

[cheapsteak]

Components should be able to manage their own stylesheet dependencies

ComponentFoo.jsx :

//...
require('./ComponentFoo.scss')
//...

These stylesheets should then be extracted by the build script, built by the preprocessor, and saved into their own css file to avoid FOUC and also so it can be cached

Reference workflow:

https://webpack.github.io/docs/stylesheets.html

[njam3]

@cheapsteak Can you please provide more detail, by default, all our ui components have their own style sheet. Are you referring to adding something describe here: #143

[cheapsteak]

Currently stylesheets and javascript are two separate dependency trees.

Adding a component necessitates not only attaching that component to the js dependency tree, but also requiring the component's sass dependency into a separate css dependency tree

The cognitive switching costs from having to hunt down the entry point for the stylesheet tree has resulted in some devs opting to inline css in javascript, which I think is undesirable, but understandable.

Components (jsx files) should be able to manage their own complete dependencies. Simply requiring a component should load its associated CSS files

Something like https://www.npmjs.com/package/sassify might do the trick, although webpack offers an extraction option that allows the extracted css to be hundled into a separate css file, which might be desirable for caching

[cheapsteak]

This also looks very promising: https://github.com/gajus/react-css-modules

Provides local-scoping as well (like vue and angular does) so you don't have to worry about class name collisions

There's also browserify option as well but the readme doesn't provide as much context, might be useful for making it but perhaps not so much for research https://github.com/css-modules/css-modulesify

[iranreyes]

Research about Shadow DOM support

[iranreyes]

I don't like this because the mixins but it is the idea: https://github.com/Wildhoney/ReactShadow