70 %

Toast is in Beta!Learn more →

Chris Biscardi

A CSS-in-JS of my own

If you include CSS Modules, I've been using some form of CSS-in-JS since 2014 (and uh, to state the obvious, have been using CSS for far longer). At one point I got really heavy into using PostCSS to emulate new CSS features and do other interesting things (autoprefixer is built on PostCSS, for example).

So my path went something like

Where I'm at now

theme-ui is a great project. It should be used by most people looking for the most advanced, widely used css-in-js solution that integrates with systems/tokens/themes/etc. It doesn't quite do what I want it to do though. For one, if you use it in multiple projects the tokens will collide, for example with gatsby-plugin-theme-ui. This is why I built isolated-theme-ui.

A theme-ui pragma implementation that allows bootstrapping the provider context so that the tokens can be isolated from other libraries. Everything else is the same so theme-ui is a peerDep.

This is ok. I was hoping to get it to a point at which it could be merged into theme-ui itself but I think that the theme-ui project has different goals and I have too many opinions, so rather than pushing it at theme-ui I'm going off into a corner to see if I can straighten out my thoughts and come back with a prototype.

What is it

tldr; I think we can put styled-system in a stylis plugin, which emotion then lets us bootstrap with an emotion instance. This theoretically enables us to use all of the emotion syntax including strings, objects, etc. Whereas theme-ui only allows the use of objects. We might be able to get rid of the custom pragma, or at least reduce it to being something more lightweight on top of the emotion pragma.