Fixes #3461: Only avoid creating a statically scoped stylesheet when …

…properties are consumed in an element, properly excluding properties produced as a result of consumption.
Polymer · Feb 25, 2016 · e26a806 · e26a806
1 parent 809352d
commit e26a806
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 9 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -82,12 +82,14 @@
 
       // returns cssText of properties that consume variables/mixins
       collectCssText: function(rule) {
-        var cssText = rule.parsedCssText;
-        // NOTE: we support consumption inside mixin assignment
-        // but not production, so strip out {...}
-        cssText = cssText.replace(this.rx.BRACKETED, '')
+        return this.collectConsumingCssText(rule.parsedCssText);
+      },
+
+      // NOTE: we support consumption inside mixin assignment
+      // but not production, so strip out {...}
+      collectConsumingCssText: function(cssText) {
+        return cssText.replace(this.rx.BRACKETED, '')
           .replace(this.rx.VAR_ASSIGN, '');
-        return cssText;
       },
 
       collectPropertiesInCssText: function(cssText, props) {
@@ -312,7 +314,7 @@
       _elementKeyframeTransforms: function(element, scopeSelector) {
         var keyframesRules = element._styles._keyframes;
         var keyframeTransforms = {};
-        if (!nativeShadow) {
+        if (!nativeShadow && keyframesRules) {
           // For non-ShadowDOM, we transform all known keyframes rules in
           // advance for the current scope. This allows us to catch keyframes
           // rules that appear anywhere in the stylesheet:

diff --git a/src/standard/x-styling.html b/src/standard/x-styling.html
@@ -33,6 +33,7 @@
         var needsStatic;
         for (var i=0, l=styles.length, css; i < l; i++) {
           css = styleUtil.parser._clean(styles[i].textContent);
+          css = propertyUtils.collectConsumingCssText(css);
           needsStatic = needsStatic || Boolean(css);
           if (css.match(propertyUtils.rx.MIXIN_MATCH) || 
               css.match(propertyUtils.rx.VAR_MATCH)) {

diff --git a/test/unit/styling-cross-scope-apply.html b/test/unit/styling-cross-scope-apply.html
@@ -269,6 +269,27 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-var-produce-via-consume">
+  <template>
+    <style>
+      :host {
+        display: block;
+        border: 10px solid orange;
+        --foo: {
+          color: var(--bar);
+        }
+      }
+    </style>
+        </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-var-produce-via-consume'
+    });
+  });
+  </script>
+</dom-module>
+
 
 <script>
 suite('scoped-styling-apply', function() {
@@ -361,10 +382,17 @@
     });
   });
 
+  test('producing a var that consumes another var preserves static styling', function() {
+    var d = document.createElement('x-var-produce-via-consume');
+    document.body.appendChild(d);
+    CustomElements.takeRecords();
+    assertComputed(d, '10px');
+  });
+
   // TODO(sorvell): fix for #1761 was reverted; include test once this issue is addressed
-  // test('mixin values can be overridden by subsequent concrete properties', function() {
-  //   assertComputed(styled.$.override, '19px');
-  // });
+  test('mixin values can be overridden by subsequent concrete properties', function() {
+    assertComputed(styled.$.override, '19px');
+  });
 });
 
 </script>

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -599,6 +599,25 @@
   </script>
 </dom-module>
 
+<dom-module id="x-var-produce-via-consume">
+  <template>
+    <style>
+      :host {
+        display: block;
+        border: 10px solid orange;
+        --foo: var(--bar);
+      }
+    </style>
+        </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-var-produce-via-consume'
+    });
+  });
+  </script>
+</dom-module>
+
 <script>
   suite('scoped-styling-var', function() {
 
@@ -864,6 +883,13 @@
     assertComputed(styled.$.overridesConcrete, '4px');
   });
 
+  test('producing a var that consumes another var preserves static styling', function() {
+    var d = document.createElement('x-var-produce-via-consume');
+    document.body.appendChild(d);
+    CustomElements.takeRecords();
+    assertComputed(d, '10px');
+  });
+
 });
 
 </script>