diff --git a/example/package.json b/example/package.json index e7268a8..a03202e 100644 --- a/example/package.json +++ b/example/package.json @@ -1,7 +1,7 @@ { "name": "dumi-theme-yunti-example", "scripts": { - "bp": "PREVIEW=true dumi build && dumi preview", + "bp": "PREVIEW=true npm run build:no-compress && npm run preview", "build": "dumi build", "build:analyze": "ANALYZE=1 dumi build", "build:no-compress": "COMPRESS=none dumi build", diff --git a/package.json b/package.json index 8ac4658..952880e 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ }, "dependencies": { "@ant-design/cssinjs": "^1.21.0", - "@emotion/css": "^11.13.0", "@emotion/server": "^11.11.0", "@floating-ui/react": "^0.26.17", "ahooks": "^3.8.0", @@ -91,6 +90,7 @@ "antd-style": "^3.6.2", "clean-pkg-json": "^1.2.0", "commitlint": "^18", + "dumi": "^2.4.7", "dumi-assets-types": "^2.3.0", "eslint": "^8.57.0", "father": "4.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7f09524..a677f12 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,9 +32,6 @@ importers: chalk: specifier: ^4.1.2 version: 4.1.2 - dumi: - specifier: ^2.4 - version: 2.4.6(@babel/core@7.24.9)(@swc/helpers@0.5.1)(@types/node@20.14.12)(@types/react@18.3.3)(eslint@8.57.0)(lightningcss@1.22.1)(prettier@3.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.5.4))(terser@5.31.3)(type-fest@4.23.0)(typescript@5.5.4)(webpack@5.93.0) fast-deep-equal: specifier: ^3.1.3 version: 3.1.3 @@ -93,6 +90,9 @@ importers: commitlint: specifier: ^18 version: 18.6.1(@types/node@20.14.12)(typescript@5.5.4) + dumi: + specifier: ^2.4.7 + version: 2.4.7(@babel/core@7.24.9)(@swc/helpers@0.5.1)(@types/node@20.14.12)(@types/react@18.3.3)(eslint@8.57.0)(lightningcss@1.22.1)(prettier@3.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.5.4))(terser@5.31.3)(type-fest@4.23.0)(typescript@5.5.4)(webpack@5.93.0) dumi-assets-types: specifier: ^2.3.0 version: 2.3.0 @@ -4148,8 +4148,8 @@ packages: dumi-assets-types@2.3.0: resolution: {integrity: sha512-mM6UoGTgTNoo8lA4dwaIwoeSGT+4PeQeiFylr2+kCB5z3/7NEf7lIM4tqrAsEyzecE/HX0+w7Z78hnFZQ9k5vQ==} - dumi@2.4.6: - resolution: {integrity: sha512-ly8Z8CwKoNvqqqzCXLtXPv7MECU3HgtGuc4r80FQ2O2/1IVmzI7gREfGGebohSnvuZTpGQx00XYFD2qbBuaziA==} + dumi@2.4.7: + resolution: {integrity: sha512-JkBq0/YxVjQkI4CA0dV8LucZ5xeTryXB+yjuMAFyK5jGEqbA7OFYkBXLfvaX5Fv960xkmB2xqp1K8YATGejxcQ==} hasBin: true peerDependencies: react: '>=16.8' @@ -15357,7 +15357,7 @@ snapshots: dumi-assets-types@2.3.0: {} - dumi@2.4.6(@babel/core@7.24.9)(@swc/helpers@0.5.1)(@types/node@20.14.12)(@types/react@18.3.3)(eslint@8.57.0)(lightningcss@1.22.1)(prettier@3.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.5.4))(terser@5.31.3)(type-fest@4.23.0)(typescript@5.5.4)(webpack@5.93.0): + dumi@2.4.7(@babel/core@7.24.9)(@swc/helpers@0.5.1)(@types/node@20.14.12)(@types/react@18.3.3)(eslint@8.57.0)(lightningcss@1.22.1)(prettier@3.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@3.29.4)(stylelint@15.11.0(typescript@5.5.4))(terser@5.31.3)(type-fest@4.23.0)(typescript@5.5.4)(webpack@5.93.0): dependencies: '@ant-design/icons-svg': 4.4.2 '@makotot/ghostui': 2.0.0(react@18.3.1) diff --git a/src/layouts/GlobalLayout.tsx b/src/layouts/GlobalLayout.tsx index 0147d99..e304d21 100644 --- a/src/layouts/GlobalLayout.tsx +++ b/src/layouts/GlobalLayout.tsx @@ -1,3 +1,4 @@ +// import { isBrowser } from '@/utils'; import { StyleProvider, createCache, @@ -11,12 +12,9 @@ import { useLocation, useOutlet, useServerInsertedHTML } from 'dumi'; import type { FC } from 'react'; import React from 'react'; -import { useAdditionalThemeConfig } from '../hooks/useAdditionalThemeConfig'; - const GlobalLayout: FC = () => { const { pathname } = useLocation(); const outlet = useOutlet(); - const { ssr } = useAdditionalThemeConfig(); const [styleCache] = React.useState(() => createCache()); useServerInsertedHTML(() => { @@ -52,9 +50,9 @@ const GlobalLayout: FC = () => { content = {outlet}; } - if (ssr) { - (global as any).styleCache = styleCache; - } + // if (!isBrowser) { + // (global as any).styleCache = styleCache; + // } return ( { + const result = createEmotionServer(cache).extractCritical(html); + if (!result.css) { + return null; + } + + const { css, ids } = result; + + return { + key: cache.key, + css, + ids, + tag: ``, + }; + }); + return styles.filter(Boolean); +} + const SSRPlugin = (api: IApi) => { + // const ssrCssFileName = `ssr-${Date.now()}.css`; + // api.describe({ // key: '@', // }); @@ -28,13 +52,6 @@ const SSRPlugin = (api: IApi) => { api.logger.info('detect ssr config, when building html will extract css.'); // add ssr css file to html - api.modifyConfig(memo => { - // 将 .dumrc 中 ssr 配置注入 themeConfig 中，便于页面获取 - memo.themeConfig.ssr = memo.ssr; - - return memo; - }); - const writeCSSFile = (key: string, hashKey: string, cssString: string) => { const fileName = `ssr-${key}.${getHash(hashKey)}.css`; @@ -60,18 +77,20 @@ const SSRPlugin = (api: IApi) => { .filter(f => !f.path.includes(':')) .map(file => { - const antdCache = (global as any).__ANTD_CACHE__; + // const antdCache = (global as any).__ANTD_CACHE__; + // const styles = extractStaticStyle(file.content, { antdCache }); - const styles = extractStaticStyle(file.content, { antdCache }); + // 1. 提取 antd-style 样式 + const styles = extractEmotionStyle(file.content); for (const result of styles) { api.logger.event( - `${chalk.yellow(file.path)} include ${chalk.blue`[${result.key}]`} ${chalk.yellow( - result.ids.length + `${chalk.yellow(file.path)} include ${chalk.blue`[${result!.key}]`} ${chalk.yellow( + result!.ids.length )} styles` ); - const cssFile = writeCSSFile(result.key, result.ids.join(''), result.css); + const cssFile = writeCSSFile(result!.key, result!.ids.join(''), result!.css); file.content = addLinkStyle(file.content, cssFile); } @@ -79,6 +98,14 @@ const SSRPlugin = (api: IApi) => { return file; }) ); + + // add ssr css file to html + api.modifyConfig(memo => { + memo.styles ??= []; + // memo.styles.push(`/${ssrCssFileName}`); + + return memo; + }); }; export default SSRPlugin;