chore: fix genCssinjs with async-await (#42212)

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.`));
+  }
+})();

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);

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);
+  }
 };