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

• vjeux gives a "React: CSS in JS" talk that kicks off a few years of community work
• CSS Modules makes isolation first-class thanks to Sokra, Mark, and Glen
• Glamor introduces the css prop thanks to https://twitter.com/threepointone
• Glam briefly pops up, Glamor decides to not pursue v3 and goes stable with v2 forever
• Glam becomes Emotion thanks to https://twitter.com/kyehohenberger
• Emotion ships v10 thanks to https://twitter.com/mitchellhamiltn
• Me and Johno start writing tons of pragmas as part of our work on MDX and Gatsby Themes
• Brent Jackson creates theme-ui with the sx prop combining styled-system and Emotion using a pragma

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.