ApplyShim does not correctly handle values of inherit or initial in mixins

[sorvell]

The apply shim uses initial as a special value to help it forward default values to properties. Consider:

.foo {
  border: 2px solid red;
  @apply --foo;
}

In this case, if --foo does not contain a border property, elements matching .foo will have a 2px red border. Under the apply shim, if one setting of --foo contains border and another does not, we ensure that all --foo declarations contain at least border: initial. This allows us to write a rule like this:

.foo {
  border: 2px solid red;
  /*  shim for @apply --foo; */
  border: var(--foo_-_border, 2px solid red);
}

This works unless the user wants to set a value of initial for border in --foo. In this case the value is incorrect. In the native case, the computed value is initial and in the shim'd case it is the fallback.

See: http://jsbin.com/veqebo/edit?html,output.

[sorvell]

Variable assignment is early bound. This means that assigning a value of initial to a variable resolves the value at that point. Since the apply shim uses variables to transmit data down the tree it must early bind a value of initial. For example,

--foo {
  color: initial;
}

Cannot be shimmed to -foo_-_color: initial;. Instead it must be bound to the computed initial value for color.

To get this value, we can do something like this:

div = document.createElement('div');
div.style.all = 'initial';
document.body.appendChild(div);
getComputedStyle(div).color

[sorvell]

To handle a value of inherit, on the other hand, we can replace the property with an invalid property value like shim-inherit.

--foo {
  color: inherit;
}

Cannot be shimmed as --foo_-_color: inherit because this will inherit the previous property value and often be initial which does not apply in variable resolution. Instead, it should be shimmed as --foo_-_color: shim-inherit;.

In some rule like this color: var(--foo_-_color, red), the value will then be "invalid at computed time." This will make the property compute to inherit for inheriting properties (what we want) or initial for non-inheriting properties (technically wrong). Since setting inherit for non-inheriting properties typically does not make sense, we can probably live with not supporting this case.