UnoCSS Preset CSS Var

A UnoCSS preset that allows you to write CSS variables using classes.

Features

• 🖊️ Write CSS variables without the need of complex selector or style attributes.
• 📦 Easy Integration – Plug-and-play with any UnoCSS project.
• 🏗️ Attributify Mode support

Usage

pnpm i -D unocss-preset-css-var

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetCssVar } from 'unocss-preset-css-var'

export default defineConfig({
  presets: [
    // ...
    presetCssVar(),
  ],
})

Playground

You can open the Unocss Playground

Adding it into your project

If you are like me, you may have already created several style="--my-var:value" in your project.

You can start using this preset to replace all those variables with the following workflow:

1. Open VSCode with your project and open the search sidebar (Ctrl/Command + Shift + F).
2. Activate the regex. Use the .* symbol.
3. Search for style="--(.+)".
4. Replace with var:$1.
5. Click 'Replace all'.

Credits

• unocss
• preset-starter