Only invalidate mixin if it defines new properties

Polymer · Jul 26, 2016 · b27f842 · b27f842
1 parent 64d41e6
commit b27f842
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 9 deletions.
diff --git a/src/lib/apply-shim.html b/src/lib/apply-shim.html
@@ -121,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].__mixinsInvalid = true;
+      }
+    }
+  }
+
   function produceCssProperties(matchText, propertyName, valueProperty, valueMixin) {
     // handle case where property value is a mixin
     if (valueProperty) {
@@ -138,31 +148,36 @@
     var mixinValues = cssTextToMap(mixinAsProperties);
     var combinedProps = mixinValues;
     var mixinEntry = mapGet(propertyName);
-    if (mixinEntry) {
+    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(mixinEntry.properties, mixinValues);
-      var currentProto = ApplyShim.__currentElementProto;
-      var currentElementName = currentProto && currentProto.is;
-      for (var elementName in mixinEntry.dependants) {
-        if (elementName !== currentElementName) {
-          mixinEntry.dependants[elementName].__mixinsInvalid = true;
-        }
-      }
+      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('; ') + ';';
   }
 

diff --git a/test/unit/styling-cross-scope-apply.html b/test/unit/styling-cross-scope-apply.html
@@ -504,6 +504,27 @@
   })
   </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: {
@@ -683,15 +704,37 @@
   });
 
   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.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');
+    }
   });
 });