embedcss

Write css in js and compile it out into a separate file.

Setup

Esbuild

Add the embedcss plugin to the esbuild config:

import{EmbedCssPlugin}from"embedcss/plugins/esbuild";import{build}from"esbuild";build({plugins: [EmbedCssPlugin({outname: "styles-[hash]",uniqueClasses: true,outdir: path.resolve("dist"),})]})

Vite

Add the embedcss plugin to the vite config:

import{defineConfig}from"vite";import{EmbedCssVitePlugin}from"embedcss/plugins/vite";exportdefaultdefineConfig({plugins: [EmbedCssVitePlugin({outname: "styles-[hash]",uniqueClasses: true,})],});

Usage

CSS in JS can be used like this:

import{css}from"embedcss";conststyles=css` .mybutton {border-radius:6px;background: blue; }`functionButton(){return<buttonclassName={styles.cname}>Click me</button>}