From 883aa5c8be4428e23fa9db08ab8486cecc982cba Mon Sep 17 00:00:00 2001
From: Nazar Mokrynskyi <nazar@mokrynskyi.com>
Date: Thu, 20 Aug 2015 02:16:35 +0200
Subject: [PATCH] Fix for mixins declaration with space before colon. Allow any
 space character or even `{` and `}` (before and after capturing pattern
 correspondingly) as pattern boundaries instead of new lines only. In minified
 sources there might be no space, semicolon or line start, so we need to
 account that as well.

---
 src/lib/css-parse.html        | 18 +++++------
 src/lib/style-properties.html | 34 ++++++++++----------
 test/unit/custom-style.html   | 60 +++++++++++++++++++++++++++++++++--
 3 files changed, 83 insertions(+), 29 deletions(-)

diff --git a/src/lib/css-parse.html b/src/lib/css-parse.html
index a176d7c1c0..332857348e 100644
--- a/src/lib/css-parse.html
+++ b/src/lib/css-parse.html
@@ -43,7 +43,7 @@
             n = {start: i+1, parent: p, previous: previous};
             p.rules.push(n);
             break;
-          case this.CLOSE_BRACE: 
+          case this.CLOSE_BRACE:
             //console.groupEnd(n.start);
             n.end = i+1;
             n = n.parent || root;
@@ -84,9 +84,9 @@
       if (r$) {
         for (var i=0, l=r$.length, r; (i<l) && (r=r$[i]); i++) {
           this._parseCss(r, text);
-        }  
+        }
       }
-      return node;  
+      return node;
     },
 
     // stringify parsed css.
