From df7ef9a83398b459c1a92ba1b7fe61a0832b0e35 Mon Sep 17 00:00:00 2001 From: Zohaib Ijaz Date: Fri, 18 May 2018 09:01:32 +0500 Subject: [PATCH] site: Repalced generateColorLess script with antd-theme-generator * Repalced generateColorLess script with antd-theme-generator which allows to dynamically change theme for all color variables * Updated antd-theme-generator version * Updated Ant styles directory path --- package.json | 3 +- scripts/generateColorLess.js | 100 ++++---------------------------- site/theme/static/template.html | 2 +- 3 files changed, 15 insertions(+), 90 deletions(-) diff --git a/package.json b/package.json index 8ce551a0c7..126b831b6e 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "@types/react-dom": "^16.0.0", "ansi-styles": "^3.2.0", "ant-design-palettes": "^1.0.0", + "antd-theme-generator": "1.0.7", "antd-tools": "^5.1.2", "babel-cli": "^6.18.0", "babel-eslint": "^8.1.1", @@ -183,7 +184,7 @@ "dist": "antd-tools run dist", "compile": "antd-tools run compile", "tsc": "tsc", - "start": "rimraf _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js", + "start": "rimraf _site && mkdir _site && node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js", "start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js", "site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js", "predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site", diff --git a/scripts/generateColorLess.js b/scripts/generateColorLess.js index ab653a7fb2..d78c40d6ab 100644 --- a/scripts/generateColorLess.js +++ b/scripts/generateColorLess.js @@ -1,92 +1,16 @@ #!/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 = { - '#e6f7ff': 'color(~`colorPalette("@{primary-color}", 1)`)', // @primary-1 - '#bae7ff': 'color(~`colorPalette("@{primary-color}", 2)`)', // @primary-2 - '#40a9ff': 'color(~`colorPalette("@{primary-color}", 5)`)', // @primary-5 - '#1890ff': '@primary-color', - '#096dd9': 'color(~`colorPalette("@{primary-color}", 7)`)', // @primary-7 - '#46a6ff': 'tint(@primary-color, 20%)', - '#8cc8ff': 'tint(@primary-color, 50%)', - 'rgba\\(24, 144, 255, 0.2\\)': 'fade(@primary-color, 20%)', +const { generateTheme } = require('antd-theme-generator'); + +const options = { + stylesDir: path.join(__dirname, '../site/theme/static'), + antdStylesDir: path.join(__dirname, '../components'), + varFile: path.join(__dirname, '../components/style/themes/default.less'), + mainLessFile: path.join(__dirname, '../site/theme/static/index.less'), + themeVariables: [ + '@primary-color', + ], + outputFilePath: path.join(__dirname, '../_site/color.less'), }; -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: #1890ff;\n${css}`; - - const siteDir = path.resolve(__dirname, '../_site'); - if (!fs.existsSync(siteDir)) { - fs.mkdirSync(siteDir); - } - fs.writeFileSync(path.resolve(__dirname, '../_site/color.less'), css); -}); +generateTheme(options); diff --git a/site/theme/static/template.html b/site/theme/static/template.html index ac550758dc..e05597582f 100644 --- a/site/theme/static/template.html +++ b/site/theme/static/template.html @@ -64,7 +64,6 @@ - @@ -127,6 +126,7 @@
{{ content | safe }}
+