🔨 Create sheet singleton

danieldelcore · Oct 25, 2020 · c431c70 · c431c70
1 parent 41b98f4
commit c431c70
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/react/src/jsx.tsx b/packages/react/src/jsx.tsx
@@ -11,6 +11,12 @@ import React, {
 import { Collector, process, isBrowser } from '@trousers/core';
 import sheet from '@trousers/sheet';
 
+let styleSheet: ReturnType<typeof sheet> | null = null;
+if (isBrowser()) {
+    const headElement = document.getElementsByTagName('head')[0];
+    styleSheet = sheet(headElement, 'data-trousers');
+}
+
 const jsx = <
     Props extends {
         css: ReturnType<Collector>;
@@ -66,16 +72,16 @@ const jsx = <
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useLayoutEffect(() => {
-        const headElement = document.getElementsByTagName('head')[0];
-        const styleSheet = sheet(headElement, 'data-trousers');
-
         definitions
-            .filter(({ className }) => !styleSheet.has(className))
+            .filter(
+                ({ className }) =>
+                    styleSheet && !styleSheet.has(`.${className}`),
+            )
             .forEach(({ className, styles }) => {
-                Object.entries(
-                    process(`.${className}`, styles),
-                ).forEach(([key, value]) =>
-                    styleSheet.mount(key, `${key}{${value}}`, false),
+                Object.entries(process(`.${className}`, styles)).forEach(
+                    ([key, value]) =>
+                        styleSheet &&
+                        styleSheet.mount(key, `${key}{${value}}`, false),
                 );
             });
         // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/packages/sheet/src/sheet.ts b/packages/sheet/src/sheet.ts
@@ -38,6 +38,8 @@ const sheet = (targetEl: HTMLElement, attributeId: string) => {
 
     const mount = (id: string, styles: string, isGlobal?: boolean) => {
         // TODO: maybe a map isn't the best thing to use here
+        console.log('setting', id);
+
         styleMap.set(id, '');
 
         try {