- Continue to support broad technology choices
- Modern JS applications are our prime concern, but we do not want to drop support for static HTML or legacy applications
- Continue to utilize Sass
- See the relevant section in the issue
- Modularize EUI
- Obvious performance and DX implications, but also a prerequisite to migrating to any other style methodology.
- Not start from scratch
- Continue to rely on what EUI does well, but begin to address its monolithic nature.
- Be open to change
- CSS-in-JS is enticing and has enormous promise, and we're positioning ourselves for that future. Right now, though, a wholesale change is a bridge too far.
astroturf and styled-jsx were given the most attention because of their inherant support for Sass and their ability to consume external .scss and .css files (making continued support for static HTML possible).
styled-components and emotion were obvious considerations, but both have decidedly excluded Sass and would require us to rewrite hundreds of foundational style utilities in JavaScript.
astroturf: https://github.com/elastic/eui/compare/master...thompsongl:ref/astroturfstyled-jsx: https://github.com/elastic/eui/compare/master...thompsongl:ref/styled-jsx
- control: thompsongl/eui#5
astroturf: thompsongl/eui#6styled-jsx: thompsongl/eui#7
| Feature | astroturf | styled-jsx |
|---|---|---|
| Category | CSS Modules | CSS-in-JS |
| Class name generation | Full rewrite | Additive/Compound |
| Can import .scss files | ✅ | ✅ |
| Can write Sass inline | ✅ | ✅ |
| Requires .css file after build | ✅ | |
| CSS is inlined at build | ✅ | |
| Does not require structural changes to EUI components | ✅ |
The fearure matrix really doesn't tell the whole story. When removing theming concerns from the equation, the modifications that styled-jsx would introduce are not seen as benefits, and are non-standard in terms of future movement to other CSS-in-JS systems. CSS Modules (via astroturf), however, would introduce minimal, standardized modifications and would defer sweeping changes for later discussion. When modularization, better style encapsulation, and minimizing overhaul are looked at as criteria, CSS Modules becomes a more realistic choice.