70 %

Toast is in Beta!Learn more →

Chris Biscardi

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.