antd: generate css files

apps/web/pages/_document.jsx

@@ -2,28 +2,34 @@
 import { metaFavicon } from '@/config/meta';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
+import { createCache, doExtraStyle, StyleProvider } from 'ui/tools';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    const sheet = new ServerStyleSheet();
+    const cache = createCache();
+    let fileName = '';
     const originalRenderPage = ctx.renderPage;
+    const sheet = new ServerStyleSheet();
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+          enhanceApp: (App) => (props) =>
+            <StyleProvider cache={cache}>{sheet.collectStyles(<App {...props} />)}</StyleProvider>,
         });
 
       const initialProps = await Document.getInitialProps(ctx);
+      fileName = doExtraStyle({
+        cache,
+      });
 
       return {
         ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        ),
+        styles: [
+          initialProps.styles,
+          sheet.getStyleElement(),
+          fileName && <link rel="stylesheet" href={`/${fileName}`} />,
+        ],
       };
     } finally {
       sheet.seal();

packages/ui/package.json

@@ -19,6 +19,7 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.10.1",
     "@ant-design/icons": "^5.1.4",
     "antd": "^5.6.3",
     "rebass": "^4.0.7",

packages/ui/tools.ts

@@ -0,0 +1,42 @@
+import { extractStyle } from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/lib/Cache';
+import { createHash } from 'crypto';
+import fs from 'fs';
+import path from 'path';
+
+export type DoExtraStyleOptions = {
+  baseFileName?: string;
+  cache: Entity;
+  dir?: string;
+};
+export function doExtraStyle({
+  cache,
+  dir = 'antd-output',
+  baseFileName = 'antd.min',
+}: DoExtraStyleOptions) {
+  const baseDir = path.resolve(__dirname, '../../static/css');
+
+  const outputCssPath = path.join(baseDir, dir);
+
+  if (!fs.existsSync(outputCssPath)) {
+    fs.mkdirSync(outputCssPath, { recursive: true });
+  }
+
+  const css = extractStyle(cache, true);
+  if (!css) return '';
+
+  const md5 = createHash('md5');
+  const hash = md5.update(css).digest('hex');
+  const fileName = `${baseFileName}.${hash.slice(0, 8)}.css`;
+  const fullpath = path.join(outputCssPath, fileName);
+
+  const res = `_next/static/css/${dir}/${fileName}`;
+
+  if (fs.existsSync(fullpath)) return res;
+
+  fs.writeFileSync(fullpath, css);
+
+  return res;
+}
+
+export { createCache, StyleProvider } from '@ant-design/cssinjs';