unocss-custom-properties

Generate CSS custom properties from your Uno CSS theme.

Install

npm i -D unocss-custom-properties
# pnpm add -D unocss-custom-properties

Usage

import { defineConfig } from 'unocss'
import customProperties from 'unocss-custom-properties'

export default defineConfig({
  theme: {
    // ... theme values
  },
  presets: [
    customProperties({
      /* options */
    }),
  ],
})

Options

By default, the custom properties will be generated in the :root selector and added to the Uno CSS default layer.

| name | type | default | description | | ------------ | -------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | writeFile | boolean | false | If the generated CSS should be written to a file | | filePath | string | undefined | The absolute path of the file to write to, if writeFile is set to true | | inject | boolean | true | If the custom properties should be injected to the Uno CSS default layer | | prefix | string | '' | The prefix to use for the custom properties | | generateOnly | string[] | undefined | If specified, only the corresponding theme keys will be generated as custom properties. This should be an Array of keys available in the theme | | theme | 'user' | 'default' | undefined | Used to specify which theme object to use, either the user specified theme or the whole theme (default) including the other presets |

Supported properties

Anything listed in the Uno CSS theme object can generate custom properties as long as theme[property] is a valid record.

⚠️ If the theme is invalid, custom properties will not be generated.

// uno.config.ts

export default defineConfig({
  theme: {
    spacing: {
      1: '0.25rem'
      2: '0.5rem'
    }, // works, this is a valid object
    colors: {
      gray: {
        100: '#f7fafc',
      }
      blue: 'blue'
    }, // works, this is a valid object
    lineHeight: false // will not work, this needs to be a object
  }
})