PostCSS Conditional Values

PostCSS Conditional Values lets you easily apply space toggle hacks with some syntactic sugar.

This plugin adds a non-standard function : csstools-if( else ) which acts as a ternary operator.

csstools-if(--a-variable <value-when-true> else <value-when-false>)

You control the outcome by setting --a-variable to true and false.

.fancy-container {
    --is-fancy: true;
}

.block {
    color: csstools-if(--is-fancy pink else red);
}

/* becomes */

:root {
    --is-fancy:  ;
}

.fancy-container {
    --is-fancy: initial;
}

.block {
    --is-fancy--0: var(--is-fancy) red;
    color: var(--is-fancy--0,pink);
}

For more information on how the trick works, you can read more on these articles:

• The CSS Custom Property Toggle Trick
• The -​-var: ; hack to toggle multiple values with one custom property

Usage

Add PostCSS Conditional Values to your project:

npm install postcss @csstools/postcss-conditional-values --save-dev

Use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssConditionalValues = require('@csstools/postcss-conditional-values');

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

PostCSS Conditional Values runs in all Node environments, with special instructions for:

• Node
• PostCSS CLI
• PostCSS Load Config
• Webpack
• Next.js
• Gulp
• Grunt

Options

functionName

The functionName option allows you to set a custom alias for csstools-if.

postcssConditionalValues({ functionName: 'if' })

.fancy-container {
    --is-fancy: true;
}

.block {
    color: if(--is-fancy pink else red);
}

/* becomes */

:root {
    --is-fancy:  ;
}

.fancy-container {
    --is-fancy: initial;
}

.block {
    --is-fancy--0: var(--is-fancy) red;
    color: var(--is-fancy--0,pink);
}

Syntax

csstools-if else function

The csstools-if else function is used to declare which values must be used when a condition is true or false.

color: csstools-if(--a-condition yellow else red);

csstools-if(<custom-property-name> <declaration-value> else <declaration-value>);

true and false keywords

The true and false keywords are syntactic sugar for initial and <space>.

--a-condition: true;

/* becomes */

--a-condition: initial;

--a-condition: false;

/* becomes */

--a-condition:  ;

You can manually toggle the condition with initial and <space>. This makes it possible to control the outcome of conditions with javascript, inline styles, ...