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.