postcss-supported-variables

PostCSS Supported Variables supports your CSS variables with native CSS support API. It gives you a supported and unsupported scope for each variable you used.

Example

/* input.css */
:root {
  --bg: steelblue;
}

.button {
  display: inline-block;
  padding: 1rem;
  background-color: var(--bg);
}

/* output.css */
:root {
  --bg: steelblue;
}

.button {
  display: inline-block;
  padding: 1rem;
}

@support (--var: 0) {
  .button {
    background-color: var(--bg);
  }
}

@support not (--var: 0) {
  .button {
    background-color: steelblue;
  }
}

Usage

Install PostCSS Supported Variables on your project.

# NPM
npm install postcss-supported-variables --save-dev

# Yarn
yarn add postcss-supported-variables --dev

Use it to process your css

const inputCSS = require("./input.css");
const supportVariables = require("postcss-supported-variables");

supportVariables.process(inputCSS);

Or use it as a PostCSS plugin

const input = require("./input.css");
const postcss = require("postcss");
const supportVariables = require("postcss-supported-variables");

postcss([supportVariables()]).process(input);

Or with config file

// postcss.config.js
module.exports = {
  plugins: [require("postcss-supported-variables")],
};