more use-case tests added

test/fixtures/nested-inside-calc-func-with-fallback-var.css

@@ -0,0 +1,16 @@
+:root {
+	--some-width: 150px;
+	--some-other-width: 50px;
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, var(--some-width, 100px))); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, var(--missing2, 100px))); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, var(--missing2, var(--some-other-width)))); 
+}

test/fixtures/nested-inside-calc-func-with-fallback-var.expected.css

@@ -0,0 +1,11 @@
+.box-foo {
+	width: calc(58.3333333333% - 150px); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - 100px); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - 50px); 
+}

test/fixtures/nested-inside-calc-func-with-fallback.css

@@ -0,0 +1,11 @@
+:root {
+	--some-width: 150px;
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--some-width, 100px)); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - var(--missing, 100px)); 
+}

test/fixtures/nested-inside-calc-func-with-fallback.expected.css

@@ -0,0 +1,7 @@
+.box-foo {
+	width: calc(58.3333333333% - 150px); 
+}
+
+.box-foo {
+	width: calc(58.3333333333% - 100px); 
+}

test/fixtures/nested-inside-calc-func.css

@@ -0,0 +1,23 @@
+:root {
+  --some-width: 150px;
+  --some-other-width: 50px;
+}
+
+.box-foo {
+	width: calc(1000% - var(--some-width)); 
+}
+
+.box-foo {
+	width: calc(1000% - var(--missing-width)); 
+}
+
+.box-foo {
+	width: calc(var(--some-width) - var(--some-other-width)); 
+}
+
+.box-foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}

test/fixtures/nested-inside-calc-func.expected.css

@@ -0,0 +1,15 @@
+.box-foo {
+	width: calc(1000% - 150px); 
+}
+
+.box-foo {
+	width: undefined; 
+}
+
+.box-foo {
+	width: calc(150px - 50px); 
+}
+
+.box-foo {
+	width: calc(calc(100px / 2) / 2);
+}

test/fixtures/nested-inside-other-func-with-fallback.css

@@ -0,0 +1,9 @@
+:root {
+	--some-color: red;
+}
+.box-foo {
+	background-color: color(var(--missing, white));
+}
+.box-foo {
+	background-color: color(var(--some-color, white));
+}

test/fixtures/nested-inside-other-func-with-fallback.expected.css

@@ -0,0 +1,6 @@
+.box-foo {
+	background-color: color(white);
+}
+.box-foo {
+	background-color: color(red);
+}

test/fixtures/nested-inside-other-func.css

@@ -1,54 +1,16 @@
 :root {
 	--some-color: red;
-	--some-width: 150px;
-	--some-other-width: 50px;
-	--some-margin: 25px;
-	--some-padding: 20px;
+	--some-opacity: 0.3;
 }
 
 .box-foo {
 	background-color: color(var(--some-color));
 }
 
 .box-foo {
-	background-color: color(var(--missing, white));
+	background-color: rgba(255, 0, 0, var(--some-opacity));
 }
 
 .box-foo {
-	width: calc(58.3333333333% - var(--some-width, 100px)); 
-}
-
-.box-foo {
-	width: calc(58.3333333333% - var(--missing, 100px)); 
-}
-
-.box-foo {
-	width: calc(80vw - var(--missing, var(--some-other-width))); 
-}
-
-.box-foo {
-	width: calc(58.3333333333% - var(--missing, var(--some-width, 100px))); 
-}
-
-.box-foo {
-	width: calc(100vw - var(--missing)); 
-}
-
-.box-foo {
-	width: calc(var(--some-width) - var(--some-other-width)); 
-}
-
-.box-foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
-
-.box-foo {
-	margin: calc(var(--some-margin) - 2px) calc(1rem - var(--missing));
-}
-
-.box-foo {
-	padding: calc(var(--some-padding) - 2px) calc(100px - var(--some-padding)) calc(100px - calc(var(--missing, 20px) - 10px));
+	background-color: hsla(120,100%,50%, var(--missing-opacity));
 }

test/fixtures/nested-inside-other-func.expected.css

@@ -3,42 +3,9 @@
 }
 
 .box-foo {
-	background-color: color(white);
+	background-color: rgba(255, 0, 0, 0.3);
 }
 
 .box-foo {
-	width: calc(58.3333333333% - 150px); 
-}
-
-.box-foo {
-	width: calc(58.3333333333% - 100px); 
-}
-
-.box-foo {
-	width: calc(80vw - 50px); 
-}
-
-.box-foo {
-	width: calc(58.3333333333% - 150px); 
-}
-
-.box-foo {
-	width: undefined; 
-}
-
-.box-foo {
-	width: calc(150px - 50px); 
-}
-
-.box-foo {
-	width: calc(calc(100px / 2) / 2);
-}
-
-.box-foo {
-	margin: undefined
-}
-
-.box-foo {
-	padding: calc(20px - 2px) calc(100px - 20px) calc(100px - calc(20px - 10px));
-}
-
+	background-color: undefined;
+}

test/test.js

@@ -255,6 +255,10 @@ describe('postcss-css-variables', function() {
 		test('should use fallback variable if provided with missing variables calc', 'missing-variable-should-fallback-calc');
 		test('should use fallback variable if provided with missing variables nested', 'missing-variable-should-fallback-nested');
 		test('should not mangle outer function parentheses', 'nested-inside-other-func');
+		test('should not mangle outer function parentheses - with fallback', 'nested-inside-other-func-with-fallback');
+		test('should not mangle outer function parentheses - calc', 'nested-inside-calc-func');
+		test('should not mangle outer function parentheses - calc with fallback', 'nested-inside-calc-func-with-fallback');
+		test('should not mangle outer function parentheses - calc with fallback var()', 'nested-inside-calc-func-with-fallback-var');
 	});
 
 	test('should accept whitespace in var() declarations', 'whitespace-in-var-declaration' )