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) {
  background-color: var(--bg);
}
 
@support not (--var: 0) {
  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')
  ]
}