Fix for overriding mixin properties, fixes Polymer#1873

nazar-pc · Oct 29, 2015 · 092a9d0 · 092a9d0
1 parent 4fb22a0
commit 092a9d0
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 12 deletions.
diff --git a/src/lib/css-parse.html b/src/lib/css-parse.html
@@ -113,15 +113,20 @@
       if (cssText) {
         if (node.selector) {
           text += node.selector;
-          if (
-              !Polymer.Settings.useNativeShadow &&
-              !node.parent.type &&
-              this._rx.tagName.test(node.selector)
-          ) {
+          if (!Polymer.Settings.useNativeShadow && !node.parent.type) {
             var selector = node.selector.split(' ');
-            // `Polymer.StyleProperties.XSCOPE_NAME` just to increase specificity
-            selector[0] += '.' + Polymer.StyleProperties.XSCOPE_NAME;
-            text += ', ' + selector.join(' ');
+            var styleProperties = Polymer.StyleProperties;
+            // `styleProperties.XSCOPE_NAME` just to increase specificity
+            if (this._rx.tagName.test(node.selector)) {
+              selector[0] += '.' + styleProperties.XSCOPE_NAME;
+              text += ', ' + selector.join(' ');
+            } else if (
+                selector[0].indexOf(this.HOST) === -1 &&
+                selector[0].indexOf(styleProperties.XSCOPE_NAME) === -1
+            ) {
+              selector[0] = '.' + styleProperties.XSCOPE_NAME + ' ' + selector[0];
+              text += ', ' + selector.join(' ');
+            }
           }
           text += ' ' + this.OPEN_BRACE + '\n';
         }
@@ -178,7 +183,9 @@
 
     VAR_START: '--',
     MEDIA_START: '@media',
-    AT_START: '@'
+    AT_START: '@',
+
+    HOST: ':host'
 
   };
 

diff --git a/test/unit/css-parse.html b/test/unit/css-parse.html
@@ -105,7 +105,7 @@
     });
 
     test('rules stringify', function() {
-      var orig = sanitizeCss(s.textContent);
+      var orig = sanitizeCss(':host { background: red; } .foo .bar .baz, zonk[happy]:focus, .x-scope .foo .bar .baz, zonk[happy]:focus { font-family: sans-serif; font-size: 15px; } @-webkit-keyframes fill-unfill-rotate, .x-scope @-webkit-keyframes fill-unfill-rotate { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } to { transform: rotate(1080deg); } } @media (max-width: 400px), .x-scope @media (max-width: 400px) { div { margin-left: 0 !important; } }');
       var result = sanitizeCss(css.stringify(tree));
       assert.equal(result, orig, 'unexpected stringified output');
     });
@@ -116,7 +116,7 @@
       assert.equal(t.rules[0].selector, '.stuff', 'unexpected rule selector');
       assert.equal(t.rules[0].cssText, 'background: red;', 'unexpected rule cssText');
       var result = sanitizeCss(css.stringify(t));
-      assert.equal(result, '.stuff { background: red; }', 'unexpected stringified output');
+      assert.equal(result, '.stuff, .x-scope .stuff { background: red; }', 'unexpected stringified output');
     });
 
   });

diff --git a/test/unit/styling-scoped-elements.html b/test/unit/styling-scoped-elements.html
@@ -302,3 +302,43 @@
     Polymer({is: 'x-specificity'});
   </script>
 </dom-module>
+
+<style is="custom-style">
+  :root {
+    --x-overriding : {
+      border-top: 1px solid red;
+    }
+  }
+</style>
+<dom-module id="x-overriding">
+  <template>
+    <style>
+      .red {
+        @apply(--x-overriding);
+      }
+      .green {
+        @apply(--x-overriding);
+        border-top: 2px solid green;
+      }
+      .green-2 {
+        border-top: 2px solid green;
+        @apply(--x-overriding);
+      }
+      .blue {
+        @apply(--x-overriding);
+        border-top: 3px solid blue;
+      }
+    </style>
+
+    <div class="red">red</div>
+    <div class="green">green</div>
+    <div class="green-2">green-2</div>
+    <div class="blue">blue</div>
+  </template>
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-overriding'
+  });
+</script>
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -45,6 +45,7 @@
 
   <x-specificity></x-specificity>
   <x-specificity class="bar"></x-specificity>
+  <x-overriding></x-overriding>
 
 <script>
   suite('scoped-styling', function() {
@@ -203,7 +204,8 @@
       test('styles shimmed in registration order', function() {
         var s$ = document.head.querySelectorAll('style[scope]');
         var expected = ['x-child2', 'x-styled', 'x-button', 'x-mixed-case',
-          'x-mixed-case-button', 'x-dynamic-scope', 'x-specificity', 'x-gchild'];
+          'x-mixed-case-button', 'x-dynamic-scope', 'x-specificity',
+          'x-overriding-0', 'x-overriding', 'x-gchild'];
         var actual = [];
         for (var i=0; i<s$.length; i++) {
           actual.push(s$[i].getAttribute('scope'));
@@ -250,6 +252,14 @@
         assertComputed(document.querySelector('x-specificity'), '1px');
         assertComputed(document.querySelector('x-specificity.bar'), '2px');
       });
+
+      test('overwriting mixin properties', function() {
+        var root = document.querySelector('x-overriding');
+        assertComputed(root.querySelector('.red'), '1px');
+        assertComputed(root.querySelector('.green'), '2px');
+        assertComputed(root.querySelector('.green-2'), '2px');
+        assertComputed(root.querySelector('.blue'), '3px');
+      });
     });
 
 });