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({ (async () => {
key: 'check', await generateCssinjs({
render(Component: any) { key: 'check',
ReactDOMServer.renderToString( render(Component: any) {
React.createElement( ReactDOMServer.renderToString(
StyleProvider, React.createElement(
{ linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] }, StyleProvider,
React.createElement(Component), { linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
), React.createElement(Component),
); ),
}, );
}); },
});
if (errorCount > 0) { if (errorCount > 0) {
console.log(chalk.red(`❌ CSS-in-JS check failed with ${errorCount} errors.`)); console.log(chalk.red(`❌ CSS-in-JS check failed with ${errorCount} errors.`));
process.exit(1); process.exit(1);
} else { } else {
console.log(chalk.green(`✅ CSS-in-JS check passed.`)); 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, total: styleFiles.length,
}); });
generateCssinjs({ (async () => {
key: 'file', await generateCssinjs({
beforeRender(componentName: string) { key: 'file',
bar.tick(1, { component: componentName }); beforeRender(componentName: string) {
}, bar.tick(1, { component: componentName });
render(Component: any) { },
ReactDOMServer.renderToString(React.createElement(Component)); render(Component: any) {
// Render wireframe ReactDOMServer.renderToString(React.createElement(Component));
ReactDOMServer.renderToString( // Render wireframe
React.createElement( ReactDOMServer.renderToString(
DesignTokenContext.Provider, React.createElement(
{ value: { token: { ...seedToken, wireframe: true } } }, DesignTokenContext.Provider,
React.createElement(Component), { value: { token: { ...seedToken, wireframe: true } } },
), React.createElement(Component),
); ),
}, );
}); },
});
(() => {
const tokenPath = `${process.cwd()}/components/version/token.json`; const tokenPath = `${process.cwd()}/components/version/token.json`;
fs.writeJsonSync(tokenPath, statistic, 'utf8'); fs.writeJsonSync(tokenPath, statistic, 'utf8');
console.log(chalk.green(`✅ Collected token statistics successfully, check it in`), tokenPath); 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 { globSync } from 'glob';
import path from 'path'; import path from 'path';
import type { FC } from 'react';
import React from 'react'; import React from 'react';
type StyleFn = (prefix?: string) => void; type StyleFn = (prefix?: string) => void;
type GenCssinjs = (options: {
key: string;
render: (component: FC) => void;
beforeRender?: (componentName: string) => void;
}) => Promise<void>;
export const styleFiles = globSync( export const styleFiles = globSync(
path.join( path.join(
process.cwd(), process.cwd(),
@ -11,26 +18,29 @@ export const styleFiles = globSync(
), ),
); );
export const generateCssinjs = ({ key, beforeRender, render }: any) => { export const generateCssinjs: GenCssinjs = async ({ key, beforeRender, render }) => {
styleFiles.forEach(async (file) => { // eslint-disable-next-line no-restricted-syntax
for (const file of styleFiles) {
const pathArr = file.split('/'); const pathArr = file.split('/');
const styleIndex = pathArr.lastIndexOf('style'); const styleIndex = pathArr.lastIndexOf('style');
const componentName = pathArr[styleIndex - 1]; const componentName = pathArr[styleIndex - 1];
let useStyle: StyleFn = () => {}; let useStyle: StyleFn = () => {};
if (file.includes('grid')) { if (file.includes('grid')) {
// eslint-disable-next-line no-await-in-loop
const { useColStyle, useRowStyle } = await import(file); const { useColStyle, useRowStyle } = await import(file);
useStyle = (prefixCls: string) => { useStyle = (prefixCls: string) => {
useRowStyle(prefixCls); useRowStyle(prefixCls);
useColStyle(prefixCls); useColStyle(prefixCls);
}; };
} else { } else {
// eslint-disable-next-line no-await-in-loop
useStyle = (await import(file)).default; useStyle = (await import(file)).default;
} }
const Component: React.FC = () => { const Demo: FC = () => {
useStyle(`${key}-${componentName}`); useStyle(`${key}-${componentName}`);
return React.createElement('div'); return React.createElement('div');
}; };
beforeRender?.(componentName); beforeRender?.(componentName);
render?.(Component); render?.(Demo);
}); }
}; };