ant-design/.antd-tools.config.js
二货机器人 36bcaaef85
Add variable.less to support css variable (#31496)
* chore: use varaible.less

* chore: basic primary varaible

* chore: Move to variable

* chore: align active color

* chore: global fix of css variable

* chore: primary colors

* chore: button danger

* chore: btn default error color

* chore: button series

* chore: More examples

* chore: More components

* chore: Form demo

* chore: form style

* fix: Tag & Alert variable

* chore: update footer

* chore: rm tmp code

* chore: transfer

* fix: picker column active color

* chore: Adjust active bg color

* chore: table hover color

* chore: all css variables

* chore: Global using variables

* chore: Test case

* chore: Update test logic

* chore: back of default less

* chore: entry of site use proxy style

* chore: update entry

* chore: split of variables

* refactor: quick dist speed

* fix: site use variable version

* chore: Update less config

* chore: add mv script

* chore: Update repalcement script

* chore: Add inject variables

* chore: Update script

* fix: script path

* chore: Move to component instead

* chore: fix condition

* chore: update config

* chore: Update in less transform

* chore: Modify logic

* chore: change to variables

* chore: Update name

* fix: script name

* chore: do inject

* revert: back of path

* chore: 2 way of generate

* bump tools

* chore: Add auto replacement script

* chore: auto genrate less file

* chore: fix test

* test: More test case

* chore: Update limit config

* test: coverage

* docs: Update doc
2021-09-01 10:56:50 +08:00

187 lines
5.0 KiB
JavaScript

const fs = require('fs');
const path = require('path');
const defaultVars = require('./scripts/default-vars');
const darkVars = require('./scripts/dark-vars');
const compactVars = require('./scripts/compact-vars');
function generateThemeFileContent(theme) {
return `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
module.exports = {
...defaultTheme,
...${theme}ThemeSingle
}`;
}
// We need compile additional content for antd user
function finalizeCompile() {
if (fs.existsSync(path.join(__dirname, './lib'))) {
// Build a entry less file to dist/antd.less
const componentsPath = path.join(process.cwd(), 'components');
let componentsLessContent = '';
// Build components in one file: lib/style/components.less
fs.readdir(componentsPath, (err, files) => {
files.forEach(file => {
if (fs.existsSync(path.join(componentsPath, file, 'style', 'index.less'))) {
componentsLessContent += `@import "../${path.posix.join(
file,
'style',
'index.less',
)}";\n`;
}
});
fs.writeFileSync(
path.join(process.cwd(), 'lib', 'style', 'components.less'),
componentsLessContent,
);
});
}
}
function buildThemeFile(theme, vars) {
// Build less entry file: dist/antd.${theme}.less
if (theme !== 'default') {
fs.writeFileSync(
path.join(process.cwd(), 'dist', `antd.${theme}.less`),
`@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
);
// eslint-disable-next-line no-console
console.log(`Built a entry less file to dist/antd.${theme}.less`);
} else {
fs.writeFileSync(
path.join(process.cwd(), 'dist', `default-theme.js`),
`module.exports = ${JSON.stringify(vars, null, 2)};\n`,
);
return;
}
// Build ${theme}.js: dist/${theme}-theme.js, for less-loader
fs.writeFileSync(
path.join(process.cwd(), 'dist', `theme.js`),
`const ${theme}ThemeSingle = ${JSON.stringify(vars, null, 2)};\n`,
{
flag: 'a',
},
);
fs.writeFileSync(
path.join(process.cwd(), 'dist', `${theme}-theme.js`),
generateThemeFileContent(theme),
);
// eslint-disable-next-line no-console
console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
}
function finalizeDist() {
if (fs.existsSync(path.join(__dirname, './dist'))) {
// Build less entry file: dist/antd.less
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'antd.less'),
'@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
);
// eslint-disable-next-line no-console
fs.writeFileSync(
path.join(process.cwd(), 'dist', 'theme.js'),
`const defaultTheme = require('./default-theme.js');\n`,
);
// eslint-disable-next-line no-console
console.log('Built a entry less file to dist/antd.less');
buildThemeFile('default', defaultVars);
buildThemeFile('dark', darkVars);
buildThemeFile('compact', compactVars);
buildThemeFile('variable', {});
fs.writeFileSync(
path.join(process.cwd(), 'dist', `theme.js`),
`
function getThemeVariables(options = {}) {
let themeVar = {
'hack': \`true;@import "\${require.resolve('antd/lib/style/color/colorPalette.less')}";\`,
...defaultTheme
};
if(options.dark) {
themeVar = {
...themeVar,
...darkThemeSingle
}
}
if(options.compact){
themeVar = {
...themeVar,
...compactThemeSingle
}
}
return themeVar;
}
module.exports = {
darkThemeSingle,
compactThemeSingle,
getThemeVariables
}`,
{
flag: 'a',
},
);
}
}
function isComponentStyle(file) {
return file.path.match(/style(\/|\\)index\.tsx/);
}
function needTransformStyle(content) {
return content.includes('./index.less');
}
module.exports = {
compile: {
transformTSFile(file) {
if (isComponentStyle(file)) {
let content = file.contents.toString();
if (needTransformStyle(content)) {
const cloneFile = file.clone();
// Origin
content = content.replace('./index.less', './index-default.less');
cloneFile.contents = Buffer.from(content);
return cloneFile;
}
}
},
transformFile(file) {
if (isComponentStyle(file)) {
const content = file.contents.toString();
if (needTransformStyle(content)) {
const cloneFile = file.clone();
cloneFile.contents = Buffer.from(
[
// Inject variable
'@root-entry-name: default',
// Point to origin file
"@import './index';",
].join('\n\n'),
);
cloneFile.path = cloneFile.path.replace('index.tsx', 'index-default.less');
return cloneFile;
}
}
return [];
},
lessConfig: {
modifyVars: {
'root-entry-name': 'default',
},
},
finalize: finalizeCompile,
},
dist: {
finalize: finalizeDist,
},
generateThemeFileContent,
bail: true,
};