imported css modules should always be before element's styles

This is still slightly different from 1.x, which used ordering, but most `<link rel="import" type="css">` style imports came before the template. Fixes #4770
Polymer · Aug 7, 2017 · 679a49e · 679a49e
1 parent b9c3688
commit 679a49e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 deletions.
diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
@@ -416,8 +416,8 @@
     function finalizeTemplate(proto, template, baseURI, is, ext) {
       // support `include="module-name"`
       let cssText =
-        Polymer.StyleGather.cssFromTemplate(template, baseURI) +
-        Polymer.StyleGather.cssFromModuleImports(is);
+        Polymer.StyleGather.cssFromModuleImports(is) +
+        Polymer.StyleGather.cssFromTemplate(template, baseURI);
       if (cssText) {
         let style = document.createElement('style');
         style.textContent = cssText;

diff --git a/lib/utils/style-gather.html b/lib/utils/style-gather.html
@@ -70,14 +70,13 @@
     cssFromModule(moduleId) {
       let m = importModule(moduleId);
       if (m && m._cssText === undefined) {
-        let cssText = '';
+        // module imports: <link rel="import" type="css">
+        let cssText = this._cssFromModuleImports(m);
         // include css from the first template in the module
         let t = m.querySelector('template');
         if (t) {
-          cssText += this.cssFromTemplate(t, /** @type {templateWithAssetPath }*/(m).assetpath);
+          cssText += this.cssFromTemplate(t, /** @type {templateWithAssetPath} */(m).assetpath);
         }
-        // module imports: <link rel="import" type="css">
-        cssText += this.cssFromModuleImports(moduleId);
         m._cssText = cssText || null;
       }
       if (!m) {
@@ -126,12 +125,18 @@
      * @this {StyleGather}
      */
     cssFromModuleImports(moduleId) {
-      let cssText = '';
       let m = importModule(moduleId);
-      if (!m) {
-        return cssText;
-      }
-      let p$ = m.querySelectorAll(MODULE_STYLE_LINK_SELECTOR);
+      return m ? this._cssFromModuleImports(m) : '';
+    },
+    /**
+     * @memberof Polymer.StyleGather
+     * @this {StyleGather}
+     * @param {!HTMLElement} module dom-module element that could contain `<link rel="import" type="css">` styles
+     * @return {string} Concatenated CSS content from links in the dom-module
+     */
+    _cssFromModuleImports(module) {
+      let cssText = '';
+      let p$ = module.querySelectorAll(MODULE_STYLE_LINK_SELECTOR);
       for (let i=0; i < p$.length; i++) {
         let p = p$[i];
         if (p.import) {

diff --git a/test/unit/styling-import.html b/test/unit/styling-import.html
@@ -52,6 +52,23 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-import-order">
+    <link rel="import" type="css" href="styling-import2.css">
+    <template>
+      <style>
+        #two {
+          border: 1px solid black;
+        }
+      </style>
+      <div id="two"></div>
+    </template>
+    <script>
+      HTMLImports.whenReady(function() {
+        Polymer({is: 'x-import-order'});
+      })
+    </script>
+  </dom-module>
+
 
 <script>
   suite('style-imports', function() {
@@ -85,6 +102,14 @@
 
   });
 
+  test('styles included via link rel="import" type="css" are overridden by styles in template', function() {
+    var el = document.createElement('x-import-order');
+    document.body.appendChild(el);
+    Polymer.flush();
+    assertComputed(el.$.two, '1px');
+    document.body.removeChild(el);
+  });
+
 });
 
 </script>