Make sure mixins are applied no matter the ordering of definition

Fixes #3833
Polymer · Aug 3, 2016 · 9daea3d · 9daea3d
1 parent 8b89f02
commit 9daea3d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 14 deletions.
diff --git a/src/lib/apply-shim.html b/src/lib/apply-shim.html
@@ -289,26 +289,34 @@
     _separator: MIXIN_VAR_SEP,
     transform: function(styles, elementProto) {
       this.__currentElementProto = elementProto;
-      styleUtil.forRulesInStyles(styles, this._boundTransformRule);
-      elementProto.__applyShimInvalid = false;
+      styleUtil.forRulesInStyles(styles, this._boundFindDefinitions);
+      styleUtil.forRulesInStyles(styles, this._boundFindApplications)
+      if (elementProto) {
+        elementProto.__applyShimInvalid = false;
+      }
       this.__currentElementProto = null;
     },
-    transformRule: function(rule) {
-      rule.cssText = this.transformCssText(rule.parsedCssText);
+    _findDefinitions: function(rule) {
+      var cssText = rule.parsedCssText;
+      // fix shim variables
+      cssText = cssText.replace(BAD_VAR, fixVars);
+      // produce variables
+      cssText = cssText.replace(VAR_ASSIGN, produceCssProperties);
+      rule.cssText = cssText;
       // :root was only used for variable assignment in property shim,
       // but generates invalid selectors with real properties.
       // replace with `:host > *`, which serves the same effect
       if (rule.selector === ':root') {
         rule.selector = ':host > *';
       }
     },
-    transformCssText: function(cssText) {
-      // fix shim variables
-      cssText = cssText.replace(BAD_VAR, fixVars);
-      // produce variables
-      cssText = cssText.replace(VAR_ASSIGN, produceCssProperties);
+    _findApplications: function(rule) {
       // consume mixins
-      return consumeCssProperties(cssText);
+      rule.cssText = consumeCssProperties(rule.cssText);
+    },
+    transformRule: function(rule) {
+      this._findDefinitions(rule);
+      this._findApplications(rule);
     },
     _getInitialValueForProperty: function(property) {
       if (!this._measureElement) {
@@ -321,6 +329,8 @@
   };
 
   ApplyShim._boundTransformRule = ApplyShim.transformRule.bind(ApplyShim);
+  ApplyShim._boundFindDefinitions = ApplyShim._findDefinitions.bind(ApplyShim);
+  ApplyShim._boundFindApplications = ApplyShim._findApplications.bind(ApplyShim);
   return ApplyShim;
 })();
 </script>
diff --git a/src/lib/custom-style.html b/src/lib/custom-style.html
@@ -213,12 +213,12 @@
           function(rule) {
             // shim the selector for current runtime settings
             styleTransformer.documentRule(rule);
-            // run the apply shim if unbuilt and using native css custom properties
-            if (settings.useNativeCSSProperties && !buildType) {
-              applyShim.transformRule(rule);
-            }
           }
         );
+        // run the apply shim if unbuilt and using native css custom properties
+        if (settings.useNativeCSSProperties && !buildType) {
+          applyShim.transform([e]);
+        }
       }
       // custom properties shimming
       // (if we use native custom properties, no need to apply any property shimming)

diff --git a/test/unit/styling-cross-scope-apply.html b/test/unit/styling-cross-scope-apply.html
@@ -687,6 +687,34 @@
   </script>
 </dom-module>
 
+<dom-module id="x-apply-order">
+  <template>
+    <style>
+    :host {
+      @apply --gets-applied;
+      --gets-applied: {
+        color: rgb(123, 123, 123);
+      };
+    }
+    :host {
+      @apply --doesnt-get-applied;
+    }
+    :host {
+      --doesnt-get-applied: {
+        font-size: 100px;
+      };
+    }
+    </style>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-apply-order'
+    })
+  });
+  </script>
+</dom-module>
+
 <script>
 suite('scoped-styling-apply', function() {
   function assertComputed(element, value, property) {
@@ -950,6 +978,14 @@
     CustomElements.takeRecords();
     assertComputed(e.$.child, 'rgb(123, 123, 123)', 'color');
   });
+
+  test('mixin properties are applied no matter their ordering in the stylesheet', function() {
+    var e = document.createElement('x-apply-order');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assertComputed(e, 'rgb(123, 123, 123)', 'color');
+    assertComputed(e, '100px', 'font-size');
+  });
 });
 
 </script>