postcss-theme-fallback

[![NPM Version][npm-img]][npm-url] [![github (ci)][github-ci]][github-ci]

Usage no npm install needed!

<script type="module">
  import postcssThemeFallback from 'https://cdn.skypack.dev/postcss-theme-fallback';
</script>

README

postcss-theme-fallback PostCSS

NPM Version github (ci)

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.