Fix for BEM-like CSS selectors under media queries, fixes #2639.

Small optimization for produced CSS (empty rules produced semicolon before, now empty string).
Polymer · Nov 1, 2015 · 35c89f1 · 35c89f1
1 parent 30da1b3
commit 35c89f1
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/src/lib/css-parse.html b/src/lib/css-parse.html
@@ -123,7 +123,7 @@
     },
 
     _hasMixinRules: function(rules) {
-      return (rules[0].selector.indexOf(this.VAR_START) >= 0);
+      return rules[0].selector.indexOf(this.VAR_START) === 0;
     },
 
     removeCustomProps: function(cssText) {

diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -166,7 +166,7 @@
               p || '';
           }
         }
-        return parts.join(';');
+        return parts.filter(function(v) {return v;}).join(';');
       },
 
       applyProperties: function(rule, props) {

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -119,6 +119,18 @@
       border: 20px solid blue;
     }
   </style>
+  <style>
+    .foo--bar {
+      border-top : 3px solid red;
+    }
+  </style>
+  <style is="custom-style">
+    @media (min-width: 1px) {
+      .foo--bar {
+        border-top : 20px solid blue;
+      }
+    }
+  </style>
 </head>
 <body>
   <div class="italic">italic</div>
@@ -143,6 +155,7 @@
 
   <div class="foo"></div>
 
+  <div class="foo--bar style-scope"></div>
 
   <dom-module id="x-baz">
     <style>
@@ -385,6 +398,10 @@
         document.body.removeChild(d);
       });
 
+      test('BEM-like CSS selectors under media queries', function() {
+        assertComputed(document.querySelector('.foo--bar'), '3px');
+      });
+
     });