🐛 Registry no longer remounts style tags on every register.

danieldelcore · Jun 16, 2020 · 635f6fc · 635f6fc
1 parent c4eed6e
commit 635f6fc
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 33 deletions.
diff --git a/.changeset/metal-pigs-train.md b/.changeset/metal-pigs-train.md
@@ -0,0 +1,5 @@
+---
+'@trousers/registry': patch
+---
+
+Registry no longer remounts style tags on every register. Fixes an issue with prod-mode where styles registered from the same component are overridden
diff --git a/examples/Performance.tsx b/examples/Performance.tsx
@@ -101,7 +101,7 @@ storiesOf('Performance', module)
             return <div className={classNames}>{props.children}</div>;
         };
 
-        const intToRGB = () => {
+        const intToColor = () => {
             const letters = '0123456789ABCDEF';
             let color = '#';
             for (let i = 0; i < 6; i++) {
@@ -112,8 +112,8 @@ storiesOf('Performance', module)
 
         return (
             <Fragment>
-                {[...Array(1000)].map((_, i) => (
-                    <Dot color={intToRGB()} key={i} />
+                {[...Array(500)].map((_, i) => (
+                    <Dot color={intToColor()} key={i} />
                 ))}
             </Fragment>
         );

diff --git a/packages/registry/src/registry.ts b/packages/registry/src/registry.ts
@@ -13,20 +13,15 @@ interface RegistryOptions {
 }
 
 const createStyleElement = (attributeId: string) => {
-    const element = document.createElement<'style'>('style');
+    const element = document.createElement('style');
     element.setAttribute(attributeId, '');
     element.setAttribute('type', 'text/css');
     element.appendChild(document.createTextNode(''));
     return element;
 };
 
-const getStyleElement = (targetElement: HTMLElement, attributeId: string) => {
-    const element = targetElement.querySelector<HTMLStyleElement>(
-        `style[${attributeId}]`,
-    );
-
-    return !!element ? element : createStyleElement(attributeId);
-};
+const getStyleElement = (targetElement: HTMLElement, attributeId: string) =>
+    targetElement.querySelector<HTMLStyleElement>(`style[${attributeId}]`);
 
 const getSheet = (tag: HTMLStyleElement): CSSStyleSheet => {
     if (tag.sheet) {
@@ -52,24 +47,26 @@ const registry = (
         appendBefore: undefined,
     },
 ): Registry => {
-    const styleElement = options.forceNewNode
-        ? createStyleElement(attributeId)
-        : getStyleElement(parentElement, attributeId);
-
-    if (!options.appendBefore) {
-        parentElement.appendChild(styleElement);
-    } else {
-        parentElement.insertBefore(
-            styleElement,
-            parentElement.querySelector<HTMLStyleElement>(
-                `style[${options.appendBefore}]`,
-            ),
-        );
+    let styleElement = getStyleElement(parentElement, attributeId);
+
+    if (styleElement === null || options.forceNewNode) {
+        styleElement = createStyleElement(attributeId);
+
+        if (!options.appendBefore) {
+            parentElement.appendChild(styleElement);
+        } else {
+            parentElement.insertBefore(
+                styleElement,
+                parentElement.querySelector<HTMLStyleElement>(
+                    `style[${options.appendBefore}]`,
+                ),
+            );
+        }
     }
 
-    const clear = () => styleElement.remove();
+    const clear = () => styleElement!.remove();
     const has = (id: string): boolean =>
-        styleElement.getAttribute(attributeId)!.includes(id);
+        styleElement!.getAttribute(attributeId)!.includes(id);
 
     const register = (id: string, styles: string, isGlobal?: boolean) => {
         if (has(id)) return;
@@ -79,13 +76,13 @@ const registry = (
 
         if (process.env.NODE_ENV === 'production') {
             try {
-                const sheet = getSheet(styleElement);
-                splitRules(processedStyles).forEach(styles =>
+                splitRules(processedStyles).forEach(styles => {
+                    const sheet = getSheet(styleElement!);
                     sheet.insertRule(
                         styles,
                         isGlobal ? 0 : sheet.cssRules.length,
-                    ),
-                );
+                    );
+                });
 
                 return;
             } catch (error) {
@@ -97,10 +94,13 @@ const registry = (
         }
 
         const styleNode = document.createTextNode(`${processedStyles}\n`);
-        const mountedStyles = styleElement.getAttribute(attributeId);
+        const mountedStyles = styleElement!.getAttribute(attributeId);
 
-        styleElement.appendChild(styleNode);
-        styleElement.setAttribute(attributeId, `${mountedStyles} ${id}`.trim());
+        styleElement!.appendChild(styleNode);
+        styleElement!.setAttribute(
+            attributeId,
+            `${mountedStyles} ${id}`.trim(),
+        );
     };
 
     return {