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.

Author: nazar-pc

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;
 
 })();

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)

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');