scripts: add antd generate css script

apps/web/.gitignore

@@ -1,3 +1,4 @@
 
 # Sentry Config File
 .sentryclirc
+/styles/antd.min.css

apps/web/Dockerfile

@@ -47,6 +47,7 @@ ARG URL_CORE_CALCULATE_DIRECT
 ARG URL_1C_TRANSTAX_DIRECT
 ARG URL_ELT_OSAGO_DIRECT
 ARG URL_ELT_KASKO_DIRECT
+RUN pnpm dotenv -v NODE_ENV=production -e .env turbo run prebuild --filter=web...
 RUN pnpm dotenv -e .env turbo run build --filter=web...
 
 FROM node:alpine AS runner

apps/web/package.json

@@ -4,7 +4,9 @@
   "private": true,
   "scripts": {
     "build": "next build",
+    "prebuild": "ts-node --project ./tsconfig.node.json ./scripts/generate-antd-css.ts",
     "dev": "next dev",
+    "predev": "ts-node --project ./tsconfig.node.json ./scripts/generate-antd-css.ts",
     "lint": "next lint",
     "lint:fix": "next lint -- --fix",
     "start": "next start",
@@ -60,6 +62,7 @@
     "msw": "^1.1.0",
     "shared": "workspace:*",
     "ts-jest": "^29.0.5",
+    "ts-node": "^10.9.1",
     "typescript": "^5.3.3"
   },
   "msw": {

apps/web/pages/_app.jsx

@@ -2,6 +2,7 @@ import 'normalize.css';
 import '../styles/fonts.css';
 import '../styles/globals.css';
 import '../styles/antd-fix.css';
+import '../styles/antd.min.css';
 import initializeQueryClient from '@/api/client';
 import initializeApollo from '@/apollo/client';
 import { Loading, Notification } from '@/Components/Common';

apps/web/pages/_document.jsx

@@ -1,38 +1,26 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */
 import { metaFavicon } from '@/config/meta';
-import { withBasePath } from '@/config/urls';
 import { PAGE_DESCRIPTION } from '@/constants/page';
 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 cache = createCache();
-    let fileName = '';
     const originalRenderPage = ctx.renderPage;
     const sheet = new ServerStyleSheet();
 
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-          enhanceApp: (App) => (props) =>
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
-            <StyleProvider cache={cache}>{sheet.collectStyles(<App {...props} />)}</StyleProvider>,
         });
 
       const initialProps = await Document.getInitialProps(ctx);
-      fileName = doExtraStyle({
-        cache,
-      });
 
       return {
         ...initialProps,
-        styles: [
+        styles: [initialProps.styles, sheet.getStyleElement()],
-          initialProps.styles,
-          sheet.getStyleElement(),
-          fileName && <link rel="stylesheet" href={withBasePath(`/${fileName}`)} />,
-        ],
       };
     } finally {
       sheet.seal();

apps/web/scripts/generate-antd-css.ts

@@ -0,0 +1,17 @@
+import withTheme from '../styles/theme';
+import fs from 'fs';
+import { extractStyle } from 'ui/tools';
+
+const outputPath = './styles/antd.min.css';
+
+// 1. default theme
+
+// const css = extractStyle();
+
+// 2. With custom theme
+
+const css = extractStyle(withTheme);
+
+fs.writeFileSync(outputPath, css);
+
+console.log(`🎉 Antd CSS generated at ${outputPath}`);

apps/web/styles/theme.tsx

@@ -0,0 +1,29 @@
+import envSchema from '../config/schema/env';
+import { COLORS_DEV, COLORS_PROD } from '../constants/colors';
+import { Config as AntdConfig } from 'ui/elements';
+
+const env = envSchema.parse(process.env);
+
+let colors = COLORS_DEV;
+if (env.USE_DEV_COLORS) {
+  colors = COLORS_DEV;
+} else {
+  colors = COLORS_PROD;
+}
+
+const withTheme = (node: JSX.Element) => (
+  <AntdConfig
+    theme={{
+      token: {
+        borderRadius: 2,
+        borderRadiusLG: 2,
+        colorLink: colors.COLOR_PRIMARY,
+        colorPrimary: colors.COLOR_PRIMARY,
+      },
+    }}
+  >
+    {node}
+  </AntdConfig>
+);
+
+export default withTheme;

apps/web/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "strictNullChecks": true,
+    "module": "NodeNext",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}

