[] 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.

<example.css>

/* becomes */

<example.expect.css>

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

Options

functionName

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

<exportName>({ functionName: 'if' })

<example-custom-function-name.css>

/* becomes */

<example-custom-function-name.expect.css>

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>);

Stylelint

Stylelint is able to check for unknown property values. Setting the correct configuration for this rule makes it possible to check even non-standard syntax.

	// Disallow unknown values for properties within declarations.
	'declaration-property-value-no-unknown': [
		true,
		{
			propertiesSyntax: {
				color: '| csstools-if( <custom-property-name> <\'color\'> else <\'color\'> )',
				'background-color': '| csstools-if( <custom-property-name> <\'background-color\'> else <\'background-color\'> )',
				// ... more properties ...
			},
		},
	],

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, ...