8.0.9

Author: jonathantneal

plugins/postcss-custom-properties/.rollup.js

@@ -4,15 +4,15 @@ export default {
 	input: 'index.js',
 	output: [
 		{ file: 'index.cjs.js', format: 'cjs', sourcemap: true },
-		{ file: 'index.es.mjs', format: 'es', sourcemap: true }
+		{ file: 'index.esm.mjs', format: 'esm', sourcemap: true }
 	],
 	plugins: [
 		babel({
 			plugins: [
 				'@babel/plugin-syntax-dynamic-import'
 			],
 			presets: [
-				['@babel/env', { modules: false, targets: { node: 6 } }]
+				['@babel/env', { targets: { node: 6 } }]
 			]
 		})
 	]

plugins/postcss-custom-properties/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Custom Properties
 
+### 8.0.9 (November 5, 2018)
+
+- Fixed: Issue with duplicate custom property usage within a declaration
+
 ### 8.0.8 (October 2, 2018)
 
 - Fixed: Issue with nested fallbacks

plugins/postcss-custom-properties/README.md

@@ -179,7 +179,7 @@ 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-img]: https://img.shields.io/travis/postcss/postcss-custom-properties/master.svg
 [cli-url]: https://travis-ci.org/postcss/postcss-custom-properties
 [css-img]: https://cssdb.org/badge/custom-properties.svg
 [css-url]: https://cssdb.org/#custom-properties

plugins/postcss-custom-properties/lib/transform-value-ast.js

@@ -8,9 +8,11 @@ export default function transformValueAST(root, customProperties) {
 
 				if (name in customProperties) {
 					// conditionally replace a known custom property
-					child.replaceWith(...asClonedArrayWithBeforeSpacing(customProperties[name], child.raws.before));
+					const nodes = asClonedArrayWithBeforeSpacing(customProperties[name], child.raws.before);
 
-					retransformValueAST(root, customProperties, name);
+					child.replaceWith(...nodes);
+
+					retransformValueAST({ nodes }, customProperties, name);
 				} else if (fallbacks.length) {
 					// conditionally replace a custom property with a fallback
 					const index = root.nodes.indexOf(child);
@@ -24,7 +26,7 @@ export default function transformValueAST(root, customProperties) {
 			} else {
 				transformValueAST(child, customProperties);
 			}
-		})
+		});
 	}
 
 	return root;

plugins/postcss-custom-properties/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-properties",
-  "version": "8.0.8",
+  "version": "8.0.9",
   "description": "Use Custom Properties Queries in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "contributors": [
@@ -11,12 +11,12 @@
   "homepage": "https://github.com/postcss/postcss-custom-properties#readme",
   "bugs": "https://github.com/postcss/postcss-custom-properties/issues",
   "main": "index.cjs.js",
-  "module": "index.es.mjs",
+  "module": "index.esm.mjs",
   "files": [
     "index.cjs.js",
     "index.cjs.js.map",
-    "index.es.mjs",
-    "index.es.mjs.map"
+    "index.esm.mjs",
+    "index.esm.mjs.map"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
@@ -37,11 +37,11 @@
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.6.1",
+    "eslint": "^5.8.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.66.2",
+    "rollup": "^0.67.0",
     "rollup-plugin-babel": "^4.0.3"
   },
   "eslintConfig": {

plugins/postcss-custom-properties/test/basic.css

@@ -42,3 +42,7 @@ html {
 .text--calc {
 	width: calc((100% - var(--xxx, 1px)) + var(--yyy, 10px));
 }
+
+.test--linear-gradient {
+	background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
+}

plugins/postcss-custom-properties/test/basic.expect.css

@@ -49,3 +49,8 @@ html {
 	width: calc((100% - 1px) + 10px);
 	width: calc((100% - var(--xxx, 1px)) + var(--yyy, 10px));
 }
+
+.test--linear-gradient {
+	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%);
+	background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
+}

plugins/postcss-custom-properties/test/basic.import-is-empty.expect.css

@@ -49,3 +49,8 @@ html {
 	width: calc((100% - 1px) + 10px);
 	width: calc((100% - var(--xxx, 1px)) + var(--yyy, 10px));
 }
+
+.test--linear-gradient {
+	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%);
+	background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
+}

plugins/postcss-custom-properties/test/basic.import.expect.css

@@ -50,3 +50,8 @@ html {
 	width: calc((100% - 1px) + 10px);
 	width: calc((100% - var(--xxx, 1px)) + var(--yyy, 10px));
 }
+
+.test--linear-gradient {
+	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%);
+	background-image: linear-gradient(to right, var(--color, transparent) 0%, var(--color, transparent) 100%);
+}

plugins/postcss-custom-properties/test/basic.preserve.expect.css

@@ -34,3 +34,7 @@
 .text--calc {
 	width: calc((100% - 1px) + 10px);
 }
+
+.test--linear-gradient {
+	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 0, 0) 100%);
+}