From 706e602162d725a4e1d2489f3d57f66db584f9d0 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Tue, 12 Dec 2017 11:42:37 -0800
Subject: [PATCH 1/2] Fix regression with imported css

Fix case where `<link rel="import" type="css">` is the only styling for
an element

Fixes #4986
---
 lib/mixins/element-mixin.html |  4 +++-
 test/unit/styling-scoped.html | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
index 87c77db15e..9ed49774b1 100644
--- a/lib/mixins/element-mixin.html
+++ b/lib/mixins/element-mixin.html
@@ -255,7 +255,9 @@
       // ensure all gathered styles are actually in this template.
       for (let i=0; i < styles.length; i++) {
         let s = styles[i];
-        let templateStyle = templateStyles[templateStyleIndex];
+        // if no styles in the template, fall back to first element child of template
+        let templateStyle = templateStyles.length ?
+          templateStyles[templateStyleIndex] : template.content.firstElementChild;
         // if the style is not in this template, it's been "included" and
         // we put a clone of it in the template before the style that included it
         if (templateStyle !== s) {
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index 656a8ec119..ffbc4502b6 100644
--- a/test/unit/styling-scoped.html
+++ b/test/unit/styling-scoped.html
@@ -715,6 +715,21 @@
     </script>
   </dom-module>
 
+  <dom-module id="x-only-link-style">
+    <link rel="import" type="css" href="styling-import1.css">
+    <template>
+      <div id="one"></div>
+    </template>
+    <script>
+      addEventListener('WebComponentsReady', () => {
+        class XOnlyLink extends Polymer.Element {
+          static get is() { return 'x-only-link-style'; }
+        }
+        customElements.define(XOnlyLink.is, XOnlyLink);
+      });
+    </script>
+  </dom-module>
+
 <script>
 (function() {
   function assertComputed(element, value, property, pseudo) {
@@ -985,6 +1000,12 @@
       assertComputed(e, '5px', 'padding-top');
     });
 
+    test('elements without styles work', function() {
+      var e = document.createElement('x-only-link-style');
+      document.body.appendChild(e);
+      assertComputed(e.$.one, '1px');
+    });
+
   });
 
   if (window.ShadyDOM) {

From 2d6b4684491666832d1efe5e35aacb4fb571d2af Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Tue, 12 Dec 2017 16:52:51 -0800
Subject: [PATCH 2/2] Handle case where there are no elements in the template

Always put `<link rel="import" type="css">` styles at the top
---
 lib/mixins/element-mixin.html      | 19 ++++++++++++-------
 test/unit/styling-import-host.css  | 13 +++++++++++++
 test/unit/styling-import-host2.css | 13 +++++++++++++
 test/unit/styling-scoped.html      |  9 ++++-----
 4 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 test/unit/styling-import-host.css
 create mode 100644 test/unit/styling-import-host2.css

diff --git a/lib/mixins/element-mixin.html b/lib/mixins/element-mixin.html
index 9ed49774b1..fa983bddd6 100644
--- a/lib/mixins/element-mixin.html
+++ b/lib/mixins/element-mixin.html
@@ -247,17 +247,22 @@
      * @private
      */
     function processElementStyles(klass, template, is, baseURI) {
-      const styles = Polymer.StyleGather.stylesFromModuleImports(is).concat(
-        Polymer.StyleGather.stylesFromTemplate(template));
       const templateStyles = template.content.querySelectorAll('style');
+      const stylesWithImports = Polymer.StyleGather.stylesFromTemplate(template);
+      // insert styles from <link rel="import" type="css"> at the top of the template
+      const linkedStyles = Polymer.StyleGather.stylesFromModuleImports(is);
+      const firstTemplateChild = template.content.firstElementChild;
+      for (let idx = 0; idx < linkedStyles.length; idx++) {
+        let s = linkedStyles[idx];
+        s.textContent = klass._processStyleText(s.textContent, baseURI);
+        template.content.insertBefore(s, firstTemplateChild);
+      }
       // keep track of the last "concrete" style in the template we have encountered
       let templateStyleIndex = 0;
       // ensure all gathered styles are actually in this template.
-      for (let i=0; i < styles.length; i++) {
-        let s = styles[i];
-        // if no styles in the template, fall back to first element child of template
-        let templateStyle = templateStyles.length ?
-          templateStyles[templateStyleIndex] : template.content.firstElementChild;
+      for (let i = 0; i < stylesWithImports.length; i++) {
+        let s = stylesWithImports[i];
+        let templateStyle = templateStyles[templateStyleIndex];
         // if the style is not in this template, it's been "included" and
         // we put a clone of it in the template before the style that included it
         if (templateStyle !== s) {
diff --git a/test/unit/styling-import-host.css b/test/unit/styling-import-host.css
new file mode 100644
index 0000000000..7fd9e04f4f
--- /dev/null
+++ b/test/unit/styling-import-host.css
@@ -0,0 +1,13 @@
+/*
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+:host {
+  display: block;
+  border: 1px solid black;
+}
\ No newline at end of file
diff --git a/test/unit/styling-import-host2.css b/test/unit/styling-import-host2.css
new file mode 100644
index 0000000000..bfbf139940
--- /dev/null
+++ b/test/unit/styling-import-host2.css
@@ -0,0 +1,13 @@
+/*
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+:host {
+  display: block;
+  border: 2px solid black;
+}
\ No newline at end of file
diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
index ffbc4502b6..6e6d5c5edc 100644
--- a/test/unit/styling-scoped.html
+++ b/test/unit/styling-scoped.html
@@ -716,10 +716,9 @@
   </dom-module>
 
   <dom-module id="x-only-link-style">
-    <link rel="import" type="css" href="styling-import1.css">
-    <template>
-      <div id="one"></div>
-    </template>
+    <link rel="import" type="css" href="styling-import-host.css">
+    <link rel="import" type="css" href="styling-import-host2.css">
+    <template></template>
     <script>
       addEventListener('WebComponentsReady', () => {
         class XOnlyLink extends Polymer.Element {
@@ -1003,7 +1002,7 @@
     test('elements without styles work', function() {
       var e = document.createElement('x-only-link-style');
       document.body.appendChild(e);
-      assertComputed(e.$.one, '1px');
+      assertComputed(e, '2px');
     });
 
   });