Eui: CSS modules roadmap

[jasonrhodes]

I'd love to help take some of the lead on plotting a course for how this would work, based on what we did at my previous job with React, a design component library, and scoped CSS modules. To get that conversation started, can we use this issue to map out the general requirements for what "CSS" needs to do in EUI? To start:

• imported EUI components should be styled (users will need to import the main EUI CSS file in their project)
  
  
  
  • if we can eventually find a way to be more clever and have EUI consumers only include CSS for components as they use them, that'd be nice too, especially once we figure out the component tree-shaking stuff
  
  
• CSS files and SCSS files should be generated and available for independent use (do these files need to contain _all classes_ from EUI or just the baseline theme stuff?)

Is that the gist?

[snide]

@jasonrhodes I'm on board with this completely. I did some work two weeks ago as an experiment but got blocked by some of the engineery bits. Might make sense to do a quick zoom meeting to go over some ideas.

What I generally want out of the system is...

1. We need a reset/global css file that ends up in dist independent of the components.
2. Delivery of the css inside the individual components (and prefixed) is fine. It'd be nice if we could have those files available separately as unprefixed css (for non React users). The later is honestly less important to us these days.
3. Theming becomes harder. We'll need to figure out how to pass theme context to the components in a dynamic fashion so it knows which css to use.

Goals we're trying to solve.

1. Still use sass.
2. Do prefixing to avoid cascade.
3. Cut the delivery sizes down.

[snide]

Also goes without saying that once in EUI, we'd love to bring this to Kibana for many of the same reasons. Right now there is a lot of cascade crazyness down there where people are overwriting EUI base styling.

[thompsongl]

I'll also be very interested in helping out here.

Not at all tied to a given technical implementation (re: css-modules, etc.), but I've been hearing about this lately and wanted to at least give the concept a look: https://github.com/4Catalyzer/astroturf

[MichaelMarcialis]

I'd be interested in helping here as well.

[snide]

Closing this in favor of https://github.com/elastic/eui/issues/1656 which is the main tracking issue.