Merge pull request #215 from webcomponents/fix-inherit-initial-fallbacks

Do not replace "inherit" and "initial" in fallbacks

Author: dfreedm

apply-shim.min.js

@@ -386,9 +386,10 @@ class ApplyShim {
    * "parse" a mixin definition into a map of properties and values
    * cssTextToMap('border: 2px solid black') -> ('border', '2px solid black')
    * @param {string} text
+   * @param {boolean=} replaceInitialOrInherit
    * @return {!Object<string, string>}
    */
-  _cssTextToMap(text) {
+  _cssTextToMap(text, replaceInitialOrInherit = false) {
     let props = text.split(';');
     let property, value;
     let out = {};
@@ -400,7 +401,10 @@ class ApplyShim {
         if (sp.length > 1) {
           property = sp[0].trim();
           // some properties may have ':' in the value, like data urls
-          value = this._replaceInitialOrInherit(property, sp.slice(1).join(':'));
+          value = sp.slice(1).join(':');
+          if (replaceInitialOrInherit) {
+            value = this._replaceInitialOrInherit(property, value);
+          }
           out[property] = value;
         }
       }
@@ -445,7 +449,10 @@ class ApplyShim {
     }
     let mixinAsProperties = this._consumeCssProperties('' + valueMixin, rule);
     let prefix = matchText.slice(0, matchText.indexOf('--'));
-    let mixinValues = this._cssTextToMap(mixinAsProperties);
+    // `initial` and `inherit` as properties in a map should be replaced because
+    // these keywords are eagerly evaluated when the mixin becomes CSS Custom Properties,
+    // and would set the variable value, rather than carry the keyword to the `var()` usage.
+    let mixinValues = this._cssTextToMap(mixinAsProperties, true);
     let combinedProps = mixinValues;
     let mixinEntry = this._map.get(propertyName);
     let oldProps = mixinEntry && mixinEntry.properties;

apply-shim.min.js.map

@@ -64,6 +64,14 @@
       border: 1px dotted orange;
       @apply --mixin;
     }
+    span {
+      border: inherit;
+      @apply --mixin;
+    }
+    span {
+      border: initial;
+      @apply --mixin;
+    }
     </style>
   </template>
 
@@ -204,6 +212,13 @@
         var application = ast.rules[1];
         assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*1px dotted orange\)/);
       });
+
+      test('inherit and initial default values are preserved', function() {
+        var application = ast.rules[2];
+        assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*inherit\)/);
+        application = ast.rules[3];
+        assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*initial\)/);
+      });
     });
 
     suite('override', function() {

src/apply-shim.js

@@ -55,6 +55,14 @@
       border: 1px dotted orange;
       @apply --mixin;
     }
+    span {
+      border: inherit;
+      @apply --mixin;
+    }
+    span {
+      border: initial;
+      @apply --mixin;
+    }
     </style>
   </template>
 
@@ -184,6 +192,13 @@
         var application = ast.rules[1];
         assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*1px dotted orange\)/);
       });
+
+      test('inherit and initial default values are preserved', function () {
+        var application = ast.rules[2];
+        assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*inherit\)/);
+        application = ast.rules[3];
+        assert.match(application.cssText, /border:\s*var\(--mixin_-_border,\s*initial\)/);
+      });
     });
 
     suite('override', function() {