visitor pattern

Roll Your Own CSS-in-JS Library (5) - Tagged Templates

Wednesday, March 24, 2021

In this post, we will explore a different CSS-in-JS syntax. CSS-in-JS but using CSS syntax End result: Notice that we get to write CSS similar to template strings rather than as objects. This has a few advantages: Our CSS code now looks closer to vanilla CSS. We can sequence CSS properties. We can duplicate CSS properties to support fallback behavior. In practice, 1 is probably the strongest driver for adopting this syntax, as typically there’s no benefit in sequencing CSS properties except for fallback behavior.…

Roll Your Own CSS-in-JS Library (4) - Static Extraction

Monday, March 15, 2021

Static extraction is HARD Firstly, the set-up of static extraction is more complicated - there needs to be a build process, and the static extractor needs to fit into that build process. More importantly, static extraction will require some form of static evaluation. Take the following code for example: 1 2 3 4 5 import getColor from "helpers"; const Block = styled({ color: getColor("block"), }); In order to statically generate the css styles, the extractor needs to look at at least one other file called “helpers”.…