mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 11:18:14 +08:00
95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
const glob = require('glob');
|
|
const postcss = require('postcss');
|
|
const less = require('less');
|
|
|
|
const COLOR_MAP = {
|
|
'#ecf6fd': 'color(~`colorPalette("@{primary-color}", 1)`)', // @primary-1
|
|
'#d2eafb': 'color(~`colorPalette("@{primary-color}", 2)`)', // @primary-2
|
|
'#49a9ee': 'color(~`colorPalette("@{primary-color}", 5)`)', // @primary-5
|
|
'#108ee9': '@primary-color',
|
|
'#0e77ca': 'color(~`colorPalette("@{primary-color}", 7)`)', // @primary-7
|
|
'#40a5ed': 'tint(@primary-color, 20%)',
|
|
'#70bbf2': 'tint(@primary-color, 40%)',
|
|
'#88c7f4': 'tint(@primary-color, 50%)',
|
|
'#9fd2f6': 'tint(@primary-color, 60%)',
|
|
'rgba(16, 142, 233, 0.2)': 'fadeout(@primary-color, 80%)',
|
|
};
|
|
|
|
const reducePlugin = postcss.plugin('reducePlugin', () => {
|
|
const cleanRule = (rule) => {
|
|
if (rule.selector.startsWith('.main-color .palatte-')) {
|
|
rule.remove();
|
|
return;
|
|
}
|
|
let removeRule = true;
|
|
rule.walkDecls((decl) => {
|
|
if (
|
|
!decl.prop.includes('color') &&
|
|
!decl.prop.includes('background') &&
|
|
!decl.prop.includes('border') &&
|
|
!decl.prop.includes('box-shadow')
|
|
) {
|
|
decl.remove();
|
|
} else {
|
|
removeRule = false;
|
|
}
|
|
});
|
|
if (removeRule) {
|
|
rule.remove();
|
|
}
|
|
};
|
|
return (css) => {
|
|
css.walkAtRules((atRule) => {
|
|
atRule.remove();
|
|
});
|
|
|
|
css.walkRules(cleanRule);
|
|
|
|
css.walkComments(c => c.remove());
|
|
};
|
|
});
|
|
|
|
const antd = path.resolve(__dirname, '../');
|
|
const entry = path.join(antd, 'components/style/index.less');
|
|
let content = fs.readFileSync(entry).toString();
|
|
const styles = glob.sync(path.join(antd, 'components/*/style/index.less'));
|
|
content += '\n';
|
|
styles.forEach((style) => {
|
|
content += `@import "${style}";\n`;
|
|
});
|
|
content += `@import "${path.join(antd, 'site/theme/static/index.less')}";\n`;
|
|
|
|
less.render.call(less, content, {
|
|
paths: [path.join(antd, 'components/style')],
|
|
}).then(({ css }) => {
|
|
return postcss([
|
|
reducePlugin,
|
|
]).process(css, { parser: less.parser, from: entry });
|
|
}).then(({ css }) => {
|
|
Object.keys(COLOR_MAP).forEach((key) => {
|
|
css = css.replace(new RegExp(key, 'g'), COLOR_MAP[key]);
|
|
});
|
|
|
|
const bezierEasing = fs.readFileSync(path.join(antd, 'components/style/color/bezierEasing.less')).toString();
|
|
const tinyColor = fs.readFileSync(path.join(antd, 'components/style/color/tinyColor.less')).toString();
|
|
const colorPalette = fs.readFileSync(path.join(antd, 'components/style/color/colorPalette.less'))
|
|
.toString()
|
|
.replace('@import "bezierEasing";', '')
|
|
.replace('@import "tinyColor";', '');
|
|
|
|
css = `${colorPalette}\n${css}`;
|
|
css = `${tinyColor}\n${css}`;
|
|
css = `${bezierEasing}\n${css}`;
|
|
css = `@primary-color: #108ee9;\n${css}`;
|
|
|
|
const siteDir = path.resolve(__dirname, '../_site');
|
|
if (!fs.existsSync(siteDir)) {
|
|
fs.mkdirSync(siteDir);
|
|
}
|
|
fs.writeFileSync(path.resolve(__dirname, '../_site/color.less'), css);
|
|
});
|