@extends: add support for nested style rules

Polymer · May 14, 2015 · 92ebf2f · nazar-pc · Nov 5, 2015 · 92ebf2f
1 parent 6095478
commit 92ebf2f
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/src/lib/style-extends.html b/src/lib/style-extends.html
@@ -22,11 +22,11 @@
     transform: function(cssText) {
       return Polymer.StyleUtil.toCssText(cssText, function(rule) {
         var map = this._mapRule(rule);
-        if (map) {
+        if (rule.parent) {
           var m;
           while (m = this.rx.EXTEND.exec(rule.cssText)) {
             var extend = m[1];
-            var extendor = map[extend];
+            var extendor = this._findExtendor(extend, rule);
             if (extendor) {
               this._extendRule(rule, extendor);
             }
@@ -48,7 +48,15 @@
       }
     },
 
+    _findExtendor: function(extend, rule) {
+      return rule.parent && rule.parent.map && rule.parent.map[extend] ||
+        this._findExtendor(extend, rule.parent);
+    },
+
     _extendRule: function(target, source) {
+      if (target.parent !== source.parent) {
+        this._cloneAndRuleToParent(source, target.parent);
+      }
       target.extends = target.extends || (target.extends = []);
       target.extends.push(source);
       source.selector = source.selector + ',\n' + target.selector;
@@ -59,6 +67,15 @@
       }
     },
 
+    _cloneAndRuleToParent: function(rule, parent) {
+      rule = Object.create(rule);
+      rule.parent = parent;
+      if (rule.extends) {
+        rule.extends = rule.extends.slice();
+      }
+      parent.rules.push(rule);
+    },
+
     rx: {
       EXTEND: /@extends\(([^)]*)\)\s*?;/gim
     }

diff --git a/test/unit/styling-extends.html b/test/unit/styling-extends.html
@@ -37,14 +37,36 @@
         @extends(#bar);
       }
 
+      .not {
+        border: 20px solid orange;
+      }
+
+      @media (max-width: 20000px) {
+        .baz {
+          padding: 15px;
+        }
+
+        @media (max-width: 20000px) {
+          #media {
+            @extends(#foo);
+            @extends(.baz);
+          }
+        }
+      }
 
+      @media (max-width: 1px) {
+        #media {
+          @extends(.not);
+        }
+      }
     </style>
 
     <template>
     <div id="container">
       <div id="foo">Foo</div>
       <div id="bar">Bar</div>
       <div id="zot">Zot</div>
+      <div id="media">Media</div>
     </div>
     </template>
     <script>
@@ -76,6 +98,11 @@
     assertComputed(e.$.zot, '10px', 'padding-top');
   });
 
+  test('nested styles extended (e.g. @media)', function() {
+    assertComputed(e.$.media, '10px');
+    assertComputed(e.$.media, '15px', 'padding-top');
+  });
+
 });
 
 </script>