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

nazar-pc · nazar-pc · commit 35c89f1b1bd4 · 2015-11-01T05:20:20.000+01:00
Small optimization for produced CSS (empty rules produced semicolon before, now empty string).
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');
+      });
+
     });
 
 

Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,7 @@`
`166`	`166`	`p \|\| '';`
`167`	`167`	`}`
`168`	`168`	`}`
`169`		`- return parts.join(';');`
	`169`	`+ return parts.filter(function(v) {return v;}).join(';');`
`170`	`170`	`},`
`171`	`171`
`172`	`172`	`applyProperties: function(rule, props) {`