Merge pull request #5154 from Polymer/deduplicate-style-includes

Deduplicate style includes
Polymer · Mar 16, 2018 · 4f660e0 · 4f660e0
2 parents 4629933 + 33d2e1a
commit 4f660e0
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git a/lib/utils/style-gather.html b/lib/utils/style-gather.html
@@ -123,7 +123,9 @@
           // other dom-modules that contain styling
           let include = e.getAttribute(INCLUDE_ATTR);
           if (include) {
-            styles.push(...this.stylesFromModules(include));
+            styles.push(...this.stylesFromModules(include).filter(function(item, index, self) {
+              return self.indexOf(item) === index;
+            }));
           }
           if (baseURI) {
             e.textContent = Polymer.ResolveUrl.resolveCss(e.textContent, baseURI);

diff --git a/test/unit/styling-scoped.html b/test/unit/styling-scoped.html
@@ -729,6 +729,37 @@
     </script>
   </dom-module>
 
+  <dom-module id="double-shared-style">
+    <template>
+      <style>
+        .double-shared-style {
+          color: green;
+        }
+      </style>
+    </template>
+  </dom-module>
+
+  <dom-module id="importing-double-shared-style">
+    <template>
+      <style include="double-shared-style">
+      </style>
+    </template>
+  </dom-module>
+
+  <dom-module id="double-shared-styling-element">
+    <template>
+      <style include="importing-double-shared-style double-shared-style"></style>
+    </template>
+    <script>
+    HTMLImports.whenReady(() => {
+      class DoubleSharedStylingElement extends Polymer.Element {
+        static get is() { return 'double-shared-styling-element'; }
+      }
+      customElements.define(DoubleSharedStylingElement.is, DoubleSharedStylingElement);
+    });
+    </script>
+  </dom-module>
+
 <script>
 (function() {
   function assertComputed(element, value, property, pseudo) {
@@ -1012,6 +1043,38 @@
 
   });
 
+  suite('double including style sheets', function() {
+    let el;
+
+    setup(function() {
+      el = document.createElement('double-shared-styling-element');
+      document.body.appendChild(el);
+    });
+
+    teardown(function() {
+      document.body.removeChild(el);
+    });
+
+    test('only includes style modules once', function() {
+      const style = el.shadowRoot.querySelector('style');
+
+      // We cant use the regular "does a sub-node have the correct style",
+      // because we actually need to assert on the actual style content.
+      // In native shadow dom, the style element resides in the shadowRoot,
+      // but in shadyDOM it has moved to the head and the selector has been altered.
+      if (style) {
+        assert.equal(style.textContent, `.double-shared-style {
+  color: green;
+}`, 'There should be only one class selector in this style element');
+      } else {
+        assert.equal(document.head.querySelector('[scope="double-shared-styling-element"]').textContent,
+`.double-shared-style.double-shared-styling-element {
+  color: green;
+}`);
+      }
+    });
+  });
+
   if (window.ShadyDOM) {
 
     suite('scoped-styling-shady-only', function() {