Merge pull request Polymer#3807 from Polymer/invalidating-apply-shim

Rerun Apply Shim when mixins with consumers are redefined

Author: dfreedm

polymer.html

@@ -72,6 +72,7 @@
       this._setupShady();
       this._registerHost();
       if (this._template) {
+        this._validateApplyShim();
         // manage local dom
         this._poolContent();
         // host stack
@@ -88,7 +89,7 @@
       // acquire instance behaviors
       this._marshalBehaviors();
       /*
-      TODO(sorvell): It's *slightly() more efficient to marshal attributes prior 
+      TODO(sorvell): It's *slightly() more efficient to marshal attributes prior
       to installing hostAttributes, but then hostAttributes must be separately
       funneled to configure, which is cumbersome.
       Since this delta seems hard to measure we will not bother atm.

src/lib/apply-shim.html

@@ -86,12 +86,15 @@
   var MIXIN_VAR_SEP = '_-_';
 
   // map of mixin to property names
-  // --foo: {border: 2px} -> (--foo, ['border'])
+  // --foo: {border: 2px} -> {properties: {(--foo, ['border'])}, dependants: {'element-name': proto}}
   var mixinMap = {};
 
-  function mapSet(name, prop) {
+  function mapSet(name, props) {
     name = name.trim();
-    mixinMap[name] = prop;
+    mixinMap[name] = {
+      properties: props,
+      dependants: {}
+    };
   }
 
   function mapGet(name) {
@@ -118,6 +121,16 @@
     return out;
   }
 
+  function invalidateMixinEntry(mixinEntry) {
+    var currentProto = ApplyShim.__currentElementProto;
+    var currentElementName = currentProto && currentProto.is;
+    for (var elementName in mixinEntry.dependants) {
+      if (elementName !== currentElementName) {
+        mixinEntry.dependants[elementName].__applyShimInvalid = true;
+      }
+    }
+  }
+
   function produceCssProperties(matchText, propertyName, valueProperty, valueMixin) {
     // handle case where property value is a mixin
     if (valueProperty) {
@@ -133,26 +146,38 @@
     var mixinAsProperties = consumeCssProperties(valueMixin);
     var prefix = matchText.slice(0, matchText.indexOf('--'));
     var mixinValues = cssTextToMap(mixinAsProperties);
-    var oldProperties = mapGet(propertyName);
     var combinedProps = mixinValues;
-    if (oldProperties) {
+    var mixinEntry = mapGet(propertyName);
+    var oldProps = mixinEntry && mixinEntry.properties;
+    if (oldProps) {
       // NOTE: since we use mixin, the map of properties is updated here
       // and this is what we want.
-      combinedProps = Polymer.Base.mixin(oldProperties, mixinValues);
+      combinedProps = Object.create(oldProps);
+      combinedProps = Polymer.Base.mixin(combinedProps, mixinValues);
     } else {
       mapSet(propertyName, combinedProps);
     }
     var out = [];
     var p, v;
     // set variables defined by current mixin
+    var needToInvalidate = false;
     for (p in combinedProps) {
       v = mixinValues[p];
       // if property not defined by current mixin, set initial
       if (v === undefined) {
         v = 'initial';
       }
+      if (oldProps && !(p in oldProps)) {
+        needToInvalidate = true;
+      }
       out.push(propertyName + MIXIN_VAR_SEP + p + ': ' + v);
     }
+    if (needToInvalidate) {
+      invalidateMixinEntry(mixinEntry);
+    }
+    if (mixinEntry) {
+      mixinEntry.properties = combinedProps;
+    }
     return prefix + out.join('; ') + ';';
   }
 
@@ -170,10 +195,14 @@
   function atApplyToCssProperties(mixinName, fallbacks) {
     mixinName = mixinName.replace(APPLY_NAME_CLEAN, '');
     var vars = [];
-    var mixinProperties = mapGet(mixinName);
-    if (mixinProperties) {
+    var mixinEntry = mapGet(mixinName);
+    if (mixinEntry) {
+      var currentProto = ApplyShim.__currentElementProto;
+      if (currentProto) {
+        mixinEntry.dependants[currentProto.is] = currentProto;
+      }
       var p, parts, f;
-      for (p in mixinProperties) {
+      for (p in mixinEntry.properties) {
         f = fallbacks && fallbacks[p];
         parts = [p, ': var(', mixinName, MIXIN_VAR_SEP, p];
         if (f) {
@@ -214,8 +243,11 @@
   var ApplyShim = {
     _map: mixinMap,
     _separator: MIXIN_VAR_SEP,
-    transform: function(styles) {
+    transform: function(styles, elementProto) {
+      this.__currentElementProto = elementProto;
       styleUtil.forRulesInStyles(styles, this._boundTransformRule);
+      elementProto.__applyShimInvalid = false;
+      this.__currentElementProto = null;
     },
     transformRule: function(rule) {
       rule.cssText = this.transformCssText(rule.parsedCssText);

src/lib/custom-style.html

@@ -132,7 +132,7 @@
       // TODO(sorvell): we could only do this if and only if
       // this.ownerDocument != document;
       // however, if we do that, we also have to change the `attached`
-      // code to go at `_beforeAttached` time because this is when 
+      // code to go at `_beforeAttached` time because this is when
       // elements produce styles (otherwise this breaks @apply shim)
       this._tryApply();
     },
@@ -153,7 +153,7 @@
           var e = this.__appliedElement;
           // used applied element from HTMLImports polyfill or this
           if (!settings.useNativeCSSProperties) {
-            // if default style properties exist when 
+            // if default style properties exist when
             // this element tries to apply styling then,
             // it has been loaded async and needs to trigger a full updateStyles
             // to guarantee properties it provides update correctly.
@@ -256,7 +256,7 @@
     _flushCustomProperties: function() {
       // if this style has not yet applied at all and it was loaded asynchronously
       // (detected by Polymer being ready when this element tried to apply), then
-      // do a full updateStyles to ensure that 
+      // do a full updateStyles to ensure that
       if (this.__needsUpdateStyles) {
         this.__needsUpdateStyles = false;
         updateDebouncer = debounce(updateDebouncer, this._updateStyles);

src/standard/styling.html

@@ -63,7 +63,7 @@
           // We can avoid *all* shimming if native properties are used
           // and there is a shadow css build and we are using native shadow.
           var hasTargetedCssBuild = styleUtil.isTargetedBuild(this.__cssBuild);
-          if (settings.useNativeCSSProperties && this.__cssBuild === 'shadow' 
+          if (settings.useNativeCSSProperties && this.__cssBuild === 'shadow'
             && hasTargetedCssBuild) {
             return;
           }
@@ -72,12 +72,12 @@
           // css is calculated.
           // css build takes care of apply shim, so avoid doing this work.
           if (settings.useNativeCSSProperties && !this.__cssBuild) {
-            applyShim.transform(this._styles);
+            applyShim.transform(this._styles, this);
           }
           // calculate element static styling (with a targeted build and native
           // properties, there's only 1 style and no need to parse it!
-          var cssText = settings.useNativeCSSProperties && hasTargetedCssBuild ? 
-            (this._styles.length && this._styles[0].textContent.trim()) : 
+          var cssText = settings.useNativeCSSProperties && hasTargetedCssBuild ?
+            (this._styles.length && this._styles[0].textContent.trim()) :
             styleTransformer.elementStyles(this);
           // prepare to shim style properties.
           this._prepStyleProperties();

src/standard/x-styling.html

@@ -74,10 +74,31 @@
           this._ownStylePropertyNames.length);
       },
 
+      _validateApplyShim: function() {
+        if (this.__applyShimInvalid) {
+          // rerun apply shim
+          Polymer.ApplyShim.transform(this._styles, this.__proto__);
+          var cssText = styleTransformer.elementStyles(this);
+          if (nativeShadow) {
+            // replace style in template
+            var templateStyle = this._template.content.querySelector('style');
+            if (templateStyle) {
+              templateStyle.textContent = cssText;
+            }
+          } else {
+            // replace scoped style
+            var shadyStyle = this._scopeStyle && this._scopeStyle.nextSibling;
+            if (shadyStyle) {
+              shadyStyle.textContent = cssText;
+            }
+          }
+        }
+      },
+
       _beforeAttached: function() {
         // note: do this once automatically,
         // then requires calling `updateStyles`
-        if ((!this._scopeSelector || this.__stylePropertiesInvalid) && 
+        if ((!this._scopeSelector || this.__stylePropertiesInvalid) &&
           this._needsStyleProperties()) {
           this.__stylePropertiesInvalid = false;
           this._updateStyleProperties();
@@ -273,7 +294,7 @@
             } else {
               this._styleProperties = null;
             }
-          // if called when an element is not attached, invalidate 
+          // if called when an element is not attached, invalidate
           // styling by unsetting scopeSelector.
           } else {
             this.__stylePropertiesInvalid = true;

test/unit/styling-cross-scope-apply.html

@@ -447,6 +447,92 @@
   </script>
 </dom-module>
 
+<dom-module id="x-consume-mixin">
+  <template>
+    <style>
+    :host {
+      @apply --above;
+    }
+    </style>
+    <span>X</span>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-consume-mixin'
+    })
+  })
+  </script>
+</dom-module>
+
+<dom-module id="x-produce-mixin-1">
+  <template>
+    <style>
+    :host {
+      --above: {
+        color: rgb(255, 0, 0);
+      };
+    }
+    </style>
+    <x-consume-mixin id="child"></x-consume-mixin>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-produce-mixin-1'
+    })
+  })
+  </script>
+</dom-module>
+
+<dom-module id="x-produce-mixin-2">
+  <template>
+    <style>
+    :host {
+      --above: {
+        background-color: rgb(0, 255, 0);
+      };
+    }
+    </style>
+    <x-consume-mixin id="child"></x-consume-mixin>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-produce-mixin-2'
+    })
+  })
+  </script>
+</dom-module>
+
+<dom-module id="x-produce-mixin-3">
+  <template>
+    <style>
+    :host {
+      --above: {
+        color: rgb(255, 0, 0);
+      };
+    }
+    </style>
+    <x-consume-mixin id="child"></x-consume-mixin>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-produce-mixin-3'
+    })
+  })
+  </script>
+</dom-module>
+
+<style is="custom-style">
+:root {
+  --above: {
+    border: 8px solid blue;
+  }
+}
+</style>
+
 <script>
 suite('scoped-styling-apply', function() {
   function assertComputed(element, value, property) {
@@ -616,6 +702,40 @@
     assertComputed(div, '2px');
     assertComputed(div, '0px', 'height');
   });
+
+  test('Redefined mixins apply new properties for future elements', function() {
+    function getStyleText(element) {
+      if (Polymer.Settings.useNativeShadow) {
+        return element.shadowRoot.querySelector('style').textContent;
+      } else {
+        var shadyStyle = element._scopeStyle && element._scopeStyle.nextSibling;
+        if (shadyStyle) {
+          return shadyStyle.textContent;
+        }
+        return '';
+      }
+    }
+    var parent1 = document.createElement('x-produce-mixin-1');
+    var parent2 = document.createElement('x-produce-mixin-2');
+    var parent3 = document.createElement('x-produce-mixin-3');
+    document.body.appendChild(parent1);
+    document.body.appendChild(parent2);
+    document.body.appendChild(parent3);
+    CustomElements.takeRecords();
+    assertComputed(parent1.$.child, 'rgb(255, 0, 0)', 'color');
+    assertComputed(parent2.$.child, 'rgb(0, 255, 0)', 'background-color');
+    assertComputed(parent1.$.child, '0px');
+    assertComputed(parent2.$.child, '0px');
+    assertComputed(parent3.$.child, 'rgb(255, 0, 0)', 'color');
+    assertComputed(parent3.$.child, '0px');
+    if (Polymer.Settings.useNativeCSSProperties && Polymer.Settings.useNativeShadow) {
+      var parent1Text = getStyleText(parent1.$.child);
+      var parent2Text = getStyleText(parent2.$.child);
+      var parent3Text = getStyleText(parent3.$.child);
+      assert.notEqual(parent1Text, parent2Text, 'x-produce-mixin-2 should invalidate x-consume-mixin');
+      assert.equal(parent2Text, parent3Text, 'x-produce-mixin-3 should not have invalidated x-consume-mixin');
+    }
+  });
 });
 
 </script>