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

@@ -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",

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);

site/theme/static/template.html

@@ -64,7 +64,6 @@
     <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
     <link rel="stylesheet" type="text/css" href="{{ root }}index-1.css"/>
     <link rel="stylesheet" type="text/css" href="{{ root }}index-2.css"/>
-    <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less"/>
     <style id="nprogress-style">
       #nprogress { display: none }
     </style>
@@ -127,6 +126,7 @@
     <div id="react-content">
       {{ content | safe }}
     </div>
+    <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less"/>
     <script src="{{ root }}common.js"></script>
     <script src="{{ root }}index.js"></script>
   </body>