Merge pull request #3821 from Polymer/apply-shim-depend-before-create

[apply shim] Track dependencies for mixins before creation

Author: dfreedm

src/lib/apply-shim.html

@@ -134,6 +134,7 @@
   function produceCssProperties(matchText, propertyName, valueProperty, valueMixin) {
     // handle case where property value is a mixin
     if (valueProperty) {
+      // form: --mixin2: var(--mixin1), where --mixin1 is in the map
       styleUtil.processVariableAndFallback(valueProperty, function(prefix, value) {
         if (value && mapGet(value)) {
           valueMixin = '@apply ' + value + ';';
@@ -178,6 +179,19 @@
     if (mixinEntry) {
       mixinEntry.properties = combinedProps;
     }
+    // because the mixinMap is global, the mixin might conflict with
+    // a different scope's simple variable definition:
+    // Example:
+    // some style somewhere:
+    // --mixin1:{ ... }
+    // --mixin2: var(--mixin1);
+    // some other element:
+    // --mixin1: 10px solid red;
+    // --foo: var(--mixin1);
+    // In this case, we leave the original variable definition in place.
+    if (valueProperty) {
+      prefix = matchText + ';' + prefix;
+    }
     return prefix + out.join('; ') + ';';
   }
 
@@ -196,6 +210,12 @@
     mixinName = mixinName.replace(APPLY_NAME_CLEAN, '');
     var vars = [];
     var mixinEntry = mapGet(mixinName);
+    // if we depend on a mixin before it is created
+    // make a sentinel entry in the map to add this element as a dependency for when it is defined.
+    if (!mixinEntry) {
+      mapSet(mixinName, {});
+      mixinEntry = mapGet(mixinName);
+    }
     if (mixinEntry) {
       var currentProto = ApplyShim.__currentElementProto;
       if (currentProto) {

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

@@ -533,6 +533,64 @@
 }
 </style>
 
+<dom-module id="x-apply-depend-before-create">
+  <template>
+    <style>
+    :host {
+      @apply --before-create;
+    }
+    </style>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-apply-depend-before-create'
+    })
+  })
+  </script>
+</dom-module>
+
+<dom-module id="x-create-after-apply">
+  <template>
+    <style>
+    :host {
+      --before-create: {
+        border: 2px solid green;
+      };
+    }
+    </style>
+    <x-apply-depend-before-create id="child"></x-apply-depend-before-create>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-create-after-apply'
+    })
+  })
+  </script>
+</dom-module>
+
+<dom-module id="x-reuse-mixin-name-for-variable">
+  <template>
+    <style>
+    :host {
+      /* --foo is used above as a mixin for color */
+      --foo: 20px solid blue;
+      /* this looks suspiciously like defining a mixin from another mixin */
+      --color: var(--foo);
+      border: var(--color);
+    }
+    </style>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-reuse-mixin-name-for-variable'
+    })
+  });
+  </script>
+</dom-module>
+
 <script>
 suite('scoped-styling-apply', function() {
   function assertComputed(element, value, property) {
@@ -736,6 +794,23 @@
       assert.equal(parent2Text, parent3Text, 'x-produce-mixin-3 should not have invalidated x-consume-mixin');
     }
   });
+
+  test('mixins can be depended on before creation', function() {
+    var e = document.createElement('x-apply-depend-before-create');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    var e2 = document.createElement('x-create-after-apply');
+    document.body.appendChild(e2);
+    CustomElements.takeRecords();
+    assertComputed(e2.$.child, '2px');
+  });
+
+  test('mixin names can be safely reused for variable definitions', function() {
+    var e = document.createElement('x-reuse-mixin-name-for-variable');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assertComputed(e, '20px');
+  });
 });
 
 </script>