prevent nested calc

ie11CustomProperties.js

@@ -1,4 +1,4 @@
-/*! ie11CustomProperties.js v3.0.3 | MIT License | https://git.io/fjXMN */
+/*! ie11CustomProperties.js v3.0.4 | MIT License | https://git.io/fjXMN */
 !function () {
 	'use strict';
 
@@ -278,7 +278,9 @@
 				if (!value) continue;
 				value = styleComputeValueWidthVars(getComputedStyle(document.documentElement), value);
 				if (value === '') continue;
-				style[prop] = value;
+				try {
+					style[prop] = value;
+				} catch(e) {}
 			}
 		}
 	}
@@ -414,7 +416,7 @@
 	}
 
 	function findVars(str, cb){ // css value parser
-		let level=0, openedLevel=null, lastPoint=0, newStr = '', i=0, char;
+		let level=0, openedLevel=null, lastPoint=0, newStr = '', i=0, char, insideCalc;
 		while (char=str[i++]) {
 			if (char === '(') {
 				++level;
@@ -423,6 +425,9 @@
 					newStr += str.substring(lastPoint, i-4);
 					lastPoint = i;
 				}
+				if (str[i-5]+str[i-4]+str[i-3]+str[i-2] === 'calc') {
+					insideCalc = level;
+				}
 			}
 			if (char === ')' && openedLevel === level) {
 				let variable = str.substring(lastPoint, i-1).trim(), fallback;
@@ -431,19 +436,23 @@
 					fallback = variable.slice(x+1);
 					variable = variable.slice(0,x);
 				}
-				newStr += cb(variable, fallback);
+				newStr += cb(variable, fallback, insideCalc);
 				lastPoint = i;
 				openedLevel = null;
 			}
-			if (char === ')') --level;
+			if (char === ')') {
+				--level;
+				if (insideCalc === level) insideCalc = null;
+			}
 		}
 		newStr += str.substring(lastPoint);
 		return newStr;
 	}
 	//const regValueGetters = /var\(([^),]+)(\,([^),]+))?\)/g;
 	function styleComputeValueWidthVars(style, valueWithVars, details){
-		return findVars(valueWithVars, function(variable, fallback){
+		return findVars(valueWithVars, function(variable, fallback, insideCalc){
 			var value = style.getPropertyValue(variable);
+			if (insideCalc) value = value.replace(/^calc\(/, '('); // prevent nested calc
 			if (details && style.lastPropertyServedBy !== document.documentElement) details.allByRoot = false;
 			if (value==='' && fallback) value = styleComputeValueWidthVars(style, fallback, details);
 			return value;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ie11-custom-properties",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Custom Properties polyfill for IE11.",
   "main": "ie11CustomProperties.js",
   "author": "Tobias Buschor",

tests.html

@@ -158,6 +158,19 @@
         </div>
     </div>
 
+    <div class=nested-calc>
+        nested calc
+        <div class=code>
+            <pre>
+                .nested-calc {
+                    --two:calc(1 + 1);
+                    background-image: linear-gradient(green, green 50%, transparent 50%, transparent);
+                    background-size: 100% calc(var(--two) * 100%);
+                }
+            </pre>
+        </div>
+    </div>
+
     <div id=hover>
         :hover (please hover to test)
         <div class=code>