[0.8] <link rel="import" type="css"> styles are shimmed out of order

[cdata]

Considering the following contrived custom element:

<dom-module id="x-example">
<style>
  :host {
    color: red;
  }
</style>
<link rel="import" type="css" href="./external-styles.css">
<style>
  :host {
    color: red;
  }
</style>
<template> <!-- ... --> </template>
</dom-module>
<script> Polymer({ is: 'x-example' }); </script>

/* external-styles.css */
:host {
  color: black;
}

The following shimmed stylesheet is generated:

<style scope="x-example">
x-example {
  color: red;
}

x-example {
  color: red;
}

x-example {
  color: black;
}
</style>

This results in an unexpected condition where the external stylesheet will always take precedence over the inline stylesheets. The expected outcome - for many who have used stylesheets in more traditional workflows - is for the stylesheets to be applied in the order they appear in the document, regardless of whether they are inline or externally referenced.

[sorvell]

Thanks for the clear description. Acknowledge the issue and will fix it.

[cdata]

Thanks for checking it out. I think I understand why the "expected" outcome is hard to get right (asynchronous loading / shimming of the external stylesheet?). In the mean time, I'm using specificity tweaks to achieve the desired result.

[cdata]

Bumping this issue, in case it has been fixed.

[sorvell]

Fixed via dbfe8f8.