✨ feat: try to remove @emotion/server to suit SSR in edge runtime

package.json

@@ -75,7 +75,6 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/serialize": "^1.1.3",
-    "@emotion/server": "^11.11.0",
     "@emotion/utils": "^1.2.1",
     "use-merge-value": "^1.2.0"
   },

src/functions/extractStaticStyle.tsx

@@ -3,6 +3,8 @@ import CacheEntity from '@ant-design/cssinjs/es/Cache';
 import { EmotionCache } from '@emotion/css/create-instance';
 import { version } from 'antd';
 
+import { createExtractCritical } from '@/utils/createEmotionServer';
+
 const createExtractCriticalWithoutHtml = (cache: EmotionCache) => ({
   ids: Object.keys(cache.inserted),
   css: Object.values(cache.inserted)
@@ -81,11 +83,11 @@ export const extractStaticStyle = (html?: string, options?: ExtractStyleOptions)
   // copy from emotion ssr
   // https://github.com/vercel/next.js/blob/deprecated-main/examples/with-emotion-vanilla/pages/_document.js
   const styles = global.__ANTD_STYLE_CACHE_MANAGER_FOR_SSR__.getCacheList().map((cache) => {
-    const createEmotionServer = require('@emotion/server/create-instance').default;
+    const extractHtml = createExtractCritical(cache);
 
     const result: { ids: string[]; css: string } = !html
       ? createExtractCriticalWithoutHtml(cache)
-      : createEmotionServer(cache).extractCritical(html);
+      : extractHtml(html);
 
     if (!result.css) return null;
 

src/utils/createEmotionServer/index.ts

@@ -0,0 +1,49 @@
+// copy from
+// https://github.com/emotion-js/emotion/blob/main/packages/server/src/create-instance/extract-critical.js
+
+import { EmotionCache } from '@emotion/utils';
+
+export const createExtractCritical = (cache: EmotionCache) => {
+  if (cache.compat !== true) {
+    // is this good? should we do this automatically?
+    // this is only for when using the new apis (not emotion or create-emotion)
+    cache.compat = true;
+  }
+
+  return (html: string) => {
+    // parse out ids from html
+    // reconstruct css/rules/cache to pass
+    let RGX = new RegExp(cache.key + '-([a-zA-Z0-9-_]+)', 'gm');
+    let o: {
+      html: string;
+      ids: string[];
+      css: string;
+    } = {
+      html: html,
+      ids: [],
+      css: '',
+    };
+    let match;
+    let ids: Record<string, boolean> = {};
+
+    while ((match = RGX.exec(html)) !== null) {
+      if (ids[match[1]] === undefined) {
+        ids[match[1]] = true;
+      }
+    }
+
+    o.ids = Object.keys(cache.inserted).filter((id) => {
+      if (
+        (ids[id] !== undefined || cache.registered[cache.key + '-' + id] === undefined) &&
+        cache.inserted[id] !== true
+      ) {
+        o.css += cache.inserted[id];
+        return true;
+      }
+
+      return false;
+    });
+
+    return o;
+  };
+};