Fixes #2263: ensure custom-style can parse variable definitions in su…

…pported selectors (e.g. /deep/) without exception due to unknown css.
Polymer · Aug 20, 2015 · 894492b · 894492b
1 parent 0f8483d
commit 894492b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html
@@ -135,11 +135,13 @@
       if (this.include) {
         e.textContent += styleUtil.cssFromModules(this.include);
       }
+      var rules = styleUtil.rulesForStyle(e);
+      styleUtil.forEachStyleRule(rules, function(rule) {
+        styleTransformer.documentRule(rule);
+      });
       this._computeStyleProperties();
       var props = this._styleProperties;
-      var self = this;
-      e.textContent = styleUtil.toCssText(styleUtil.rulesForStyle(e), 
-        function(rule) {
+      e.textContent = styleUtil.toCssText(rules, function(rule) {
           var css = rule.cssText = rule.parsedCssText;
           if (rule.propertyInfo && rule.propertyInfo.cssText) {
             // remove property assignments
@@ -154,7 +156,6 @@
             // replace with reified properties, scenario is same as mixin
             rule.cssText = propertyUtils.valueForProperties(css, props);
           }
-          styleTransformer.documentRule(rule);
         }
       );
     }

diff --git a/test/unit/custom-style.html b/test/unit/custom-style.html
@@ -73,6 +73,10 @@
       --primary: 10px;
     }
 
+    body /deep/ * {
+      --deeep: 6px solid orange;
+    }
+
 
   </style>
   <style is="custom-style">
@@ -156,18 +160,23 @@
       div {
         @apply(--bag);
       }
+
+      #deep {
+        border: var(--deeep);
+      }
     </style>
     <template>
       <div id="me">x-foo</div>
       <x-bar id="bar1"></x-bar>
       <x-bar id="bar2"></x-bar>
       <x-bar id="bar3"></x-bar>
+      <div id="deep">deep</div>
     </template>
   </dom-module>
 
   <script>
 
-    suite('x-style', function() {
+    suite('custom-style', function() {
 
       suiteSetup(function() {
 
@@ -261,6 +270,10 @@
         assert.include(url, 'sub/google.png');
       });
 
+      test('property in /deep/ rule applied via document scope inheritance', function() {
+        assertComputed(xFoo.$.deep, '6px');
+      });
+
     });