Merge pull request #2322 from nazar-pc/fix-for-mixins-parsing

Fix for mixins declaration with space before colon
Polymer · Oct 26, 2015 · 30da1b3 · 30da1b3
2 parents e1f83d2 + 883aa5c
commit 30da1b3
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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');