PostCSS Progressive Custom Properties

PostCSS Progressive Custom Properties is a utility plugin to correctly declare Custom Property fallbacks and enhancements.

⚠️ It is not intended to be used directly by stylesheet authors. Meant to be included in other PostCSS plugins that provide CSS value transforms as fallbacks.

Custom Properties are not discarded like regular declarations when invalid. This makes it tricky to provide fallback values for older browsers.

The solution is to wrap Custom Property declarations in an @supports rule.

:root {
    /* fallback */
    --a-color: red;
    /* progressive enhancement */
    --a-color: oklch(40% 0.234 0.39 / var(--opacity-50));
}

/* becomes */

:root {
    --a-color: red;
}

@supports (--a-color: oklch(40% 0.234 0.39 / var(--opacity-50))) {
    :root {
        --a-color: oklch(40% 0.234 0.39 / var(--opacity-50));
    }
}

Ignored values

initial and <white space> are ignored.

.initial {
    --prop-1: red;
    --prop-1: initial;
}

.white-space {
    --prop-1: red;
    --prop-1:;

    --prop-2: red;
    --prop-2: ;

    --prop-3: red;
    --prop-3:    ;
}

/* remains */

.initial {
    --prop-1: red;
    --prop-1: initial;
}

.white-space {
    --prop-1: red;
    --prop-1:;

    --prop-2: red;
    --prop-2: ;

    --prop-3: red;
    --prop-3:    ;
}

Usage

Add PostCSS Progressive Custom Properties to your project:

npm install @csstools/postcss-progressive-custom-properties --save-dev

Use PostCSS Progressive Custom Properties as a PostCSS plugin:

const postcss = require('postcss');
const postcssCustomProperties = require('@csstools/postcss-progressive-custom-properties');

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

PostCSS Progressive Custom Properties runs in all Node environments, with special instructions for: