Vanilla-Extract forall

Oh, nothing, Tommy. It's tiptop. It's just I'm not sure about the colour.

-- Turkish, Snatch

CSS-in-JS

For many years, we have been using tools like Sass, PostCSS, Less and others as preprocessors to create styles in a more reusable and scalable way. These amazing tools gave us great powers and abilities to create design systems to be used and re-used across multiple applications.

For the times they are a-changin'

CSS-in-JS is a way of writing our styles in JavaScript and similar to the CSS preprocessors it gave us amazing abilities to create reusable styles, in this case, using the same language and "next-to" the elements the styles apply. This approach gain big traction and popularity with the rise of "modern frameworks" like React.js, Vue.js and others.

const MyButton = styled.p`
  color: pink;
  padding: 10px;
`;

<MyButton>My button is pink!</MyButton>

We usually say that "with great power comes technical dept" and with CSS-in-JS came larger bundles of JavaScript that have to execute styles at runtime.

Sprinkles & Recipes

Vanilla-extract also allows us to build CSS frameworks on top of it, some examples would be sprinkles and recipes.

With createSprinkles we can create a set of atomic properties to be consumed by any client application, for example:

export const sprinkles = createSprinkles(defineProperties({
    defaultCondition: 'small',
    conditions: {
        small: {},
        large: {'@media': '(min-width: 800px)'}
    },
    properties: {
        color: themeVars.color,
        backgroundColor: themeVars.background,
        display: ['flex', 'grid'],
        alignItems: ['center'],
        paddingTop: themeVars.space,
        paddingBottom: themeVars.space,
        paddingLeft: themeVars.space,
        paddingRight: themeVars.space,
    },
    shorthands: {
        padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']
    }
}))

Creates a sprinkles function that then can be used to apply a limited amount of properties to an element:

<div class={sprinkles({display: {small: 'flex', large: 'grid'}})}>
    Example goes here.
</div>   

We can also use the sprinkle utility together with recipe.

Recipe allows us to create a multi-variant utility function and use it to create specific variants for our elements:

export const box = recipe({
    base: sprinkles({
        paddingTop: 'large',
        color: 'primary',
        backgroundColor: 'primary'
    }),
    variants: {
        border: {
            some: sprinkles({border: 'some', borderRadius: 'some'}),
            none: sprinkles({border: 'none'})
        }
    }
})

And then we can use it as:

<div class={box({border: 'some'})}>
    Example goes here.
</div>   

Use it without a framework

After we build a couple of themes, sprinkles and recipes, it comes the time to implement a small UI.

We first go with just HTML and build a very small example just like:

const body = document.querySelector<HTMLDivElement>('body')!
body.className = baseTheme

const app = document.createElement('div')

app.innerText = 'Example'
app.className = box({type: 'center', border: 'some'})

body.appendChild(app)

To implement this example we just need a build tool to integrate with vanilla-extract, we can use @vanilla-extract/vite-plugin for example.

Use it with any framework

We can also use vanilla-extract with any other framework (React, Vue, Svelte, etc), we just need to make sure to configure the build tool so we can use vanilla-extract.

An example with Svelte would be:

<script lang="ts">
    import {box, text, themeSvelte} from 'vanilla'
</script>

<main class={`${themeSvelte} ${box({type: 'center', border: 'some'})}`}>
    <h2 class={text({type: 'brand'})}>Svelte</h2>
</main>

Just like CSS

Being able to create a design system with multiple themes, utilities and variants that can be used across multiple clients without the overhead of being dependent to a specific UI framework, feels like we're just writing CSS.

Plus, we get all the advantages of using TypeScript to make sure all out properties and values are validated at build time.