From 613077ac8efeb2434af247073d0e6b81704c8bc1 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 8 May 2023 15:25:48 +0800
Subject: [PATCH] chore: fix genCssinjs with async-await (#42212)

---
 scripts/check-cssinjs.ts           | 38 ++++++++++++++++--------------
 scripts/collect-token-statistic.ts | 36 ++++++++++++++--------------
 scripts/generate-cssinjs.ts        | 20 ++++++++++++----
 3 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/scripts/check-cssinjs.ts b/scripts/check-cssinjs.ts
index 4eedcd2477..3b4f0156bc 100644
--- a/scripts/check-cssinjs.ts
+++ b/scripts/check-cssinjs.ts
@@ -23,22 +23,24 @@ console.error = (msg: any) => {
   }
 };
 
-generateCssinjs({
-  key: 'check',
-  render(Component: any) {
-    ReactDOMServer.renderToString(
-      React.createElement(
-        StyleProvider,
-        { linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
-        React.createElement(Component),
-      ),
-    );
-  },
-});
+(async () => {
+  await generateCssinjs({
+    key: 'check',
+    render(Component: any) {
+      ReactDOMServer.renderToString(
+        React.createElement(
+          StyleProvider,
+          { linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
+          React.createElement(Component),
+        ),
+      );
+    },
+  });
 
-if (errorCount > 0) {
-  console.log(chalk.red(`❌  CSS-in-JS check failed with ${errorCount} errors.`));
-  process.exit(1);
-} else {
-  console.log(chalk.green(`✅  CSS-in-JS check passed.`));
-}
+  if (errorCount > 0) {
+    console.log(chalk.red(`❌  CSS-in-JS check failed with ${errorCount} errors.`));
+    process.exit(1);
+  } else {
+    console.log(chalk.green(`✅  CSS-in-JS check passed.`));
+  }
+})();
diff --git a/scripts/collect-token-statistic.ts b/scripts/collect-token-statistic.ts
index 61f55023a7..602196c249 100644
--- a/scripts/collect-token-statistic.ts
+++ b/scripts/collect-token-statistic.ts
@@ -17,25 +17,25 @@ const bar = new ProgressBar('🚀 Collecting by component: [:bar] :component (:c
   total: styleFiles.length,
 });
 
-generateCssinjs({
-  key: 'file',
-  beforeRender(componentName: string) {
-    bar.tick(1, { component: componentName });
-  },
-  render(Component: any) {
-    ReactDOMServer.renderToString(React.createElement(Component));
-    // Render wireframe
-    ReactDOMServer.renderToString(
-      React.createElement(
-        DesignTokenContext.Provider,
-        { value: { token: { ...seedToken, wireframe: true } } },
-        React.createElement(Component),
-      ),
-    );
-  },
-});
+(async () => {
+  await generateCssinjs({
+    key: 'file',
+    beforeRender(componentName: string) {
+      bar.tick(1, { component: componentName });
+    },
+    render(Component: any) {
+      ReactDOMServer.renderToString(React.createElement(Component));
+      // Render wireframe
+      ReactDOMServer.renderToString(
+        React.createElement(
+          DesignTokenContext.Provider,
+          { value: { token: { ...seedToken, wireframe: true } } },
+          React.createElement(Component),
+        ),
+      );
+    },
+  });
 
-(() => {
   const tokenPath = `${process.cwd()}/components/version/token.json`;
   fs.writeJsonSync(tokenPath, statistic, 'utf8');
   console.log(chalk.green(`✅  Collected token statistics successfully, check it in`), tokenPath);
diff --git a/scripts/generate-cssinjs.ts b/scripts/generate-cssinjs.ts
index 241d2503d8..5334d0c9e2 100644
--- a/scripts/generate-cssinjs.ts
+++ b/scripts/generate-cssinjs.ts
@@ -1,9 +1,16 @@
 import { globSync } from 'glob';
 import path from 'path';
+import type { FC } from 'react';
 import React from 'react';
 
 type StyleFn = (prefix?: string) => void;
 
+type GenCssinjs = (options: {
+  key: string;
+  render: (component: FC) => void;
+  beforeRender?: (componentName: string) => void;
+}) => Promise<void>;
+
 export const styleFiles = globSync(
   path.join(
     process.cwd(),
@@ -11,26 +18,29 @@ export const styleFiles = globSync(
   ),
 );
 
-export const generateCssinjs = ({ key, beforeRender, render }: any) => {
-  styleFiles.forEach(async (file) => {
+export const generateCssinjs: GenCssinjs = async ({ key, beforeRender, render }) => {
+  // eslint-disable-next-line no-restricted-syntax
+  for (const file of styleFiles) {
     const pathArr = file.split('/');
     const styleIndex = pathArr.lastIndexOf('style');
     const componentName = pathArr[styleIndex - 1];
     let useStyle: StyleFn = () => {};
     if (file.includes('grid')) {
+      // eslint-disable-next-line no-await-in-loop
       const { useColStyle, useRowStyle } = await import(file);
       useStyle = (prefixCls: string) => {
         useRowStyle(prefixCls);
         useColStyle(prefixCls);
       };
     } else {
+      // eslint-disable-next-line no-await-in-loop
       useStyle = (await import(file)).default;
     }
-    const Component: React.FC = () => {
+    const Demo: FC = () => {
       useStyle(`${key}-${componentName}`);
       return React.createElement('div');
     };
     beforeRender?.(componentName);
-    render?.(Component);
-  });
+    render?.(Demo);
+  }
 };