postcss-custom-properties-fallback

Copy code

:root {
-  --color: red;
}

body {
  color: green;
}

h1 {
  color: red;
  color: var(--color);
}

color: var(--color, red);

Copy code

npm install postcss-custom-properties-fallback --save-dev

Copy code

const postcss = require('postcss');
const postcssCustomPropertiesFallback = require('postcss-custom-properties-fallback');

postcss([postcssCustomPropertiesFallback(/* pluginOptions */)]).process(
  YOUR_CSS /*, processOptions */
);

Copy code

postcssCustomPropertiesFallback({
  importFrom: { customProperties: { '--color': 'red' } },
});

Copy code

h1 {
  color: var(--color);
}

/* becomes */

h1 {
  color: var(--color, red);
}