8.0.1

.rollup.js

@@ -3,8 +3,8 @@ import babel from 'rollup-plugin-babel';
 export default {
 	input: 'index.js',
 	output: [
-		{ file: 'index.cjs.js', format: 'cjs' },
-		{ file: 'index.es.mjs', format: 'es' }
+		{ file: 'index.cjs.js', format: 'cjs', sourcemap: true },
+		{ file: 'index.es.mjs', format: 'es', sourcemap: true }
 	],
 	plugins: [
 		babel({

.tape.js

@@ -14,7 +14,7 @@ module.exports = {
 			options: {
 				importFrom: {
 					customProperties: {
-						'--color': 'red',
+						'--color': 'rgb(255, 0, 0)',
 						'--color-2': 'yellow',
 						'--ref-color': 'var(--color)'
 					}
@@ -27,7 +27,7 @@ module.exports = {
 				importFrom() {
 					return {
 						customProperties: {
-							'--color': 'red',
+							'--color': 'rgb(255, 0, 0)',
 							'--color-2': 'yellow',
 							'--ref-color': 'var(--color)'
 						}
@@ -44,7 +44,7 @@ module.exports = {
 					return new Promise(resolve => {
 						resolve({
 							customProperties: {
-								'--color': 'red',
+								'--color': 'rgb(255, 0, 0)',
 								'--color-2': 'yellow',
 								'--ref-color': 'var(--color)'
 							}
@@ -105,7 +105,7 @@ module.exports = {
 			expect: 'basic.expect.css',
 			result: 'basic.result.css',
 			after() {
-				if (__exportPropertiesObject.customProperties['--color'] !== 'red') {
+				if (__exportPropertiesObject.customProperties['--color'] !== 'rgb(255, 0, 0)') {
 					throw new Error('The exportTo function failed');
 				}
 			}
@@ -114,7 +114,7 @@ module.exports = {
 			message: 'supports { exportTo() } usage',
 			options: {
 				exportTo(customProperties) {
-					if (customProperties['--color'] !== 'red') {
+					if (customProperties['--color'] !== 'rgb(255, 0, 0)') {
 						throw new Error('The exportTo function failed');
 					}
 				}
@@ -127,7 +127,7 @@ module.exports = {
 			options: {
 				exportTo(customProperties) {
 					return new Promise((resolve, reject) => {
-						if (customProperties['--color'] !== 'red') {
+						if (customProperties['--color'] !== 'rgb(255, 0, 0)') {
 							reject('The exportTo function failed');
 						} else {
 							resolve();

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Custom Properties
 
+### 8.0.1 (September 17, 2018)
+
+- Fixed: Workaround issue in `postcss-values-parser` incorrectly cloning nodes.
+
 ### 8.0.0 (September 16, 2018)
 
 - Added: New `exportTo` function to specify where to export custom properties to.

README.md

@@ -123,9 +123,9 @@ will need to namespace Custom Properties using the `customProperties` or
 ```js
 postcssCustomProperties({
   importFrom: [
-    'path/to/file.css',
-    'and/then/this.js',
-    'and/then/that.json',
+    'path/to/file.css',   // :root { --color: red; }
+    'and/then/this.js',   // module.exports = { customProperties: { '--color': 'red' } }
+    'and/then/that.json', // { "custom-properties": { "--color": "red" } }
     {
       customProperties: { '--color': 'red' }
     },
@@ -138,6 +138,9 @@ postcssCustomProperties({
 });
 ```
 
+See example imports written in [CSS](test/import-properties.css),
+[JS](test/import-properties.js), and [JSON](test/import-properties.json).
+
 ### exportTo
 
 The `exportTo` option specifies destinations where Custom Properties can be exported
@@ -172,6 +175,10 @@ postcssCustomProperties({
 });
 ```
 
+See example exports written to [CSS](test/export-properties.css),
+[JS](test/export-properties.js), [MJS](test/export-properties.mjs), and
+[JSON](test/export-properties.json).
+
 [cli-img]: https://img.shields.io/travis/postcss/postcss-custom-properties.svg
 [cli-url]: https://travis-ci.org/postcss/postcss-custom-properties
 [css-img]: https://cssdb.org/badge/custom-properties.svg

lib/transform-value-ast.js

@@ -9,7 +9,7 @@ export default function transformValueAST(root, customProperties) {
 				if (name in customProperties) {
 					// conditionally replace a known custom property
 					child.replaceWith(
-						...asClonedArray(customProperties[name])
+						...asClonedArray(customProperties[name], null)
 					);
 
 					const nextCustomProperties = Object.assign({}, customProperties);
@@ -47,4 +47,21 @@ const varRegExp = /^var$/i;
 const isVarFunction = node => node.type === 'func' && varRegExp.test(node.value) && Object(node.nodes).length > 0;
 
 // return an array with its nodes cloned
-const asClonedArray = array => array.map(node => node.clone());
+const asClonedArray = (array, parent) => array.map(node => asClonedNode(node, parent));
+
+// return a cloned node
+const asClonedNode = (node, parent) => {
+	const cloneNode = new node.constructor(node);
+
+	for (const key in node) {
+		if (key === 'parent') {
+			cloneNode.parent = parent;
+		} else if (Object(node[key]).constructor === Array) {
+			cloneNode[key] = asClonedArray(node.nodes, cloneNode);
+		} else if (Object(node[key]).constructor === Object) {
+			cloneNode[key] = Object.assign({}, node[key]);
+		}
+	}
+
+	return cloneNode;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-properties",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "Use Custom Properties Queries in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "contributors": [
@@ -14,7 +14,9 @@
   "module": "index.es.mjs",
   "files": [
     "index.cjs.js",
-    "index.es.mjs"
+    "index.cjs.js.map",
+    "index.es.mjs",
+    "index.es.mjs.map"
   ],
   "scripts": {
     "prepublishOnly": "npm test",

test/basic.css

@@ -3,7 +3,7 @@ html {
 }
 
 :root {
-	--color: red;
+	--color: rgb(255, 0, 0);
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);

test/basic.expect.css

@@ -3,15 +3,15 @@ html {
 }
 
 :root {
-	--color: red;
+	--color: rgb(255, 0, 0);
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
 }
 
 .test {
 	--skip: gray;
-	color: red;
+	color: rgb(255, 0, 0);
 	color: var(--color);
 }
 
@@ -21,7 +21,7 @@ html {
 }
 
 .test--color_w_var {
-	color: red;
+	color: rgb(255, 0, 0);
 	color: var(--ref-color);
 }
 

test/basic.import.expect.css

@@ -3,15 +3,15 @@ html {
 }
 
 :root {
-	--color: red;
+	--color: rgb(255, 0, 0);
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
 }
 
 .test {
 	--skip: gray;
-	color: red;
+	color: rgb(255, 0, 0);
 	color: var(--color);
 }
 
@@ -21,7 +21,7 @@ html {
 }
 
 .test--color_w_var {
-	color: red;
+	color: rgb(255, 0, 0);
 	color: var(--ref-color);
 }
 

test/basic.preserve.expect.css

@@ -1,14 +1,14 @@
 .test {
 	--skip: gray;
-	color: red;
+	color: rgb(255, 0, 0);
 }
 
 .test--fallback {
 	color: blue;
 }
 
 .test--color_w_var {
-	color: red;
+	color: rgb(255, 0, 0);
 }
 
 .test--circular_var {

test/export-properties.css

@@ -1,6 +1,6 @@
 :root {
 	--ref-color: var(--color);
-	--color: red;
+	--color: rgb(255, 0, 0);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
 }

test/export-properties.js

@@ -1,7 +1,7 @@
 module.exports = {
 	customProperties: {
 		'--ref-color': 'var(--color)',
-		'--color': 'red',
+		'--color': 'rgb(255, 0, 0)',
 		'--circular': 'var(--circular-2)',
 		'--circular-2': 'var(--circular)'
 	}

test/export-properties.json

@@ -1,7 +1,7 @@
 {
   "custom-properties": {
     "--ref-color": "var(--color)",
-    "--color": "red",
+    "--color": "rgb(255, 0, 0)",
     "--circular": "var(--circular-2)",
     "--circular-2": "var(--circular)"
   }

test/export-properties.mjs

@@ -1,6 +1,6 @@
 export const customProperties = {
 	'--ref-color': 'var(--color)',
-	'--color': 'red',
+	'--color': 'rgb(255, 0, 0)',
 	'--circular': 'var(--circular-2)',
 	'--circular-2': 'var(--circular)'
 };

test/import-properties.css

@@ -1,5 +1,5 @@
 :root {
-	--color: red;
+	--color: rgb(255, 0, 0);
 	--color-2: yellow;
 	--ref-color: var(--color);
 }

test/import-properties.js

@@ -1,6 +1,6 @@
 module.exports = {
 	customProperties: {
-		'--color': 'red',
+		'--color': 'rgb(255, 0, 0)',
 		'--color-2': 'yellow',
 		'--ref-color': 'var(--color)'
 	}

test/import-properties.json

@@ -1,6 +1,6 @@
 {
   "custom-properties": {
-    "--color": "red",
+    "--color": "rgb(255, 0, 0)",
     "--color-2": "yellow",
     "--ref-color": "var(--color)"
   }