lightningcss-plugin-css-variables

A LightningCSS plugin that inlines CSS custom properties at build time. Matching variable declarations are removed from the output and all var() references are replaced with their values.

Installation

npm install lightningcss-plugin-css-variables lightningcss

Usage

import { transform } from 'lightningcss'
import cssVariables from 'lightningcss-plugin-css-variables'

const { code } = transform({
  filename: 'style.css',
  code: Buffer.from(`
    :root {
      --_color: red;
      --_spacing: 4px;
    }

    .button {
      color: var(--_color);
      padding: calc(var(--_spacing) * 2);
    }
  `),
  visitor: cssVariables(),
})

console.log(code.toString())
// .button {
//   color: red;
//   padding: 8px;
// }

By default, all custom properties whose name starts with --_ are inlined. Other variables are left untouched.

Options

include

A RegExp or an array of RegExp patterns to match the custom property names that should be inlined.

cssVariables({
  // Inline variables starting with --my-prefix-
  include: /^--my-prefix-/,
})

cssVariables({
  // Inline variables matching any of the patterns
  include: [/^--_/, /^--internal-/],
})

License

MIT