@@ -99,10 +99,10 @@
         if (r$ && (preserveProperties || !this._hasMixinRules(r$))) {
           for (var i=0, l=r$.length, r; (i<l) && (r=r$[i]); i++) {
             cssText = this.stringify(r, preserveProperties, cssText);
-          }  
+          }
         } else {
-          cssText = preserveProperties ? node.cssText : 
-            this.removeCustomProps(node.cssText);  
+          cssText = preserveProperties ? node.cssText :
+            this.removeCustomProps(node.cssText);
           cssText = cssText.trim();
           if (cssText) {
             cssText = '  ' + cssText + '\n';
@@ -138,7 +138,7 @@
     },
 
     removeCustomPropApply: function(cssText) {
-      return cssText            
+      return cssText
         .replace(this._rx.mixinApply, '')
         .replace(this._rx.varApply, '');
     },
@@ -158,7 +158,7 @@
       comments: /\/\*[^*]*\*+([^/*][^*]*\*+)*\//gim,
       port: /@import[^;]*;/gim,
       customProp: /(?:^|[\s;])--[^;{]*?:[^{};]*?(?:[;\n]|$)/gim,
-      mixinProp: /(?:^|[\s;])--[^;{]*?:[^{;]*?{[^}]*?}(?:[;\n]|$)?/gim,
+      mixinProp: /(?:^|[\s;])?--[^;{]*?:[^{;]*?{[^}]*?}(?:[;\n]|$)?/gim,
       mixinApply: /@apply[\s]*\([^)]*?\)[\s]*(?:[;\n]|$)?/gim,
       varApply: /[^;:]*?:[^;]*var[^;]*(?:[;\n]|$)?/gim,
       keyframesRule: /^@[^\s]*keyframes/,
@@ -171,7 +171,7 @@
   };
 
 
-  // exports 
+  // exports
   return api;
 
 })();
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
index 4af84b99bf..fd3e5e82a6 100644
--- a/src/lib/style-properties.html
+++ b/src/lib/style-properties.html
@@ -133,8 +133,8 @@
             var self = this;
             var fn = function(all, prefix, value, fallback) {
               var propertyValue = (self.valueForProperty(props[value], props) ||
-                (props[fallback] ? 
-                self.valueForProperty(props[fallback], props) : 
+                (props[fallback] ?
+                self.valueForProperty(props[fallback], props) :
                 fallback));
               return prefix + (propertyValue || '');
             };
@@ -160,7 +160,7 @@
               }
               p = pp.join(':');
             }
-            parts[i] = (p && p.lastIndexOf(';') === p.length - 1) ? 
+            parts[i] = (p && p.lastIndexOf(';') === p.length - 1) ?
               // strip trailing ;
               p.slice(0, -1) :
               p || '';
@@ -188,7 +188,7 @@
         // generates a unique key for these matches
         var o = [], i = 0;
         styleUtil.forRulesInStyles(styles, function(rule) {
-          // TODO(sorvell): we could trim the set of rules at declaration 
+          // TODO(sorvell): we could trim the set of rules at declaration
           // time to only include ones that have properties
           if (!rule.propertyInfo) {
             self.decorateRule(rule);
@@ -212,7 +212,7 @@
       // collect any custom properties into `props`.
       scopePropertiesFromStyles: function(styles) {
         if (!styles._scopeStyleProperties) {
-          styles._scopeStyleProperties = 
+          styles._scopeStyleProperties =
             this.selectedPropertiesFromStyles(styles, this.SCOPE_SELECTORS);
         }
         return styles._scopeStyleProperties;
@@ -225,7 +225,7 @@
       // :host(...) and then matching these against self.
       hostPropertiesFromStyles: function(styles) {
         if (!styles._hostStyleProperties) {
-          styles._hostStyleProperties = 
+          styles._hostStyleProperties =
             this.selectedPropertiesFromStyles(styles, this.HOST_SELECTORS);
         }
         return styles._hostStyleProperties;
@@ -251,15 +251,15 @@
         var self = this;
         var hostSelector = styleTransformer
           ._calcHostScope(element.is, element.extends);
-        var rxHostSelector = element.extends ? 
-          '\\' + hostSelector.slice(0, -1) + '\\]' : 
+        var rxHostSelector = element.extends ?
+          '\\' + hostSelector.slice(0, -1) + '\\]' :
           hostSelector;
-        var hostRx = new RegExp(this.rx.HOST_PREFIX + rxHostSelector + 
+        var hostRx = new RegExp(this.rx.HOST_PREFIX + rxHostSelector +
           this.rx.HOST_SUFFIX);
         return styleTransformer.elementStyles(element, function(rule) {
           self.applyProperties(rule, properties);
           if (rule.cssText && !nativeShadow) {
-            self._scopeSelector(rule, hostRx, hostSelector, 
+            self._scopeSelector(rule, hostRx, hostSelector,
               element._scopeCssViaAttr, scopeSelector);
           }
         });
@@ -271,8 +271,8 @@
       _scopeSelector: function(rule, hostRx, hostSelector, viaAttr, scopeId) {
         rule.transformedSelector = rule.transformedSelector || rule.selector;
         var selector = rule.transformedSelector;
-        var scope = viaAttr ? '[' + styleTransformer.SCOPE_NAME + '~=' + 
-          scopeId + ']' : 
+        var scope = viaAttr ? '[' + styleTransformer.SCOPE_NAME + '~=' +
+          scopeId + ']' :
           '.' + scopeId;
         var parts = selector.split(',');
         for (var i=0, l=parts.length, p; (i<l) && (p=parts[i]); i++) {
@@ -299,8 +299,8 @@
 
       applyElementStyle: function(element, properties, selector, style) {
         // calculate cssText to apply
-        var cssText = style ? style.textContent || '' : 
-          this.transformStyles(element, properties, selector);  
+        var cssText = style ? style.textContent || '' :
+          this.transformStyles(element, properties, selector);
         // if shady and we have a cached style that is not style, decrement
         var s = element._customStyle;
         if (s && !nativeShadow && (s !== style)) {
@@ -320,7 +320,7 @@
           } else if (cssText) {
             // apply css after the scope style of the element to help with
             // style predence rules.
-            style = styleUtil.applyCss(cssText, selector, 
+            style = styleUtil.applyCss(cssText, selector,
               nativeShadow ? element.root : null, element._scopeStyle);
           }
         }
@@ -350,8 +350,8 @@
       },
 
       rx: {
-        VAR_ASSIGN: /(?:^|[;\n]\s*)(--[\w-]*?):\s*(?:([^;{]*)|{([^}]*)})(?:(?=[;\n])|$)/gi,
-        MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\)/i, 
+        VAR_ASSIGN: /(?:^|[;\s{]\s*)(--[\w-]*?)\s*:\s*(?:([^;{]*)|{([^}]*)})(?:(?=[;\s}])|$)/gi,
+        MIXIN_MATCH: /(?:^|\W+)@apply[\s]*\(([^)]*)\)/i,
         // note, this supports:
         // var(--a)
         // var(--a, --b)
diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
index 8fe3d9a9bc..98b3eb7140 100644
--- a/test/unit/custom-style.html
+++ b/test/unit/custom-style.html
@@ -47,6 +47,14 @@
       };
     }
 
+    :root {
+      --red-text : {
+        color : red;
+      };
+    }
+
+    :root{--blue-text:{color:#0000ff};--dummy-mixin:{};--bold-text:{font-weight:700}}
+
 
     :root {
 
@@ -69,7 +77,7 @@
     }
 
     x-foo {
-      
+
       --primary: 10px;
     }
 
@@ -108,7 +116,7 @@
 
   <style is="custom-style" include="shared-style2">
     .zazz {
-      border: 20px solid blue; 
+      border: 20px solid blue;
     }
   </style>
 </head>
@@ -126,6 +134,10 @@
 
   <x-foo></x-foo>
 
+  <x-red-text></x-red-text>
+
+  <x-blue-bold-text></x-blue-bold-text>
+
   <br><br>
   <div id="after"></div>
 
@@ -180,12 +192,32 @@
     </template>
   </dom-module>
 
+  <dom-module id="x-red-text">
+    <style>
+      :host {
+        @apply(--red-text);
+      }
+    </style>
+    <template>
+      x-red-text
+    </template>
+  </dom-module>
+
+  <dom-module id="x-blue-bold-text">
+    <style>
+      :host {@apply(--blue-text);@apply(--bold-text);}
+    </style>
+    <template>
+      x-blue-bold-text
+    </template>
+  </dom-module>
+
   <script>
 
     suite('custom-style', function() {
 
       suiteSetup(function() {
-    
+
         Polymer({
           is: 'x-baz'
         });
@@ -198,6 +230,14 @@
           is: 'x-foo'
         });
 
+        Polymer({
+          is: 'x-red-text'
+        });
+
+        Polymer({
+          is: 'x-blue-bold-text'
+        });
+
         xBar = document.querySelector('x-bar');
         xFoo = document.querySelector('x-foo');
 
@@ -227,6 +267,20 @@
         assert.property(props, '--bag');
       });
 
+      test('custom properties with space before semicolon', function() {
+        var red = document.querySelector('x-red-text');
+        assertComputed(red, 'rgb(255, 0, 0)', 'color');
+      });
+
+      test('custom properties in minified css', function() {
+        var blue = document.querySelector('x-blue-bold-text');
+        assertComputed(blue, 'rgb(0, 0, 255)', 'color');
+
+        var computed = getComputedStyle(blue);
+        // Firefox returns `700`, while Chrome returns original `bold`
+        assert.ok(computed.fontWeight == '700' || computed.fontWeight == 'bold', 'computed style incorrect for fontWeight');
+      });
+
       test('custom-styles apply normal and property values to main document', function() {
         var bag = document.querySelector('.bag');
         var italic = document.querySelector('.italic');