caryfuk / vite-vanilla-extract-react

This is just to test and showcase vanila-extract

vanilla-extract

vanilla-extract is a library for writing CSS in JavaScript. It is designed to be used with React, but can be used with any JavaScript framework or without one.

Vanilla-extract was co-created by Mark Dalgleish who is also the creator of css modules. In fact, it's a bit like css modules, but much more capable and with typescript as a preprocessor. Instead of writing css, you use typescript, which makes it look a bit like yet another css in js library, but without the runtime cost of one.

Setup with Vite

npm create vite@latest vite-vanilla-extract-react -- --template react-ts
cd vite-vanilla-extract-react
npm i --save-dev @vanilla-extract/vite-plugin
npm i @vanilla-extract/css @vanilla-extract/sprinkles @vanilla-extract/dynamic @vanilla-extract/recipes clsx

And then, just edit vite.config.ts to use the plugin:

import { defineConfig } from 'vite'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vanillaExtractPlugin(), react()]
})

Random thoughts

• With its sprinkles, it's also a bit like tailwind, but your own tailwind that lets you define your own utility classes.
• Recipes make it a bit like Stitches, but with a different syntax.
• Clean boundary between runtime and build time - all that is in css.ts is build time. But you can still call css functions from runtime code.

💅 Theming

• No need to pass theme via context (theme provider) because it depends on css variables.
• Unlike css variables, we can use nested objects. This is useful for defining a theme.

👀 Comparison with our latest favorite - Stitches

• Similarly to Stitches, you can easily define variants
• No predefined opinionated mappings to theme object using template literals. Instead, you define your own theme object and use it directly.
• Nice autocomplete for everything, thanks to typescript and CSSType.

📚 Resources

• Mark Dalgleish - CSS in JS: The future of styling
• React Finland: Mark Dalgleish – Zero-runtime CSS-in-TypeScript with vanilla-extract
• setup with create react app
• Theming a React Application with Vanilla Extract
• The unseen performance costs of modern CSS-in-JS libraries in React apps