mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: add lint for cssVar (#45828)

Browse Source 
* chore: add lint for css var

* chore: code clean

* chore: use linter

* chore: code clean

* chore: clean

* chore: update

* chore: code clean
This commit is contained in:
MadCcc 2023-11-13 11:56:13 +08:00 committed by GitHub
parent ca03c7c53f
commit 3a0ab9d371
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 137 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -4,7 +4,7 @@ import {
createCache,
extractStyle,
legacyNotSelectorLinter,
logicalPropertiesLinter,
NaNLinter,
parentSelectorLinter,
StyleProvider,
} from '@ant-design/cssinjs';
@ -168,7 +168,7 @@ const GlobalLayout: React.FC = () => {
<DarkContext.Provider value={theme.includes('dark')}>
<StyleProvider
cache={styleCache}
linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
linters={[legacyNotSelectorLinter, parentSelectorLinter, NaNLinter]}
>
<SiteContext.Provider value={siteContextValue}>
<SiteThemeProvider

4
package.json
View File

@ -75,7 +75,7 @@
"lint:deps": "antd-tools run deps-lint",
"lint:md": "remark . -f -q",
"lint:script": "npm run component-changelog && eslint . --ext .js,.jsx,.ts,.tsx --cache",
"lint:style": "tsx scripts/check-cssinjs.ts",
"lint:style": "tsx scripts/check-cssinjs.tsx",
"pre-publish": "npm run test-all -- --skip-build && tsx ./scripts/pre-publish-notice.ts",
"prepare": "is-ci || husky install && dumi setup",
"prepublishOnly": "antd-tools run guard",
@ -113,7 +113,7 @@
],
"dependencies": {
"@ant-design/colors": "^7.0.0",
"@ant-design/cssinjs": "^2.0.0-alpha.1",
"@ant-design/cssinjs": "^1.18.0-alpha.0",
"@ant-design/icons": "^5.2.6",
"@ant-design/react-slick": "~1.0.2",
"@babel/runtime": "^7.18.3",

46
scripts/check-cssinjs.ts
View File

@ -1,46 +0,0 @@
/* eslint-disable no-console */
import {
StyleProvider,
legacyNotSelectorLinter,
logicalPropertiesLinter,
parentSelectorLinter,
} from '@ant-design/cssinjs';
import chalk from 'chalk';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { generateCssinjs } from './generate-cssinjs';
console.log(chalk.green(`🔥 Checking CSS-in-JS...`));
let errorCount = 0;
const originError = console.error;
console.error = (msg: any) => {
if (msg.includes('Warning: [Ant Design CSS-in-JS]')) {
errorCount += 1;
console.log(chalk.red(`❌ `), msg.slice(msg.indexOf('Error in')).replace(/\s+/g, ' '));
} else {
originError(msg);
}
};
(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.`));
}
})();

130
scripts/check-cssinjs.tsx Normal file
View File

@ -0,0 +1,130 @@
/* eslint-disable no-console */
import {
legacyNotSelectorLinter,
logicalPropertiesLinter,
NaNLinter,
parentSelectorLinter,
StyleProvider,
} from '@ant-design/cssinjs';
import chalk from 'chalk';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { generateCssinjs } from './generate-cssinjs';
import { ConfigProvider } from '../components';
console.log(chalk.green(`🔥 Checking CSS-in-JS...`));
let errorCount = 0;
const originError = console.error;
console.error = (msg: any) => {
if (msg.includes('Warning: [Ant Design CSS-in-JS]')) {
errorCount += 1;
console.log(chalk.red(`❌ `), msg.slice(msg.indexOf('Error in')).replace(/\s+/g, ' '));
} else {
originError(msg);
}
};
async function checkCSSVar() {
const ignore = [
'affix',
'alert',
'anchor',
'auto-complete',
'avatar',
'back-top',
'badge',
'breadcrumb',
'calendar',
'card',
'carousel',
'cascader',
'checkbox',
'collapse',
'color-picker',
'date-picker',
'descriptions',
'divider',
'drawer',
'dropdown',
'empty',
'flex',
'float-button',
'form',
'grid',
'icon',
'image',
'input-number',
'layout',
'list',
'mentions',
'message',
'modal',
'notification',
'pagination',
'popconfirm',
'popover',
'progress',
'qr-code',
'radio',
'rate',
'result',
'segmented',
'select',
'skeleton',
'slider',
'space',
'spin',
'statistic',
'steps',
'switch',
'table',
'tabs',
'tag',
'timeline',
'transfer',
'tree',
'tree-select',
'typography',
'upload',
'watermark',
];
await generateCssinjs({
key: 'check',
ignore,
render(Component: any) {
ReactDOMServer.renderToString(
<StyleProvider linters={[NaNLinter]}>
<ConfigProvider theme={{ cssVar: true, hashed: false }}>
<Component />
</ConfigProvider>
</StyleProvider>,
);
},
});
}
(async () => {
await generateCssinjs({
key: 'check',
render(Component: any) {
ReactDOMServer.renderToString(
<StyleProvider
linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
>
<Component />
</StyleProvider>,
);
},
});
await checkCSSVar();
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.`));
}
})();

4
scripts/generate-cssinjs.ts
View File

@ -9,6 +9,7 @@ interface GenCssinjsOptions {
key: string;
render: (component: React.FC) => void;
beforeRender?: (componentName: string) => void;
ignore?: string[];
}
export const styleFiles = globSync(
@ -21,13 +22,14 @@ export const styleFiles = globSync(
.join('/'),
);
export const generateCssinjs = ({ key, beforeRender, render }: GenCssinjsOptions) =>
export const generateCssinjs = ({ key, beforeRender, render, ignore }: GenCssinjsOptions) =>
Promise.all(
styleFiles.map(async (file) => {
const absPath = url.pathToFileURL(file).href;
const pathArr = file.split('/');
const styleIndex = pathArr.lastIndexOf('style');
const componentName = pathArr[styleIndex - 1];
if (ignore?.includes(componentName)) return;
let useStyle: StyleFn = () => {};
if (file.includes('grid')) {
const { useColStyle, useRowStyle } = await import(absPath);