		@@ -0,139 +1,134 @@
		# v0.16.0 - 2020-4-24

		- Add ability to pass callback function to `options.preserve` to determine whether to preserve declaration
		- Thank you to [@ekatioz](https://github.com/ekatioz) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/116)

		# v0.15.0 - 2020-4-24

		- Fix algorithm to find balanced `var()` pairs and nested parenthesis
		- Thank you to [@Poetro](https://github.com/Poetro) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/112)

		# v0.14.0 - 2019-11-24

		- Fix regex in `resolve-value.js` to allow nested CSS functions
		- Thank you to [@juliovedovatto](https://github.com/juliovedovatto) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/97)
		- Fix regex in `resolve-value.js` to allow nested CSS functions
		- Thank you to [@juliovedovatto](https://github.com/juliovedovatto) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/97)

		# v0.13.0 - 2019-6-17

		- Add `options.preserveAtRulesOrder` so media queries are outputted in the order they are defined (as expected)
		- Thank you to [@erikthalen](https://github.com/erikthalen) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/92) via https://github.com/MadLittleMods/postcss-css-variables/pull/101
		- Remove `calc` from readme table of contents for non-existent section
		- Thank you to [@AlexandreArpin](https://github.com/AlexandreArpin) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/99)
		- Add `options.preserveAtRulesOrder` so media queries are outputted in the order they are defined (as expected)
		- Thank you to [@erikthalen](https://github.com/erikthalen) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/92) via https://github.com/MadLittleMods/postcss-css-variables/pull/101
		- Remove `calc` from readme table of contents for non-existent section
		- Thank you to [@AlexandreArpin](https://github.com/AlexandreArpin) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/99)

		# v0.12.0 - 2019-2-21

		- Accept whitespace in `var( --var )` expression
		- Thank you to [@benwest](https://github.com/benwest) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/93)
		- Accept whitespace in `var( --var )` expression
		- Thank you to [@benwest](https://github.com/benwest) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/93)


		# v0.11.0 - 2018-10-9

		- Fix JS-defined variables using `isImportant`, https://github.com/MadLittleMods/postcss-css-variables/pull/87
		- Fix JS-defined variables using `isImportant`, https://github.com/MadLittleMods/postcss-css-variables/pull/87


		# v0.10.0 - 2018-9-25

		- Cast `opts.variables` variable values to string
		- Thank you to [@shonie](https://github.com/shonie) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/84)
		- Cast `opts.variables` variable values to string
		- Thank you to [@shonie](https://github.com/shonie) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/84)


		# v0.9.0 - 2018-6-26

		- Adds `opts.preserveInjectedVariables`, which when set to `false`, removes the `:root { ... }` custom property declarations added via `opts.variables`
		- Thank you to [@akdetrick](https://github.com/akdetrick) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/74)
		- Adds `opts.preserveInjectedVariables`, which when set to `false`, removes the `:root { ... }` custom property declarations added via `opts.variables`
		- Thank you to [@akdetrick](https://github.com/akdetrick) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/74)


		# v0.8.1 - 2018-3-21

		- Log `undefined` variables (available in `result.warnings()`)
		- Thank you to [@pixeldrew](https://github.com/pixeldrew) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/69)
		- Log `undefined` variables (available in `result.warnings()`)
		- Thank you to [@pixeldrew](https://github.com/pixeldrew) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/69)


		# v0.8.0 - 2017-8-8

		- Remove PostCSS `moveTo`/`append` deprecation warnings, [#50](https://github.com/MadLittleMods/postcss-css-variables/issues/50)
		- Thank you to [@modosc](https://github.com/modosc) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/56)
		- Remove PostCSS `moveTo`/`append` deprecation warnings, [#50](https://github.com/MadLittleMods/postcss-css-variables/issues/50)
		- Thank you to [@modosc](https://github.com/modosc) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/56)


		# v0.7.0 - 2017-3-12

		- Resolve `var` usage in fallbacks, [#37](https://github.com/MadLittleMods/postcss-css-variables/issues/37)
		- Thank you to [@asvny](https://github.com/asvny) and [@marklu](https://github.com/marklu) for the contribution, [#39](https://github.com/MadLittleMods/postcss-css-variables/issues/39) -> [#49](https://github.com/MadLittleMods/postcss-css-variables/pull/49)
		- Resolve `var` usage in fallbacks, [#37](https://github.com/MadLittleMods/postcss-css-variables/issues/37)
		- Thank you to [@asvny](https://github.com/asvny) and [@marklu](https://github.com/marklu) for the contribution, [#39](https://github.com/MadLittleMods/postcss-css-variables/issues/39) -> [#49](https://github.com/MadLittleMods/postcss-css-variables/pull/49)


		# v0.6.0 - 2016-9-23

		- Update/refactor readme
		- Thank you to [@isiahmeadows](github.com/isiahmeadows) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/36)
		- Use string value for `undefined` variables to play nice with other plugins downstream
		- Thank you to [@vincentorback](github.com/vincentorback) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/44)
		- Update/refactor readme
		- Thank you to [@isiahmeadows](github.com/isiahmeadows) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/36)
		- Use string value for `undefined` variables to play nice with other plugins downstream
		- Thank you to [@vincentorback](github.com/vincentorback) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/44)


		# v0.5.2 - 2016-8-24

		- Fix [#42](https://github.com/MadLittleMods/postcss-css-variables/issues/42) where `opts.preserve` was not working inside at-rules
		- Thank you to [@muftiev](github.com/muftiev) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/43)
		- Fix [#42](https://github.com/MadLittleMods/postcss-css-variables/issues/42) where `opts.preserve` was not working inside at-rules
		- Thank you to [@muftiev](github.com/muftiev) for the [contribution](https://github.com/MadLittleMods/postcss-css-variables/pull/43)


		# v0.5.1 - 2015-10-24

		- Fix [postcss/postcss#611](https://github.com/postcss/postcss/issues/611) where we were trying to remove the root node on clean up
		- Improved test setup
		- Fix [postcss/postcss#611](https://github.com/postcss/postcss/issues/611) where we were trying to remove the root node on clean up
		- Improved test setup

		# v0.5.0 - 2015-9-12

		- Upgrade to PostCSS v5. Fix [#20](https://github.com/MadLittleMods/postcss-css-variables/issues/20)
		- Upgrade to PostCSS v5. Fix [#20](https://github.com/MadLittleMods/postcss-css-variables/issues/20)

		# v0.4.0 - 2015-7-2

		- Fix [#15](https://github.com/MadLittleMods/postcss-css-variables/issues/15)
		- Remove slowness from cloning the `root` with `node.clone().removeAll()`. Now using `./lib/shallow-clone-node.js` to avoid cloning children which will get removed right after.
		- Thank you to [@ddprrt](https://github.com/ddprrt) for bringing up the slowness issue in this article, [PostCSS misconceptions](https://medium.com/@ddprrt/postcss-misconceptions-faf5dc5038df).
		- Fix [#15](https://github.com/MadLittleMods/postcss-css-variables/issues/15) - Remove slowness from cloning the `root` with `node.clone().removeAll()`. Now using `./lib/shallow-clone-node.js` to avoid cloning children which will get removed right after. - Thank you to [@ddprrt](https://github.com/ddprrt) for bringing up the slowness issue in this article, [PostCSS misconceptions](https://medium.com/@ddprrt/postcss-misconceptions-faf5dc5038df).



		# v0.3.9 - 2015-6-29

		- Remove `opts` global leak. Fix [#13](https://github.com/MadLittleMods/postcss-css-variables/issues/13)
		- Remove `opts` global leak. Fix [#13](https://github.com/MadLittleMods/postcss-css-variables/issues/13)


		# v0.3.8 - 2015-5-28

		- Add support for pseudo selectors `:hover` `:before`
		- Add support for pseudo selectors `:hover` `:before`

		# v0.3.7 - 2015-5-27

		- Fix [#7](https://github.com/MadLittleMods/postcss-css-variables/issues/7): Support for child combinator
		- Added tests for child-combinator/direct-descendant coverage
		- Fix [#7](https://github.com/MadLittleMods/postcss-css-variables/issues/7): Support for child combinator
		- Added tests for child-combinator/direct-descendant coverage

		# v0.3.6 - 2015-5-21

		- Fix [#6](https://github.com/MadLittleMods/postcss-css-variables/issues/6). Variable usage in comma separated selector to use proper scope
		- Fix [#6](https://github.com/MadLittleMods/postcss-css-variables/issues/6). Variable usage in comma separated selector to use proper scope

		# v0.3.5 - 2015-5-12

		- Big refactor of code to reduce cyclomatic complexity. Still needs work though.
		- Fix variable referencing another variable resolution when being changed by at-rule in non-root rule
		- Big refactor of code to reduce cyclomatic complexity. Still needs work though.
		- Fix variable referencing another variable resolution when being changed by at-rule in non-root rule

		# v0.3.4 - 2015-5-12

		- Fix variable referencing another variable resolution when being changed by at-rule
		- Fix variable referencing another variable resolution when being changed by at-rule

		# v0.3.3 - 2015-5-11

		- Add support for last piece of combinator chain in selector resolution matching.
		- `.foo + .bar` can match variables declared in `.bar`
		- Add support for last piece of combinator chain in selector resolution matching. - `.foo + .bar` can match variables declared in `.bar`

		# v0.3.1 - 2015-5-5

		- Large overhaul of code to make it more robust on proper scope resolution.
		- Fix [#2]](https://github.com/MadLittleMods/postcss-css-variables/issues/2)
		- Large overhaul of code to make it more robust on proper scope resolution.
		- Fix [#2]](https://github.com/MadLittleMods/postcss-css-variables/issues/2)

		# v0.2.3 - 2015-5-4

		- Add support for CSS4 descendant selector `>>` syntax
		- Add support for CSS4 descendant selector `>>` syntax

		# v0.2.2 - 2015-5-1

		- Automatically prefix any variables defined in `options.variables` with `--` (according to CSS custom property syntax).
		- Automatically prefix any variables defined in `options.variables` with `--` (according to CSS custom property syntax).

		# v0.2.1 - 2015-4-30

		- Added support for descendant selector nesting instead of just physical space nesting
		- Fixed issue with comma separated rules. It was throwing a undefined is not a function error
		- Moved to external scope check `isUnderScope` instead of integrated into `resolveValue`
		- Added test for empty `var()` call. See [test/fixtures/empty-var-func.css](https://github.com/MadLittleMods/postcss-css-variables/blob/master/test/fixtures/empty-var-func.css)
		- Added support for descendant selector nesting instead of just physical space nesting
		- Fixed issue with comma separated rules. It was throwing a undefined is not a function error
		- Moved to external scope check `isUnderScope` instead of integrated into `resolveValue`
		- Added test for empty `var()` call. See [test/fixtures/empty-var-func.css](https://github.com/MadLittleMods/postcss-css-variables/blob/master/test/fixtures/empty-var-func.css)

		# v0.1.0 - 2015-4-29

		- First release
		- First release

index.js

		@@ -186,8 +186,14 @@ // PostCSS CSS Variables (postcss-css-variables)

		let preserveDecl;
		if (typeof opts.preserve === "function") {
		preserveDecl = opts.preserve(decl);
		} else {
		preserveDecl = opts.preserve;
		}
		// Remove the variable declaration because they are pretty much useless after we resolve them
		if(!opts.preserve) {
		if(!preserveDecl) {
		decl.remove();
		}
		// Or we can also just show the computed value used for that variable
		else if(opts.preserve === 'computed') {
		else if(preserveDecl === 'computed') {
		decl.value = valueResults.value;
		@@ -194,0 +200,0 @@ }

lib/resolve-decl.js

		@@ -75,3 +75,3 @@ var resolveValue = require('./resolve-value');
		function resolveDecl(decl, map, /optional/shouldPreserve, /optional/preserveAtRulesOrder, /optional/logResolveValueResult) {
		shouldPreserve = shouldPreserve \|\| false;
		shouldPreserve = (typeof shouldPreserve === "function" ? shouldPreserve(decl) : shouldPreserve) \|\| false;
		preserveAtRulesOrder = preserveAtRulesOrder \|\| false;
		@@ -105,3 +105,9 @@

		if(shouldPreserve === true) {
		let preserveVariable;
		if(typeof shouldPreserve === "function") {
		preserveVariable = shouldPreserve(decl);
		} else {
		preserveVariable = shouldPreserve;
		}
		if(preserveVariable === true) {
		declClone.cloneAfter();
		@@ -108,0 +114,0 @@ }

lib/resolve-value.js

		@@ -17,2 +17,41 @@ var balanced = require('balanced-match');

		// Check for balanced `var(` and `)` pairs inside `value`, and return the 3 fragments:
		// `body` (inside), `pre` (before), `post` (after) of the found wrapper
		function balancedVar(value) {
		var match = balanced('(', ')', value)
		if (match) {
		// Check if it was prepended with var
		if (/(?:^\|[^\w-])var$/.test(match.pre)) {
		// Remove the var from the end of pre
		return {
		pre: match.pre.slice(0, -3),
		body: match.body,
		post: match.post
		}
		} else {
		// Check inside body
		var bodyMatch = balancedVar(match.body)
		if (bodyMatch) {
		// Reconstruct pre and post
		return {
		pre: match.pre + '(' + bodyMatch.pre,
		body: bodyMatch.body,
		post: bodyMatch.post + ')' + match.post
		}
		} else {
		// Check inside post
		var postMatch = balancedVar(match.post)
		if (postMatch) {
		// Reconstruct pre
		return {
		pre: match.pre + '(' + match.body + ')' + postMatch.pre,
		body: postMatch.body,
		post: postMatch.post
		}
		}
		}
		}
		}
		}

		// Pass in a value string to parse/resolve and a map of available values
		@@ -38,3 +77,3 @@ // and we can figure out the final value
		// Use balanced lib to find var() declarations and store variable names
		while ((matchingVarDecl = balanced('var(', ')', remainingVariableValue))) {
		while ((matchingVarDecl = balancedVar(remainingVariableValue))) {
		// Split at the comma to find variable name and fallback value
		@@ -66,3 +105,3 @@ // There may be other commas in the values so this isn't necessarily just 2 pieces
		// See: http://dev.w3.org/csswg/css-variables/#funcdef-var
		while ((matchingVarDecl = balanced('var(', ')', resultantValue))) {
		while ((matchingVarDecl = balancedVar(resultantValue))) {
		var matchingVarDeclMapItem = undefined;
		@@ -69,0 +108,0 @@

package.json

		{
		"name": "postcss-css-variables",
		"version": "0.14.0",
		"version": "0.16.0",
		"description": "PostCSS plugin to transform CSS Custom Properties(CSS variables) syntax into a static representation",
		@@ -5,0 +5,0 @@ "keywords": [

258

README.md

		@@ -15,21 +15,13 @@ # PostCSS CSS Variables

		- [Code Playground](#code-playground)
		- [Usage](#usage)
		- [Syntax](#syntax)
		- [Defining Custom Properties with `--*`](#defining-custom-properties-with---)
		- [Using Variables/Custom Properties with `var()`](#using-variables-custom-properties-with-var)
		- [Features](#features)
		- [At-rules like `@media`, `@support`, etc.](#at-rules-like-media-support-etc)
		- [Pseudo-classes and Elements](#pseudo-classes-and-elements)
		- [Nested Rules](#nested-rules)
		- [Why?](#why)
		- [Interoperability](#interoperability)
		- [Differences from `postcss-custom-properties`](#differences-from-postcss-custom-properties)
		- [Caveats](#caveats)
		- [Options](#options)
		- [Quick Reference/Notes](#quick-referencenotes)
		- [Testing](#testing)
		- [Changelog](https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md)
		- [Code Playground](#code-playground)
		- [Usage](#usage)
		- [Syntax](#syntax) - [Defining Custom Properties with `--*`](#defining-custom-properties-with---) - [Using Variables/Custom Properties with `var()`](#using-variables-custom-properties-with-var)
		- [Features](#features) - [At-rules like `@media`, `@support`, etc.](#at-rules-like-media-support-etc) - [Pseudo-classes and Elements](#pseudo-classes-and-elements) - [Nested Rules](#nested-rules)
		- [Why?](#why) - [Interoperability](#interoperability) - [Differences from `postcss-custom-properties`](#differences-from-postcss-custom-properties)
		- [Caveats](#caveats)
		- [Options](#options)
		- [Quick Reference/Notes](#quick-referencenotes)
		- [Testing](#testing)
		- [Changelog](https://github.com/MadLittleMods/postcss-css-variables/blob/master/CHANGELOG.md)


		# [Code Playground](https://madlittlemods.github.io/postcss-css-variables/playground/)
		@@ -39,21 +31,16 @@


		# Usage

		[For more general PostCSS usage, look here.](https://github.com/postcss/postcss#usage)
		[_For more general PostCSS usage, look here._](https://github.com/postcss/postcss#usage)

		```js
		var postcss = require('postcss');
		var cssvariables = require('postcss-css-variables');
		var postcss = require("postcss");
		var cssvariables = require("postcss-css-variables");

		var fs = require('fs');
		var fs = require("fs");

		var mycss = fs.readFileSync('input.css', 'utf8');
		var mycss = fs.readFileSync("input.css", "utf8");

		// Process your CSS with postcss-css-variables
		var output = postcss([
		cssvariables(/options/)
		])
		.process(mycss)
		.css;
		var output = postcss([cssvariables(/options/)]).process(mycss).css;

		@@ -63,3 +50,2 @@ console.log(output);


		# Syntax
		@@ -71,13 +57,13 @@

		Note: `:root` is nothing more than the selector for the root DOM node. Any other selector like `.class`, `#id`, or even `#foo ~ .bar > span.baz` works.
		_Note: `:root` is nothing more than the selector for the root DOM node. Any other selector like `.class`, `#id`, or even `#foo ~ .bar > span.baz` works._

		```css
		:root {
		--foo-width: 100px;
		--foo-bg-color: rgba(255, 0, 0, 0.85);
		--foo-width: 100px;
		--foo-bg-color: rgba(255, 0, 0, 0.85);
		}

		.foo {
		--foo-width: 100px;
		--foo-bg-color: rgba(255, 0, 0, 0.85);
		--foo-width: 100px;
		--foo-bg-color: rgba(255, 0, 0, 0.85);
		}
		@@ -90,24 +76,23 @@ ```
		:root {
		--some-color: red;
		--some-color: red;
		}

		.foo {
		/* red */
		color: var(--some-color);
		/* red */
		color: var(--some-color);
		}


		.bar {
		--some-color: blue;
		/* blue */
		color: var(--some-color);
		--some-color: blue;
		/* blue */
		color: var(--some-color);
		}

		.bar:hover {
		--some-color: green;
		/* Automatically gets a `color: green;` declaration because we `--some-color` used within scope elsewhere */
		--some-color: green;
		/* Automatically gets a `color: green;` declaration because we `--some-color` used within scope elsewhere */
		}
		```

		[W3C Draft: CSS Custom Properties for Cascading Variables, section 2](http://dev.w3.org/csswg/css-variables/#defining-variables)
		_[W3C Draft: CSS Custom Properties for Cascading Variables, section 2](http://dev.w3.org/csswg/css-variables/#defining-variables)_

		@@ -118,11 +103,10 @@ ### Using Variables/Custom Properties with `var()`
		.foo {
		width: var(--foo-width);
		/* You can even provide a fallback */
		background: var(--foo-bg-color, #ff0000);
		width: var(--foo-width);
		/* You can even provide a fallback */
		background: var(--foo-bg-color, #ff0000);
		}
		```

		[W3C Draft: CSS Custom Properties for Cascading Variables, section 3](http://dev.w3.org/csswg/css-variables/#using-variables)
		_[W3C Draft: CSS Custom Properties for Cascading Variables, section 3](http://dev.w3.org/csswg/css-variables/#using-variables)_


		# Features
		@@ -136,13 +120,13 @@
		:root {
		--width: 100px;
		--width: 100px;
		}

		@media (max-width: 1000px) {
		:root {
		--width: 200px;
		}
		:root {
		--width: 200px;
		}
		}

		.box {
		width: var(--width);
		width: var(--width);
		}
		@@ -155,9 +139,9 @@ ```
		.box {
		width: 100px;
		width: 100px;
		}

		@media (max-width: 1000px) {
		.box {
		width: 200px;
		}
		.box {
		width: 200px;
		}
		}
		@@ -172,8 +156,8 @@ ```
		.foo {
		--foo-color: red;
		color: var(--foo-color);
		--foo-color: red;
		color: var(--foo-color);
		}

		.foo:hover {
		--foo-color: green;
		--foo-color: green;
		}
		@@ -186,7 +170,7 @@ ```
		.foo {
		color: red;
		color: red;
		}

		.foo:hover {
		color: green;
		color: green;
		}
		@@ -199,20 +183,17 @@ ```


		```js
		var postcss = require('postcss');
		var cssvariables = require('postcss-css-variables');
		var nested = require('postcss-nested');
		var postcss = require("postcss");
		var cssvariables = require("postcss-css-variables");
		var nested = require("postcss-nested");

		var fs = require('fs');
		var fs = require("fs");

		var mycss = fs.readFileSync('input.css', 'utf8');
		var mycss = fs.readFileSync("input.css", "utf8");

		var output = postcss([
		// Flatten/unnest rules
		nested,
		// Then process any CSS variables
		cssvariables(/options/)
		])
		.process(mycss)
		.css;
		// Flatten/unnest rules
		nested,
		// Then process any CSS variables
		cssvariables(/options/)
		]).process(mycss).css;

		@@ -226,8 +207,8 @@ console.log(output);
		.box-foo {
		--some-width: 150px;
		width: var(--some-width);
		--some-width: 150px;
		width: var(--some-width);

		.box-bar {
		width: var(--some-width);
		}
		.box-bar {
		width: var(--some-width);
		}
		}
		@@ -240,7 +221,7 @@ ```
		.box-foo {
		width: 150px;
		width: 150px;
		}

		.box-foo .box-bar {
		width: 150px;
		width: 150px;
		}
		@@ -253,17 +234,17 @@ ```
		:root {
		--some-width: 150px;
		--some-width: 150px;
		}

		.box-foo {
		width: var(--some-width);
		width: var(--some-width);

		.box-bar {
		width: var(--some-width);
		}
		.box-bar {
		width: var(--some-width);
		}
		}

		@media (max-width: 800px) {
		.box-foo {
		--some-width: 300px;
		}
		.box-foo {
		--some-width: 300px;
		}
		}
		@@ -276,22 +257,20 @@ ```
		.box-foo {
		width: 150px;
		width: 150px;
		}

		.box-foo .box-bar {
		width: 150px;
		width: 150px;
		}

		@media (max-width: 800px) {
		.box-foo {
		width: 300px;
		}
		.box-foo {
		width: 300px;
		}

		.box-foo .box-bar {
		width: 300px;
		}
		.box-foo .box-bar {
		width: 300px;
		}
		}
		```



		# Why?
		@@ -313,10 +292,9 @@

		- CSS variables may be declared in any selector like `.foo` or `.foo .bar:hover`, and is not limited to just `:root`
		- CSS variables may be declared in `@media`, `@support`, and other at-rules.
		- CSS variables may be declared in `:hover` and other psuedo-classes, which get expanded properly.
		- Variables in nested rules can be deduced with the help of [`postcss-nested`](https://github.com/postcss/postcss-nested) or [`postcss-nesting`](https://github.com/jonathantneal/postcss-nesting).
		- CSS variables may be declared in any selector like `.foo` or `.foo .bar:hover`, and is not limited to just `:root`
		- CSS variables may be declared in `@media`, `@support`, and other at-rules.
		- CSS variables may be declared in `:hover` and other psuedo-classes, which get expanded properly.
		- Variables in nested rules can be deduced with the help of [`postcss-nested`](https://github.com/postcss/postcss-nested) or [`postcss-nesting`](https://github.com/jonathantneal/postcss-nesting).

		Continue to the next section to see where some of these might be unsafe to do. There are reasons behind the ethos of why the other plugin, [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties), is very limited in what it supports, due to differing opinions on what is okay to support.


		# Caveats
		@@ -330,13 +308,13 @@
		<div class="component">
		Black
		Black

		<div class="title">
		Blue
		<div class="title">
		Blue

		<div class="decoration">
		Green
		<div class="decoration">
		Green

		<div class="title">Blue with this plugin, but green per spec</div>
		</div>
		<div class="title">Blue with this plugin, but green per spec</div>
		</div>
		</div>
		</div>
		@@ -360,6 +338,4 @@ ```


		[`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties) avoids this problem entirely by restricting itself to just the `:root` selector. This is because the developers there would prefer to not support a feature instead of something almost-spec-compliant like what `postcss-css-variables` does.


		# Options
		@@ -373,5 +349,6 @@

		- `false`: Removes `--var` declarations and replaces `var()` with their resolved/computed values.
		- `true`: Keeps `var()` declarations in the output and has the computed value as a fallback declaration. Also keeps computed `--var` declarations.
		- `'computed'`: Keeps computed `--var` declarations in the output. Handy to make them available to your JavaScript.
		- `false`: Removes `--var` declarations and replaces `var()` with their resolved/computed values.
		- `true`: Keeps `var()` declarations in the output and has the computed value as a fallback declaration. Also keeps computed `--var` declarations.
		- `'computed'`: Keeps computed `--var` declarations in the output. Handy to make them available to your JavaScript.
		- `(declaration) => boolean\|'computed'` : function/callback to programmatically return whether preserve the respective declaration

		@@ -395,23 +372,21 @@ ### `variables` (default: `{}`)
		```js
		var postcss = require('postcss');
		var cssvariables = require('postcss-css-variables');
		var postcss = require("postcss");
		var cssvariables = require("postcss-css-variables");

		postcss([
		cssvariables({
		variables: {
		'--some-var': '100px',
		'--other-var': {
		value: '#00ff00'
		},
		'--important-var': {
		value: '#ff0000',
		isImportant: true
		}
		}
		})
		])
		.process(css, opts);
		cssvariables({
		variables: {
		"--some-var": "100px",
		"--other-var": {
		value: "#00ff00"
		},
		"--important-var": {
		value: "#ff0000",
		isImportant: true
		}
		}
		})
		]).process(css, opts);
		```


		### `preserveAtRulesOrder` (default: `false`)
		@@ -423,13 +398,8 @@


		# Quick Reference/Notes

		- This plugin was spawned out of a [discussion on the `cssnext` repo](https://github.com/cssnext/cssnext/issues/99).
		- We provide a larger CSS variable feature subset than [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties).
		- Related links and issues:
		- [var declared in media query should pull in properties that use/reference that var on `cssnext/cssnext`](https://github.com/cssnext/cssnext/issues/99)
		- [Investigate support for media-query scoped properties on `postcss/postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties/issues/9)
		- [remove `:root` limitation by injecting rules with new declarations that just contains modified properties. on `postcss/postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties/issues/1)
		- This plugin was spawned out of a [discussion on the `cssnext` repo](https://github.com/cssnext/cssnext/issues/99).
		- We provide a larger CSS variable feature subset than [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties).
		- Related links and issues: - [var declared in media query should pull in properties that use/reference that var _on `cssnext/cssnext`_](https://github.com/cssnext/cssnext/issues/99) - [Investigate support for media-query scoped properties _on `postcss/postcss-custom-properties`_](https://github.com/postcss/postcss-custom-properties/issues/9) - [remove `:root` limitation by injecting rules with new declarations that just contains modified properties. _on `postcss/postcss-custom-properties`_](https://github.com/postcss/postcss-custom-properties/issues/1)


		# Testing
		@@ -436,0 +406,0 @@

postcss-css-variables - npm Package Compare versions

Improved metrics

Worsened metrics