roll-your-own-css-in-js

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”.…

Roll Your Own CSS-in-JS Library (3) - Using CSS Variables

Saturday, March 13, 2021

In this post we will discard our changes in the previous post and switch to a new approach. End result CSS variables CSS variables are also known as CSS Custom Properties. At a very high level: We can set some value on a variable using --variable-name: value. The variable name has to start with --, and the definition has to happen within some selector or as inline styles. We can then read the value of a variable and supply it to some CSS property with the var() function, e.…

Roll Your Own CSS-in-JS Library (2) - Dynamic Styles

Friday, March 12, 2021

In our last post we developed a simple CSS-in-JS library, but it was missing an important feature - supporting dynamic styles. We will patch that in this post. End result Dynamic styles are more useful when we are building components. In this post, we will use React as our component library. Here’s how our library may be used in production: Dynamic class names This is the simplest approach that requires making the smallest change to our little library.…

Roll Your Own CSS-in-JS Library (1) - Introduction

Sunday, March 7, 2021

CSS-in-JS is an idea to tackle various issues with CSS by writing them in JavaScript (or whatever else that can compile to JavaScript, such as TypeScript). Some popular examples include libraries like styled component , emotion and JSS . I originally started this series to document some of my experiments with CSS-in-JS, but it later turned out to be a fun investigation project. In total, this series will cover The basic idea of run-time static CSS-in-JS (this post) The basic idea of run-time dynamic CSS-in-JS Run-time dynamic CSS-in-JS with CSS variables An extremely simplified approach to build-time CSS-in-JS A simple approach to implementing tagged template based CSS-in-JS Please note that this series focus on the high level ideas with a simple demo, so expect to notice a lot of missing features.…