Optimization:Independent MergeLessPlugin

package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@antv/data-set": "^0.8.0",
     "antd": "^3.7.0",
+    "antd-pro-merge-less": "^0.0.1",
     "bizcharts": "^3.1.10",
     "bizcharts-plugin-slider": "^2.0.3",
     "classnames": "^2.2.6",

scripts/AddlocalIdentName.js

-/* eslint-disable */
-const postcss = require('postcss');
-const syntax = require('postcss-less');
-
-const LocalIdentNameplugin = postcss.plugin('LocalIdentNameplugin', ({ localIdentName }) => {
-  return lessAST => {
-    // loop add localIdentName
-    const loop = nodes => {
-      nodes.forEach(item => {
-        // Not converted :global
-        if (item.nodes && item.selector !== ':global') {
-          loop(item.nodes);
-        }
-        // 将global的 节点加到 parents
-        if (item.selector === ':global') {
-          const parentNodes = item.parent.nodes;
-          const childrenNodes = item.nodes;
-          const index = parentNodes.findIndex(node => {
-            return node.selector === ':global';
-          });
-          childrenNodes.unshift(index, 1);
-          Array.prototype.splice.apply(parentNodes, item.nodes);
-          item.parent.nodes = parentNodes;
-          return;
-        }
-        // 删除 :global(className) 保留 className
-        if (item.selector) {
-          if (item.selector.includes(':global(')) {
-            // converted :global(.className）
-            const className = item.selector.match(/:global\((\S*)\)/)[1];
-            item.selector = className;
-            return;
-          }
-          if (item.selector.includes('(')) {
-            return;
-          }
-          const className = item.selector.replace(/\./g, `.${localIdentName}`);
-          item.selector = className;
-        }
-      });
-    };
-    loop(lessAST.nodes);
-  };
-});
-
-const AddlocalIdentName = (lessPath, lessText, localIdentName) => {
-  return postcss([LocalIdentNameplugin({ localIdentName })]).process(lessText, { syntax });
-};
-
-module.exports = AddlocalIdentName;

scripts/getLocalIdentName.js

-module.exports = path => {
-  const antdProPath = path.match(/src(.*)/)[1].replace('.less', '');
-  const arr = antdProPath
-    .split('/')
-    .map(a => a.replace(/([A-Z])/g, '-$1'))
-    .map(a => a.toLowerCase());
-  return `antd-pro${arr.join('-')}-`.replace(/--/g, '-');
-};

scripts/mergeLessPlugin.js

-#!/usr/bin/env node
-/**
- * 这个方法用来处理 css-modlue
- * 由于没有开源插件，所以自己撸了一个
- */
-
-const fs = require('fs');
-const path = require('path');
-const getLocalIdentName = require('./getLocalIdentName');
-const AddlocalIdentName = require('./AddlocalIdentName');
-const replacedefaultLess = require('./replacedefaultLess');
-// read less file list
-const lessArray = ['@import "../node_modules/antd/lib/style/themes/default.less";'];
-
-const loopAllLess = parents => {
-  const paths = fs.readdirSync(parents);
-  const promiseList = [];
-  paths.forEach(itemPath => {
-    if (itemPath === 'style' || itemPath === 'demo') {
-      return;
-    }
-    // file status
-    const fileStatus = fs.lstatSync(path.join(parents, itemPath));
-    // is file
-    // is Directory
-    if (fileStatus.isDirectory()) {
-      return loopAllLess(path.join(parents, itemPath));
-    }
-    // is less file
-    if (itemPath.indexOf('.less') > -1) {
-      const relaPath = path.join(parents, itemPath);
-      // post css add localIdentNameplugin
-      const fileContent = replacedefaultLess(relaPath);
-      // push less file
-      promiseList.push(
-        AddlocalIdentName(relaPath, fileContent, getLocalIdentName(relaPath)).then(result => {
-          lessArray.push(result);
-        })
-      );
-    }
-  });
-  return Promise.all(promiseList);
-};
-
-class mergeLessPlugin {
-  constructor(options) {
-    const defaulOptions = {
-      stylesDir: path.join(__dirname, './src/'),
-      outFile: path.join(__dirname, './tmp/ant.design.pro.less'),
-    };
-    this.options = Object.assign(defaulOptions, options);
-    this.generated = false;
-  }
-
-  apply(compiler) {
-    const { options } = this;
-    compiler.plugin('emit', (compilation, callback) => {
-      const { outFile } = options;
-      // covert less
-      if (fs.existsSync(outFile)) {
-        fs.unlinkSync(outFile);
-      } else if (!fs.existsSync(path.dirname(outFile))) {
-        fs.mkdirSync(path.dirname(outFile));
-      }
-      loopAllLess(options.stylesDir).then(() => {
-        fs.writeFileSync(outFile, lessArray.join('\n'));
-        callback();
-      });
-    });
-  }
-}
-
-module.exports = mergeLessPlugin;

scripts/replacedefaultLess.js

-const fs = require('fs-extra');
-
-const replacedefaultLess = lessPath => {
-  const fileContent = fs.readFileSync(lessPath).toString();
-  let lessString = fileContent;
-  if (lessString.includes("@import '~antd/lib/style/themes/default.less'")) {
-    lessString = lessString.replace("@import '~antd/lib/style/themes/default.less';", '');
-  }
-  return lessString.replace(/@import '.*\/utils.less';/, '');
-};
-module.exports = replacedefaultLess;

src/pages/document.ejs

@@ -8,8 +8,7 @@
   <title>Ant Design Pro</title>
   <link rel="manifest" href="/manifest.json">
   <link rel="icon" href="/favicon.png" type="image/x-icon">
-  <!-- rollbar -->
-  <script src=" https://gw.alipayobjects.com/os/rmsportal/TKSqiyoUxzrHoMwjViwA.js "></script>
+  <script src="https://cdn.bootcss.com/rollbar.js/2.4.0/rollbar.min.js"></script>
   <script src="https://gw.alipayobjects.com/os/antv/assets/data-set/0.8.7/data-set.min.js"></script>
 </head>
 

webpack.config.js

 import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
-import MergeLessPlugin from './scripts/mergeLessPlugin';
+import MergeLessPlugin from 'antd-pro-merge-less';
 
 const path = require('path');