Deduplicate style includes

Polymer · Mar 16, 2018 · acfef71 · acfef71
1 parent 4629933
commit acfef71
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/lib/utils/style-gather.html b/lib/utils/style-gather.html
@@ -123,7 +123,7 @@
           // other dom-modules that contain styling
           let include = e.getAttribute(INCLUDE_ATTR);
           if (include) {
-            styles.push(...this.stylesFromModules(include));
+            styles.push(...new Set(this.stylesFromModules(include)));
           }
           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>
+    addEventListener('WebComponentsReady', () => {
+      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,25 @@
 
   });
 
+  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() {
+      assert.equal(el.shadowRoot.querySelector('style').textContent, `.double-shared-style {
+  color: green;
+}`, 'There should be only one class selector in this style element');
+    });
+  });
+
   if (window.ShadyDOM) {
 
     suite('scoped-styling-shady-only', function() {