Authoring Stylis Plugins

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.

Plugin Stages

Applying plugins with stylis looks like this.

stylis.use(plugin: {Function|Array<Function>|null})

This makes plugins effectively middleware with the following signature.

(context, content, selectors, parent, line, column, length)

The 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.