RFC: Static CSS Extraction

Background:

Given the current API of Chakra UI, we’re looking to transition Chakra to my ideal vision after the stable TypeScript release.

One of the downsides of CSS-in-JS, particularly the styled-system approach is the runtime performance issues. Here’s what I mean:

• You pass some style props to any component
• Chakra UI uses styled-system functions to transform the style props you pass to CSS objects
• Chakra UI uses emotion to convert the CSS object to a class name (using some hashing strategy) and appends a style tag to the head of the browser

This process happens very often during the lifetime of any Chakra component, and performance issues might become noticeable with very fast, frequent updates.

Ideas on how to solve this

• Static CSS Extraction: Figure out how to generate static CSS files based on the style props at build time, so there’s almost zero runtime cost.

• Prefer CSS variables to Context: Because CSS variables work like React context, we can simply switch the current implementation to write theme specs to:root via css variables. Then update styled-system functions.

Ideally, we’d love to leverage existing innovations like Linaria and Otion so we’re going to explore those first.

Ending remarks

Figuring out Static CSS extraction will be the next innovation in CSS-in-JS and will help improve adoption at scale.

I’d love to hear what you think, and if you’re inclined to solve this problem, please comment below let’s collaborate.

Cheers.

[brennj]

Would love this @segunadebayo, think this could be really really beneficial. I haven’t played with it in depth, but there could be something interesting looking into https://github.com/seek-oss/treat, they seem have a good solution in how they use it for their Braid design system.

[b-bot]

I’ve been thinking about what the ideal design system stack would look like. I came across this article by the FB engineering team and it looks like they settled on CSS variables. https://engineering.fb.com/web/facebook-redesign/

The dark mode requirements are an obvious one but they seem to elude that this is going to be the preferred way going forward and considering their investment in React it may be a good idea to look into the reasons for their choices in relation to your vision for Chakra UI.

@segunadebayo Maybe a dumb question but what was the motivation in not using CSS variables from the start as it seems the project this is based on does so by default? (And why it is completely SSR compatible)