postcss-custom-prop-vars

Write CSS Custom properties using SASS variable syntax. They remain dynamic and have all the strengths of CSS properties, they're just a bit easier to type.

Turns:

$fg: red;
html {
	color: $fg;
}

into:

:root {
	--fg: red;
}
html {
	color: var(--fg);
}

License, donations

AGPL-3.0. If you want to support my work, you can:

Example

see example.js in the repo:

const postcss = require("postcss");
const postcssCustomPropVars = require("./");

let input = `
$error: red;

[data-theme="default"] {
	$bg: black;
	$fg: white;
}

[data-theme="pink"] {
	$bg: #fae3f3;
	$fg: black;
}

html {
	background: $bg;
	color: $fg;
}

.error {
	color: $error;
}
`;

postcss([postcssCustomPropVars]).process(input)
	.then((bundle) => {
		console.log("\n== Input ==");
		console.log(input);
		console.log("\n== Output ==\n");
		console.log(bundle.css);
	});

Input

$error: red;

[data-theme="default"] {
	$bg: black;
	$fg: white;
}

[data-theme="pink"] {
	$bg: #fae3f3;
	$fg: black;
}

html {
	background: $bg;
	color: $fg;
}

.error {
	color: $error;
}

Output

:root {
	--error: red;
}

[data-theme="default"] {
	--bg: black;
	--fg: white;
}

[data-theme="pink"] {
	--bg: #fae3f3;
	--fg: black;
}

html {
	background: var(--bg);
	color: var(--fg);
}

.error {
	color: var(--error);
}

Changelog

v0.0.5 (Auguest 7, 2022)

• fix PostCSS version 8 upgrade

v0.0.4 (August 7, 2022)

• upgrade to PostCSS 8
• allow hyphens in variable names

v0.0.3 (🏳️‍🌈 June 6, 2022)

• correctly add indentation in raws property instead of prop name

v0.0.2 (January 3, 2022)

• bugfix in variable replacement

v0.0.1 (December 25, 2021)

• initial basic implementation