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

scripts/check-cssinjs.ts

@@ -23,7 +23,8 @@ console.error = (msg: any) => {
   }
 };
 
-generateCssinjs({
+(async () => {
+  await generateCssinjs({
     key: 'check',
     render(Component: any) {
       ReactDOMServer.renderToString(
@@ -42,3 +43,4 @@ if (errorCount > 0) {
   } else {
     console.log(chalk.green(`✅  CSS-in-JS check passed.`));
   }
+})();

scripts/collect-token-statistic.ts

@@ -17,7 +17,8 @@ const bar = new ProgressBar('🚀 Collecting by component: [:bar] :component (:c
   total: styleFiles.length,
 });
 
-generateCssinjs({
+(async () => {
+  await generateCssinjs({
     key: 'file',
     beforeRender(componentName: string) {
       bar.tick(1, { component: componentName });
@@ -35,7 +36,6 @@ generateCssinjs({
     },
   });
 
-(() => {
   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);
+  }
 };