fix: only apply same styles once per root

vaadin · Sep 3, 2021 · 0a3f0b7 · 0a3f0b7
1 parent 4c4bd79
commit 0a3f0b7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 32 deletions.
diff --git a/packages/field-base/src/slot-styles-mixin.js b/packages/field-base/src/slot-styles-mixin.js
@@ -9,36 +9,22 @@ const stylesMap = new WeakMap();
  */
 function getRootStyles(root) {
   if (!stylesMap.has(root)) {
-    stylesMap.set(root, []);
+    stylesMap.set(root, {});
   }
 
   return stylesMap.get(root);
 }
 
-/**
- * Detect if styles have been already inserted to root.
- * @param {string} styles
- * @param {DocumentOrShadowRoot} root
- * @return {boolean}
- */
-function hasStyles(styles, root) {
-  return getRootStyles(root).includes(styles);
-}
-
 /**
  * Insert styles into the root.
  * @param {string} css
  * @param {DocumentOrShadowRoot} root
  */
 function insertStyles(styles, root) {
-  if (!styles || (styles && hasStyles(styles, root))) {
-    return;
-  }
-
   const rootNode = root === document ? document.head : root;
   const style = document.createElement('style');
-  style.appendChild(document.createTextNode(styles));
-  rootNode.appendChild(style);
+  style.textContent = styles;
+  rootNode.insertBefore(style, rootNode.firstChild);
 }
 
 const SlotStylesMixinImplementation = (superclass) =>
@@ -61,23 +47,24 @@ const SlotStylesMixinImplementation = (superclass) =>
     /** @private */
     __gatherSlotStyles() {
       if (!this.__slotStyles) {
-        let styles = '';
-
-        Object.keys(this.slotStyles).forEach((styleName) => {
-          styles += this.slotStyles[styleName];
-        });
-
-        this.__slotStyles = styles;
+        this.__slotStyles = Object.entries(this.slotStyles);
       }
 
       return this.__slotStyles;
     }
 
     /** @private */
     __applySlotStyles() {
-      const styles = this.__gatherSlotStyles();
-
-      insertStyles(styles, this.getRootNode());
+      const root = this.getRootNode();
+      const rootStyles = getRootStyles(root);
+      const slotStyles = this.__gatherSlotStyles();
+
+      slotStyles.forEach(([id, styles]) => {
+        if (!rootStyles[id]) {
+          insertStyles(styles, root);
+          rootStyles[id] = styles;
+        }
+      });
     }
   };
 

diff --git a/packages/field-base/test/slot-styles-mixin.test.js b/packages/field-base/test/slot-styles-mixin.test.js
@@ -27,11 +27,13 @@ describe('slot-styles-mixin', () => {
         }
 
         get slotStyles() {
-          return `
-            button[slot='button'] {
-              color: ${COLOR};
-            }
-          `;
+          return {
+            button: `
+              button[slot='button'] {
+                color: ${COLOR};
+              }
+            `
+          };
         }
       }
     );
@@ -53,6 +55,12 @@ describe('slot-styles-mixin', () => {
     expect(getComputedStyle(button).color).to.equal(COLOR);
   });
 
+  it('should only append styles with same ID once', () => {
+    const sibling = document.createElement('slot-styles-mixin-element');
+    element.parentNode.appendChild(sibling);
+    expect(wrapper.shadowRoot.querySelectorAll('style').length).to.equal(1);
+  });
+
   it('should append styles when moved to other shadow root', () => {
     const inner = document.createElement('div');
     inner.attachShadow({ mode: 'open' });