The custom properties shim alters the cascade order incorrectly

[philipwalton]

For example, I have the following CSS in my <flex-line> element definition:

:host {
  --flex-line-gutter: 1em;
}
:host ::content > * {
  margin: var(--flex-line-gutter) 0 0 var(--flex-line-gutter);
}
:host ::content > flex-line {
  margin: 0;
}

It get translated into this:

<style scope="flex-line">
  flex-line > flex-line {
    margin: 0;
  }
</style>
<style scope="flex-line-0">
  flex-line.flex-line-0 > * {
    margin: 1em 0 0 1em;
  }
</style>

As you can see, the order of the rules has been reversed and the specificity of the first content rule has increased, completely changing the cascade order.

If you're going to change the specificity of a rule (which I understand you have to in some cases) you should normalize it so all rules are increased by the same relative specificity.

[TimvdLippe]

This issues was fixed in #2642 but not closed.

[ebidel]

Thanks Tim.

Phil holler if you see anything contrary.