Postcss-custom-prop-vars NPM

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