Skip to content

Commit

Permalink
✨ feat: remove @emotion/server to adapt SSR in edge runtime (#169)
Browse files Browse the repository at this point in the history
  • Loading branch information
arvinxx authored Sep 28, 2024
1 parent 97f1121 commit 3a6b86c
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 11 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Changelog

# [3.7.0-beta.1](https://github.com/ant-design/antd-style/compare/v3.6.3...v3.7.0-beta.1) (2024-09-27)

### ✨ Features

- Try to remove @emotion/server to suit SSR in edge runtime ([a7d0394](https://github.com/ant-design/antd-style/commit/a7d0394))

## [3.6.3](https://github.com/ant-design/antd-style/compare/v3.6.2...v3.6.3) (2024-09-12)

### 🐛 Bug Fixes
Expand Down
13 changes: 6 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "antd-style",
"version": "3.6.3",
"version": "3.7.0-beta.1",
"description": "css-in-js solution for application combine with antd v5 token system and emotion",
"keywords": [
"antd",
Expand Down Expand Up @@ -69,18 +69,17 @@
]
},
"dependencies": {
"@ant-design/cssinjs": "^1.18.5",
"@ant-design/cssinjs": "^1.21.1",
"@babel/runtime": "^7.24.1",
"@emotion/cache": "^11.11.0",
"@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"
},
"devDependencies": {
"@ant-design/icons": "^5.3.5",
"@ant-design/icons": "^5.5.1",
"@commitlint/cli": "^17.8.1",
"@emotion/jest": "^11.11.0",
"@emotion/styled": "^11.11.0",
Expand All @@ -97,16 +96,16 @@
"@types/testing-library__jest-dom": "^5.14.9",
"@umijs/lint": "^4.1.5",
"@vitest/coverage-v8": "0.34.6",
"antd": "^5.15.3",
"antd": "^5.21.1",
"babel-plugin-antd-style": "^1.0.4",
"chalk": "^4.1.2",
"classnames": "^2.5.1",
"commitlint": "^17.8.1",
"commitlint-config-gitmoji": "^2.3.1",
"concurrently": "^7.6.0",
"cross-env": "^7.0.3",
"dumi": "^2.2.17",
"dumi-theme-antd-style": "latest",
"dumi": "^2.4.12",
"dumi-theme-antd-style": "^0.31.1",
"eslint": "^8.57.0",
"father": "^4.4.0",
"framer-motion": "^8.5.5",
Expand Down
6 changes: 4 additions & 2 deletions src/functions/extractStaticStyle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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;

Expand Down
49 changes: 49 additions & 0 deletions src/utils/createEmotionServer/index.ts
Original file line number Diff line number Diff line change
@@ -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;
};
};
2 changes: 1 addition & 1 deletion tests/functions/__snapshots__/createInstance.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`createInstance > 自定义 prefixCls 时,会采用 instance 的 prefi
}
<button
class="cp-btn cp-btn-default emotion-0"
class="cp-btn cp-btn-default cp-btn-color-default cp-btn-variant-outlined emotion-0"
type="button"
>
<span
Expand Down
2 changes: 1 addition & 1 deletion tests/functions/__snapshots__/createStyles.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ exports[`createStyles > styles 对象的使用 > createStyleFn 通过函数方
}
<button
class="cp-btn cp-btn-default emotion-0"
class="cp-btn cp-btn-default cp-btn-color-default cp-btn-variant-outlined emotion-0"
type="button"
>
<span
Expand Down

0 comments on commit 3a6b86c

Please sign in to comment.