package.json

@@ -4,8 +4,10 @@
   "private": true,
   "scripts": {
     "build": "dotenv -e .env turbo run build",
+    "prebuild": "dotenv -v NODE_ENV=production -e .env turbo run prebuild",
     "clean": "turbo run clean",
     "dev": "dotenv -e .env.local turbo run dev",
+    "predev": "dotenv -e .env.local turbo run predev",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
     "lint": "dotenv -e .env.local turbo run lint",
     "lint:fix": "dotenv -e .env.local turbo run lint:fix",

packages/ui/package.json

@@ -8,6 +8,7 @@
     "lint": "TIMING=1 eslint \"**/*.ts*\""
   },
   "devDependencies": {
+    "@ant-design/static-style-extract": "^1.0.2",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/rebass": "^4.0.10",

packages/ui/tools.ts

@@ -1,42 +1 @@
-import { extractStyle } from '@ant-design/cssinjs';
+export { extractStyle } from '@ant-design/static-style-extract';
-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';

pnpm-lock.yaml

@@ -246,7 +246,7 @@ importers:
         version: 1.1.0
       jest:
         specifier: ^29.4.3
-        version: 29.7.0(@types/node@18.19.18)
+        version: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
       jest-environment-jsdom:
         specifier: ^29.3.1
         version: 29.7.0
@@ -259,6 +259,9 @@ importers:
       ts-jest:
         specifier: ^29.0.5
         version: 29.1.1(@babel/core@7.23.9)(jest@29.7.0)(typescript@5.3.3)
+      ts-node:
+        specifier: ^10.9.1
+        version: 10.9.2(@types/node@18.19.18)(typescript@5.3.3)
       typescript:
         specifier: ^5.3.3
         version: 5.3.3
@@ -310,6 +313,9 @@ importers:
         specifier: ^9.0.3
         version: 9.0.4(react@18.2.0)
     devDependencies:
+      '@ant-design/static-style-extract':
+        specifier: ^1.0.2
+        version: 1.0.2(antd@5.14.2)(react-dom@18.2.0)(react@18.2.0)
       '@types/react':
         specifier: ^18.2.14
         version: 18.2.58
@@ -453,6 +459,27 @@ packages:
       resize-observer-polyfill: 1.5.1
       throttle-debounce: 5.0.0
 
+  /@ant-design/static-style-extract@1.0.2(antd@5.14.2)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-3Bsg+5zTd7aaKuWpIPH/Can+UtPkVaA1hHJge9ZgaYYDQX+YrqnB+TVDARzpKHXFGcHZVj4ChV+VOD6f84E3Wg==}
+    engines: {node: '>=8.x'}
+    peerDependencies:
+      antd: ^5.3.0
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@ant-design/cssinjs': 1.18.4(react-dom@18.2.0)(react@18.2.0)
+      '@babel/runtime': 7.23.9
+      '@rc-component/portal': 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      antd: 5.14.2(react-dom@18.2.0)(react@18.2.0)
+      classnames: 2.5.1
+      rc-align: 4.0.15(react-dom@18.2.0)(react@18.2.0)
+      rc-motion: 2.9.0(react-dom@18.2.0)(react@18.2.0)
+      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
+      rc-util: 5.38.2(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
   /@apollo/client@3.9.5(@types/react@18.2.58)(graphql@16.8.1)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7y+c8MTPU+hhTwvcGVtMMGIgWduzrvG1mz5yJMRyqYbheBkkky3Lki6ADWVSBXG1lZoOtPYvB2zDgVfKb2HSsw==}
     peerDependencies:
@@ -5790,7 +5817,7 @@ packages:
       lodash.get: 4.4.2
     dev: true
 
-  /create-jest@29.7.0(@types/node@18.19.18):
+  /create-jest@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
     resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -5799,7 +5826,7 @@ packages:
       chalk: 4.1.2
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@18.19.18)
+      jest-config: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
       jest-util: 29.7.0
       prompts: 2.4.2
     transitivePeerDependencies:
