RFC: CSS extraction

Main point is to do a pass over their own components + node modules dependencies that are using compiled components and then to extract them to a single, atomic, css sheet.

This would need to be a bundler plugin. Webpack & Parcel.

The idea:

• You have a component library, let’s call it @catlaskit
• You have a product, let’s call it Gira
• Product Gira uses compiled components from @catlaskit
• Product Gira also defines its own compiled components
• We’d write this plugin to parse ALL compiled components (from both @catlaskit and Gira, and really anywhere) so when Gira builds their bundle - it extracts ALL compiled components to a CSS file
• We would want to build it in such a way so if there were cases it would report failures but not fail the build.

Cool right?

[itsdouges]

Hi @cloudkite,

Currently it’s planned to only extract to a single, atomic CSS file, with a critical CSS api available for initial SSR. The need for CSS chunks might not be needed - but it’s something we’re open to evaluate down the track 😄.

[itsdouges]

ah okay

you can keep using the library without CSS extraction 👍 - my advice is if you’re publishing a design system or component library to NPM - don’t extract to CSS yet

in an app that is consuming the design system, or component library, or even just writing their own components - turn on the CSS extraction so you get great performance gains, but still having the same developer experience and behaviour you’re used to when writing CSS-in-JS

it is purely an additive thing however - again completely optional.