postcss-theme-fallback

A postcss plugin to adding fallback values for css-variables.

✈️ Install

npm i -DE postcss-theme-fallback

☄️ Usage

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-theme-fallback')({
      // Use variables from object:
      variables: {
        '--var-a': '10px',
        '--var-b': '20px',
      },
      // Or load variables from theme:
      // themeSource: './src/theme/acme.css',
    }),
  ],
}

Options

Name	Description	Default
variables? Record<string, string>	Object with theme variables
themeSource? string	A source path to theme, uses for extract css-variables
silent? boolean	Disable warnings output	false

🌈 Example

/* input.css */
.component {
  width: var(--var-a);
}

/* output.css */
.component {
  width: var(--var-a, 10px);
}

License

Project is MIT licensed.