Accept whitespace in var( --var ) expression (#93)

* Accept whitespace in var( --var ) expression
MadLittleMods · Feb 21, 2019 · 500f2fa · 500f2fa
1 parent 62f2c85
commit 500f2fa
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git a/lib/resolve-value.js b/lib/resolve-value.js
@@ -10,7 +10,7 @@ var cloneSpliceParentOntoNodeWhen = require('./clone-splice-parent-onto-node-whe
 // var() = var( <custom-property-name> [, <any-value> ]? )
 // matches `name[, fallback]`, captures "name" and "fallback"
 // See: http://dev.w3.org/csswg/css-variables/#funcdef-var
-var RE_VAR_FUNC = (/var\((--[^,\s]+?)(?:\s*,\s*(.+))?\)/);
+var RE_VAR_FUNC = (/var\(\s*(--[^,\s]+?)(?:\s*,\s*(.+))?\s*\)/);
 
 function toString(value) {
 	return String(value);

diff --git a/test/fixtures/whitespace-in-var-declaration.css b/test/fixtures/whitespace-in-var-declaration.css
@@ -0,0 +1,9 @@
+:root {
+    --foo: 1px;
+}
+
+.bar {
+    width: var( --foo );
+    height: var( --foo);
+    margin-top: var(--foo );
+}
diff --git a/test/fixtures/whitespace-in-var-declaration.expected.css b/test/fixtures/whitespace-in-var-declaration.expected.css
@@ -0,0 +1,5 @@
+.bar {
+    width: 1px;
+    height: 1px;
+    margin-top: 1px;
+}
diff --git a/test/test.js b/test/test.js
@@ -257,6 +257,8 @@ describe('postcss-css-variables', function() {
 		test('should not mangle outer function parentheses', 'nested-inside-other-func');
 	});
 
+	test('should accept whitespace in var() declarations', 'whitespace-in-var-declaration' )
+
 	it('should not parse malformed var() declarations', function() {
 		return expect(testPlugin(
 			'./test/fixtures/malformed-variable-usage.css',