test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
MadCcc 2023-05-08 15:25:48 +08:00 committed by GitHub
parent 4e05f084ab
commit 613077ac8e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
scripts/check-cssinjs.ts
View File

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

36
scripts/collect-token-statistic.ts
View File

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

20
scripts/generate-cssinjs.ts
View File

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