Preserve spaces in multi-part values.

This commit fixes the bug with space separated values. Previously, `0 10px 20px 30px` would be exported with commas: `0,10px,20px,30px`. This commit preverses spaces, to export `0 10px 20px 30px` as expected.
postcss · Jan 7, 2020 · 44dfb33 · 44dfb33
1 parent 1e1ef6b
commit 44dfb33
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 4 deletions.
diff --git a/.tape.js b/.tape.js
@@ -16,6 +16,7 @@ module.exports = {
 					'--color': 'rgb(255, 0, 0)',
 					'--color-2': 'yellow',
 					'--ref-color': 'var(--color)',
+					'--margin': '0 10px 20px 30px',
 					'--z-index': 10
 				}
 			}
@@ -30,6 +31,7 @@ module.exports = {
 						'--color': 'rgb(255, 0, 0)',
 						'--color-2': 'yellow',
 						'--ref-color': 'var(--color)',
+						'--margin': '0 10px 20px 30px',
 						'--z-index': 10
 					}
 				};

diff --git a/src/lib/write-custom-properties-to-exports.js b/src/lib/write-custom-properties-to-exports.js
@@ -110,7 +110,10 @@ export default function writeCustomPropertiesToExports(customProperties, destina
 
 const defaultCustomPropertiesToJSON = customProperties => {
 	return Object.keys(customProperties).reduce((customPropertiesJSON, key) => {
-		customPropertiesJSON[key] = String(customProperties[key]);
+		const valueNodes = customProperties[key];
+		customPropertiesJSON[key] = valueNodes.map((propertyObject) => {
+			return propertyObject.toString();
+		}).join(' ');
 
 		return customPropertiesJSON;
 	}, {});

diff --git a/test/basic.css b/test/basic.css
@@ -7,6 +7,7 @@ html {
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
+	--margin: 0 10px 20px 30px;
 	color: var(--color);
 }
 

diff --git a/test/basic.expect.css b/test/basic.expect.css
@@ -7,6 +7,7 @@ html {
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
+	--margin: 0 10px 20px 30px;
 	color: rgb(255, 0, 0);
 	color: var(--color);
 }

diff --git a/test/basic.import-is-empty.expect.css b/test/basic.import-is-empty.expect.css
@@ -7,6 +7,7 @@ html {
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
+	--margin: 0 10px 20px 30px;
 	color: rgb(255, 0, 0);
 	color: var(--color);
 }

diff --git a/test/basic.import.expect.css b/test/basic.import.expect.css
@@ -7,6 +7,7 @@ html {
 	--ref-color: var(--color);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
+	--margin: 0 10px 20px 30px;
 	color: rgb(255, 0, 0);
 	color: var(--color);
 }

diff --git a/test/export-properties.css b/test/export-properties.css
@@ -3,4 +3,5 @@
 	--color: rgb(255, 0, 0);
 	--circular: var(--circular-2);
 	--circular-2: var(--circular);
+	--margin: 0 10px 20px 30px;
 }
diff --git a/test/export-properties.js b/test/export-properties.js
@@ -3,6 +3,7 @@ module.exports = {
 		'--ref-color': 'var(--color)',
 		'--color': 'rgb(255, 0, 0)',
 		'--circular': 'var(--circular-2)',
-		'--circular-2': 'var(--circular)'
+		'--circular-2': 'var(--circular)',
+		'--margin': '0 10px 20px 30px'
 	}
 };
diff --git a/test/export-properties.json b/test/export-properties.json
@@ -3,6 +3,7 @@
     "--ref-color": "var(--color)",
     "--color": "rgb(255, 0, 0)",
     "--circular": "var(--circular-2)",
-    "--circular-2": "var(--circular)"
+    "--circular-2": "var(--circular)",
+    "--margin": "0 10px 20px 30px"
   }
 }
diff --git a/test/export-properties.mjs b/test/export-properties.mjs
@@ -2,5 +2,6 @@ export const customProperties = {
 	'--ref-color': 'var(--color)',
 	'--color': 'rgb(255, 0, 0)',
 	'--circular': 'var(--circular-2)',
-	'--circular-2': 'var(--circular)'
+	'--circular-2': 'var(--circular)',
+	'--margin': '0 10px 20px 30px'
 };