PostCSS short-native-vars

PostCSS short-native-vars lets you ... in CSS.

:root {
	$test-size: 20px;
	$test-2-size: 10px;
	$test-color: #000;
	$test-3: orange;
	--var: 12px;
}

.test {
	$value: 123px;
	width: calc($test-size * 2 * $test-2-size);
	color: $test-color;
	height: $value;
}

.test-2 {
	width: $test-size;
	height: $test-size;
	color: red;
	background-color: $orange;
}
 

/* becomes */
 
:root {
	--test-size: 20px;
	--test-2-size: 10px;
	--test-color: #000;
	--test-3: orange;
	--var: 12px;
}

.test {
	--value: 123px;
	width: calc(var(--test-size) * 2 * var(--test-2-size));
	color: var(--test-color);
	height: var(--value);
}

.test-2 {
	width: var(--test-size);
	height: var(--test-size);
	color: red;
	background-color: var(--orange);
}
 

Usage

Add PostCSS short-native-vars to your project:

npm install postcss-short-native-vars --save-dev

Use PostCSS short-native-vars to process your CSS:

const postcssShortNativeVars = require('postcss-short-native-vars');

postcssShortNativeVars.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssShortNativeVars = require('postcss-short-native-vars');

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

PostCSS short-native-vars runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

...