Correct style ordering when remote and static resources are mixed.

Author: Steven Orvell

src/standard/styling.html

@@ -49,6 +49,7 @@
       },
 
       // search for extra style modules via `styleModules`
+      // TODO(sorvell): consider dropping support for `styleModules`
       _prepareStyles: function() {
         var cssText = '', m$ = this.styleModules;
         if (m$) {
@@ -72,34 +73,29 @@
         var m = Polymer.DomModule.import(moduleId);
         if (m && !m._cssText) {
           var cssText = '';
-          var e$ = Array.prototype.slice.call(m.querySelectorAll('style'));
-          this._unapplyStyles(e$);
-          e$ = e$.concat(Array.prototype.map.call(
-            //TODO(sorvell): add test for 404'ing import
-            m.querySelectorAll(REMOTE_SHEET_SELECTOR), function(l) {
-              return l.import && l.import.body;
-            }));
-          m._cssText = this._cssFromStyles(e$);
-        }
-        return m && m._cssText || '';
-      },
-
-      _cssFromStyles: function(styles) {
-        var cssText = '';
-        for (var i=0, l=styles.length, s; (i<l) && (s = styles[i]); i++) {
-          if (s && s.textContent) {
-            cssText += 
-              Polymer.ResolveUrl.resolveCss(s.textContent, s.ownerDocument);
+          var e$ = Array.prototype.slice.call(
+            m.querySelectorAll(STYLES_SELECTOR));
+          for (var i=0, e; i < e$.length; i++) {
+            e = e$[i];
+            // style elements inside dom-modules will apply to the main document
+            // we don't want this, so we remove them here.
+            if (e.localName === 'style') {
+              // get style element applied to main doc via HTMLImports polyfill
+              e = e.__appliedElement || e;
+              e.parentNode.removeChild(e);
+            // it's an import, assume this is a text file of css content.
+            } else {
+              e = e.import && e.import.body;
+            }
+            // adjust paths in css.
+            if (e) {
+              cssText += 
+                Polymer.ResolveUrl.resolveCss(e.textContent, e.ownerDocument);
+            }
           }
+          m._cssText = cssText;
         }
-        return cssText;
-      },
-
-      _unapplyStyles: function(styles) {
-        for (var i=0, l=styles.length, s; (i<l) && (s = styles[i]); i++) {
-          s = s.__appliedElement || s;
-          s.parentNode.removeChild(s);
-        }
+        return m && m._cssText || '';
       },
 
       _transformStyles: function(styles, callback) {
@@ -188,7 +184,7 @@
 
     });
 
-    var REMOTE_SHEET_SELECTOR = 'link[rel=import][type~=css]';
+    var STYLES_SELECTOR = 'style, link[rel=import][type~=css]';
 
   })();
 

test/unit/styling-remote-elements.html

@@ -1,3 +1,22 @@
+<dom-module id="x-order">
+  <link rel="import" type="css" href="styling-remote-sheet.css">
+  <style>
+    :host {
+      margin: 10px;
+    }
+
+    .border {
+      border: 10px solid seagreen;
+    }
+  </style>
+  <template>
+    <div id="me" class="border">border should be 10px</div>
+  </template>
+  <script>
+    Polymer({is: 'x-order'});
+  </script>
+</dom-module>
+
 <dom-module id="x-child">
   <template>
     <div id="simple">simple</div>

test/unit/styling-remote-sheet.css

@@ -18,3 +18,7 @@
 .computed {
   border: 15px solid orange;
 }
+
+.border {
+  border: 1px solid red;
+}

test/unit/styling-remote.html

@@ -38,6 +38,8 @@
 
   <x-dynamic-scope></x-dynamic-scope>
 
+  <x-order></x-order>
+
 <script>
   suite('scoped-styling', function() {
 
@@ -166,7 +168,13 @@
     assertComputed(b, '18px');
   });
 
-  if (window.Polymer && !Polymer.Settings.useNativeShadow) {
+  test('styles ordered correctly when remote and static resources are mixed', function() {
+    var order = document.querySelector('x-order');
+    assertComputed(order.$.me, '10px');
+  });
+
+  // weird check allows testing under HTMLImports polyfill
+  if (!window.Polymer || !Polymer.Settings.useNativeShadow) {
 
     suite('scoped-styling-shady-only', function() {
 
@@ -176,7 +184,7 @@
 
       test('styles shimmed in registration order', function() {
         var s$ = document.head.querySelectorAll('style[scope]');
-        var expected = ['x-child2', 'x-styled', 'x-button', 'x-dynamic-scope'];
+        var expected = ['x-order', 'x-child2', 'x-styled', 'x-button', 'x-dynamic-scope'];
         var actual = [];
         for (var i=0; i<s$.length; i++) {
           actual.push(s$[i].getAttribute('scope'));