Merge pull request Polymer#3826 from Polymer/build-inherit

Property Shim needs to handle build output from apply shim

Author: dfreedm

src/lib/style-properties.html

@@ -164,6 +164,11 @@
                 // fallback may be --a or var(--a) or literal
                 propertyValue = self.valueForProperty(props[fallback] || fallback, props) ||
                 fallback;
+              } else if (propertyValue === 'apply-shim-inherit') {
+                // CSS build will replace `inherit` with `apply-shim-inherit`
+                // for use with native css variables.
+                // Since we have full control, we can use `inherit` directly.
+                propertyValue = 'inherit';
               }
               return prefix + (propertyValue || '') + suffix;
             };

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

@@ -656,6 +656,37 @@
   </script>
 </dom-module>
 
+<style is="custom-style">
+:root {
+  /*--build: {
+    color: inherit;
+  }*/
+  --build_-_color: apply-shim-inherit;
+}
+x-built {
+  color: rgb(123, 123, 123);
+}
+</style>
+<dom-module id="x-built">
+  <template>
+    <style>
+    #child {
+      color: rgb(0, 0, 0);
+      /* @apply --build */
+      color: var(--build_-_color, rgb(0, 0, 0));
+    }
+    </style>
+    <div id="child"></div>
+  </template>
+  <script>
+  HTMLImports.whenReady(function() {
+    Polymer({
+      is: 'x-built'
+    })
+  });
+  </script>
+</dom-module>
+
 <script>
 suite('scoped-styling-apply', function() {
   function assertComputed(element, value, property) {
@@ -851,7 +882,9 @@
     assertComputed(parent2.$.child, '0px');
     assertComputed(parent3.$.child, 'rgb(255, 0, 0)', 'color');
     assertComputed(parent3.$.child, '0px');
-    if (Polymer.Settings.useNativeCSSProperties && Polymer.Settings.useNativeShadow) {
+    if (!stylesBuilt && Polymer.Settings.useNativeCSSProperties && Polymer.Settings.useNativeShadow) {
+      // disable test if css build ran
+      // the styles will have been preprocessed with all properties for the mixin
       var parent1Text = getStyleText(parent1.$.child);
       var parent2Text = getStyleText(parent2.$.child);
       var parent3Text = getStyleText(parent3.$.child);
@@ -907,6 +940,16 @@
     assertComputed(e.$.child, 'rgb(0, 0, 0)', 'color');
     assertComputed(e.$.child, '0px');
   });
+
+  test('styleProperties can handle builds processed with applyShim w.r.t "inherit"', function() {
+    if (navigator.userAgent.match(/Trident/)) {
+      this.skip();
+    }
+    var e = document.createElement('x-built');
+    document.body.appendChild(e);
+    CustomElements.takeRecords();
+    assertComputed(e.$.child, 'rgb(123, 123, 123)', 'color');
+  });
 });
 
 </script>