Fixes #1543

src/lib/style-properties.html

@@ -127,10 +127,11 @@
             // case (2) variable
             var self = this;
             var fn = function(all, prefix, value, fallback) {
-              return prefix + (self.valueForProperty(props[value], props) ||
+              var propertyValue = (self.valueForProperty(props[value], props) ||
                 (props[fallback] ? 
                 self.valueForProperty(props[fallback], props) : 
                 fallback));
+              return prefix + (propertyValue || '');
             };
             property = property.replace(this.rx.VAR_MATCH, fn);
           }
@@ -322,7 +323,12 @@
       rx: {
         VAR_ASSIGN: /(?:^|;\s*)(--[^\:;]*?):\s*?(?:([^;{]*?)|{([^}]*)})(?=;)/gim,
         MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\);?/im, 
-        VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*([^,)]*)[\s]*?\)/gim,
+        // note, this supports:
+        // var(--a)
+        // var(--a, --b)
+        // var(--a, fallback-literal)
+        // var(--a, fallback-literal(with-one-nested-parens))
+        VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gim,
         VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gim,
         BRACKETED: /\{[^}]*\}/g,
         HOST_PREFIX: '(?:^|[^.])',

test/unit/styling-cross-scope-var.html

@@ -190,6 +190,7 @@
         --fallback: 7px solid orange;
         --default1: var(--undefined, 6px solid yellow);
         --default2: var(--undefined, --fallback);
+        --default3: var(--undefined, rgb(128, 200, 250));
         --a: 10px;
         --b: 5px;
         --primary-color: rgb(128, 128, 128);
@@ -224,6 +225,11 @@
         border: var(--default2);
       }
 
+      #default3 {
+        padding: 8px;
+        background-color: var(--default3);
+      }
+
       #overrides1, #overrides2, #overrides3 {
         --rename: 8px solid navy;
       }
@@ -260,6 +266,7 @@
       <x-overrides2 id="overrides3"></x-overrides2>
       <div id="default1">default</div>
       <div id="default2">var default</div>
+      <div id="default3">tricky property rgb(...) default</div>
       <div id="applyDefault1">default</div>
       <div id="applyDefault2">var default</div>
       <div id="calc">Calc</div>
@@ -348,6 +355,11 @@
     assertComputed(styled.$.applyDefault2, '7px');
   });
 
+  test('variable literal defaults can contain one (...)', function() {
+    var b = getComputedStyle(styled.$.default3).backgroundColor;
+    assert.match(b, /rgb\(128/, 'literal fallback containin (...) not set');
+  });
+
   test('variable values can be used with calc', function() {
     assertComputed(styled.$.calc, '15px');
   });