Merge pull request #183 from garronej/issue_182

Issue 182
garronej · Jul 14, 2023 · 374c300 · 374c300
2 parents 07a7c83 + 1504d7a
commit 374c300
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "tss-react",
-    "version": "4.8.6",
+    "version": "4.8.7-rc.0",
     "description": "Type safe CSS-in-JS API heavily inspired by react-jss",
     "repository": {
         "type": "git",

diff --git a/src/next/appDir.tsx b/src/next/appDir.tsx
@@ -29,11 +29,14 @@ export function NextAppDirEmotionCacheProvider(
         const cache = createCache(options);
         cache.compat = true;
         const prevInsert = cache.insert;
-        let inserted: string[] = [];
+        let inserted: { name: string; isGlobal: boolean }[] = [];
         cache.insert = (...args) => {
-            const serialized = args[1];
+            const [selector, serialized] = args;
             if (cache.inserted[serialized.name] === undefined) {
-                inserted.push(serialized.name);
+                inserted.push({
+                    "name": serialized.name,
+                    "isGlobal": selector === ""
+                });
             }
             return prevInsert(...args);
         };
@@ -46,20 +49,48 @@ export function NextAppDirEmotionCacheProvider(
     });
 
     useServerInsertedHTML(() => {
-        const names = flush();
-        if (names.length === 0) return null;
+        const inserted = flush();
+        if (inserted.length === 0) {
+            return null;
+        }
         let styles = "";
-        for (const name of names) {
-            styles += cache.inserted[name];
+        let dataEmotionAttribute = `${cache.key}`;
+        let globalStyles = "";
+        let globalDataEmotionAttribute = `${cache.key}-global`;
+
+        for (const { name, isGlobal } of inserted) {
+            const style = cache.inserted[name];
+
+            if (isGlobal) {
+                globalStyles += style;
+                globalDataEmotionAttribute += ` ${name}`;
+            } else {
+                styles += style;
+                dataEmotionAttribute += ` ${name}`;
+            }
         }
+
         return (
-            <style
-                key={cache.key}
-                data-emotion={`${cache.key} ${names.join(" ")}`}
-                dangerouslySetInnerHTML={{
-                    "__html": styles
-                }}
-            />
+            <>
+                {globalStyles !== "" && (
+                    <style
+                        key={`${cache.key}-global`}
+                        data-emotion={globalDataEmotionAttribute}
+                        dangerouslySetInnerHTML={{
+                            "__html": globalStyles
+                        }}
+                    />
+                )}
+                {styles !== "" && (
+                    <style
+                        key={cache.key}
+                        data-emotion={dataEmotionAttribute}
+                        dangerouslySetInnerHTML={{
+                            "__html": styles
+                        }}
+                    />
+                )}
+            </>
         );
     });