@@ -6148,6 +6175,10 @@ packages:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
     dev: true
 
+  /dom-align@1.12.4:
+    resolution: {integrity: sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==}
+    dev: true
+
   /domexception@4.0.0:
     resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
     engines: {node: '>=12'}
@@ -6925,7 +6956,7 @@ packages:
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@5.3.3)
       '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3)
       eslint: 8.57.0
-      jest: 29.7.0(@types/node@18.19.18)
+      jest: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -9157,7 +9188,7 @@ packages:
       - supports-color
     dev: true
 
-  /jest-cli@29.7.0(@types/node@18.19.18):
+  /jest-cli@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
     resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -9171,10 +9202,10 @@ packages:
       '@jest/test-result': 29.7.0
       '@jest/types': 29.6.3
       chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@18.19.18)
+      create-jest: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
       exit: 0.1.2
       import-local: 3.1.0
-      jest-config: 29.7.0(@types/node@18.19.18)
+      jest-config: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
       jest-util: 29.7.0
       jest-validate: 29.7.0
       yargs: 17.7.2
@@ -9213,7 +9244,7 @@ packages:
       - ts-node
     dev: true
 
-  /jest-config@29.7.0(@types/node@18.19.18):
+  /jest-config@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
     resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
@@ -9248,6 +9279,7 @@ packages:
       pretty-format: 29.7.0
       slash: 3.0.0
       strip-json-comments: 3.1.1
+      ts-node: 10.9.2(@types/node@18.19.18)(typescript@5.3.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -9288,7 +9320,7 @@ packages:
       pretty-format: 29.7.0
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.2(@types/node@20.11.20)(typescript@5.3.3)
+      ts-node: 10.9.2(@types/node@18.19.18)(typescript@5.3.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
@@ -9609,7 +9641,7 @@ packages:
       supports-color: 8.1.1
     dev: true
 
-  /jest@29.7.0(@types/node@18.19.18):
+  /jest@29.7.0(@types/node@18.19.18)(ts-node@10.9.2):
     resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
@@ -9622,7 +9654,7 @@ packages:
       '@jest/core': 29.7.0(ts-node@10.9.2)
       '@jest/types': 29.6.3
       import-local: 3.1.0
-      jest-cli: 29.7.0(@types/node@18.19.18)
+      jest-cli: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -11284,6 +11316,21 @@ packages:
       iconv-lite: 0.4.24
       unpipe: 1.0.0
 
+  /rc-align@4.0.15(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==}
+    peerDependencies:
+      react: '>=16.9.0'
+      react-dom: '>=16.9.0'
+    dependencies:
+      '@babel/runtime': 7.23.9
+      classnames: 2.5.1
+      dom-align: 1.12.4
+      rc-util: 5.38.2(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      resize-observer-polyfill: 1.5.1
+    dev: true
+
   /rc-cascader@3.21.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-J7GozpgsLaOtzfIHFJFuh4oFY0ePb1w10twqK6is3pAkqHkca/PsokbDr822KIRZ8/CK8CqevxohuPDVZ1RO/A==}
     peerDependencies:
@@ -13193,7 +13240,7 @@ packages:
       '@babel/core': 7.23.9
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0
-      jest: 29.7.0(@types/node@18.19.18)
+      jest: 29.7.0(@types/node@18.19.18)(ts-node@10.9.2)
       jest-util: 29.7.0
       json5: 2.2.3
       lodash.memoize: 4.1.2
@@ -13223,6 +13270,37 @@ packages:
     resolution: {integrity: sha512-PGcnJoTBnVGy6yYNFxWVNkdcAuAMstvutN9MgDJIV6L0oG8fB+ZNNy1T+wJzah8RPGor1mZuPQkVfXNDpy9eHA==}
     dev: true
 
+  /ts-node@10.9.2(@types/node@18.19.18)(typescript@5.3.3):
+    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 18.19.18
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.3.3
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: true
+
   /ts-node@10.9.2(@types/node@20.11.20)(typescript@5.3.3):
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true

turbo.json

@@ -30,6 +30,12 @@
     },
     "graphql:update": {
       "cache": false
+    },
+    "predev": {
+      "cache": false
+    },
+    "prebuild": {
+      "cache": false
     }
   }
 }