Stylis underpins most css-in-js solutions these days. It's effectively a lightweight (coming in at 3kb) CSS Preprocessor similar to something like PostCSS/Less/Sass/etc except meant to be run in the browser so it's not written in C or anything and it's small.
For us, it's important that Stylis underpins Emotion's implementation and that Emotion exposes that to us. This allows us to do things like... idk... integrate styled-system at the stylis plugin level on individual CSS rulesets.
Applying plugins with stylis looks like this.
This makes plugins effectively middleware with the following signature.
(context, content, selectors, parent, line, column, length)
context argument includes the stage, identified as a number.
-2 /* post-process context */-1 /* preparation context */0 /* newline context */1 /* property context */2 /* selector block context */3 /* @at-rule block context */
We care about stage 1, which allows us to plug into properties like
color: red; to look up the values via a theme context.