Feat css var (#5327)

* style: affix & util

* feat(alert): add customIcon slot

* feat(anchor): ts type

* style: auto-complete

* feat: avatar add crossOrigin & maxPopoverTrigger

* style(backTop): v-show instead v-if

* style: badge

* style: breadcrumb

* feat: button add global size

* feat: update i18n

* feat: picker add disabledTime

* test: update snap

* doc: update img url

* style: fix Card tabs of left position

* doc: update cascader doc

* feat: collapse

* style: comment

* style: configprovider

* feat: date-picker add soem icon slot

* style: update descriptions style

* feat: add divider orientationMargin

* doc: update drawer

* feat: dropdown add destroyPopupOnHide & loading

* style: update empty

* feat: form add labelWrap

* style: update grid

* test: update grid snap

* fix: image ts error

* fix: mentions cannot select, close #5233

* doc: update pagination change info, close #5293

* fix: table dynamic expand error, close #5295

* style: remove not use

* release 3.0.0-beta.11

* doc: update typo

* feat: input add showCount

* feat: inputNumber add prefix slot

* style: update layout

* style: update list

* feat: add locale i18

* style: update locale ts

* style: update mentions

* feat: menu divider add dashed

* perf: menu

* perf: menu animate

* feat: modal method add wrapClassName

* style: update pageheader

* feat: update pagination ts

* feat: confirm add showCancel & promise

* doc: update popover

* style: update progress

* style: radio

* style: update rate、result、row

* feat: select add fieldNames

* feat: add skeleton button & input

* feat: spin tip support slot

* style: slider & space

* stype: update steps ts type

* style: update switch

* feat: table add tree filter

* test: update input sanp

* feat: table add filterMode...

* fix: tree autoExpandParent bug

* test: update input snap

* doc: tabs add destroyInactiveTabPane

* style: update tag

* style: update timeline & time-picker

* fix: Tooltip arrowPointAtCenter 1px shift bug

* feat: typography add enterEnterIcon triggerType

* doc: update tree-select

* fix: deps and TypeScript types

* style: udpate transfer

* style: update style

* doc: add colorScheme

* chore: add css var builg

* doc: sort api

* style: lint code

* doc: add css var

* test: update snap

* chore: add pre script

* chore: update lint

* perf: collapse animate

* perf: collapse tree

* perf: typography shaking when edit

* doc: update auto-complete demo

* fix: table tree not have animate

* feat: deprecated dropdown center placement

* feat: deprecated dropdown center placement

* test: update snap

.antd-tools.config.js

@@ -0,0 +1,195 @@
+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-pure.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/default.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 isComponentStyleEntry(file) {
+  return file.path.match(/style(\/|\\)index\.tsx/);
+}
+
+function needTransformStyle(content) {
+  return content.includes('../../style/index.less') || content.includes('./index.less');
+}
+
+module.exports = {
+  compile: {
+    includeLessFile: [/(\/|\\)components(\/|\\)style(\/|\\)default.less$/],
+    transformTSFile(file) {
+      if (isComponentStyleEntry(file)) {
+        let content = file.contents.toString();
+
+        if (needTransformStyle(content)) {
+          const cloneFile = file.clone();
+
+          // Origin
+          content = content.replace('../../style/index.less', '../../style/default.less');
+          cloneFile.contents = Buffer.from(content);
+
+          return cloneFile;
+        }
+      }
+    },
+    transformFile(file) {
+      if (isComponentStyleEntry(file)) {
+        const indexLessFilePath = file.path.replace('index.tsx', 'index.less');
+
+        if (fs.existsSync(indexLessFilePath)) {
+          // We put origin `index.less` file to `index-pure.less`
+          const pureFile = file.clone();
+          pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8'));
+          pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less');
+
+          // Rewrite `index.less` file with `root-entry-name`
+          const indexLessFile = file.clone();
+          indexLessFile.contents = Buffer.from(
+            [
+              // Inject variable
+              '@root-entry-name: default;',
+              // Point to origin file
+              "@import './index-pure.less';",
+            ].join('\n\n'),
+          );
+          indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less');
+
+          return [indexLessFile, pureFile];
+        }
+      }
+
+      return [];
+    },
+    lessConfig: {
+      modifyVars: {
+        'root-entry-name': 'default',
+      },
+    },
+    finalize: finalizeCompile,
+  },
+  dist: {
+    finalize: finalizeDist,
+  },
+  generateThemeFileContent,
+  bail: true,
+};

.eslintignore

@@ -7,3 +7,4 @@ es/
 lib/
 _site/
 dist/
+components/version/version.tsx

.gitignore

@@ -76,3 +76,6 @@ vetur/
 report.html
 
 site/src/router/demoRoutes.js
+
+components/version/version.tsx
+~component-api.json

antd-tools/apiCollection.js

@@ -0,0 +1,68 @@
+// Read all the api from current documents
+
+const glob = require('glob');
+const fs = require('fs');
+
+const COMPONENT_NAME = /components\/([^/]*)/;
+const PROP_NAME = /^\s*\|\s*([^\s|]*)/;
+
+const components = {};
+
+function mappingPropLine(component, line) {
+  const propMatch = line.match(PROP_NAME);
+  if (!propMatch) return;
+
+  const propName = propMatch[1];
+  if (!/^[a-z]/.test(propName)) return;
+
+  components[component] = Array.from(new Set([...(components[component] || []), propName]));
+}
+
+function apiReport(entities) {
+  const apis = {};
+  Object.keys(entities).forEach(component => {
+    const apiList = entities[component];
+    apiList.forEach(api => {
+      if (typeof apis[api] === 'function') {
+        apis[api] = [];
+      }
+      apis[api] = [...(apis[api] || []), component];
+    });
+  });
+
+  return apis;
+}
+
+function printReport(apis) {
+  const apiList = Object.keys(apis).map(api => ({
+    name: api,
+    componentList: apis[api],
+  }));
+  apiList.sort((a, b) => b.componentList.length - a.componentList.length);
+  // eslint-disable-next-line no-console
+  console.log('| name | components | comments |');
+  // eslint-disable-next-line no-console
+  console.log('| ---- | ---------- | -------- |');
+  apiList.forEach(({ name, componentList }) => {
+    // eslint-disable-next-line no-console
+    console.log('|', name, '|', componentList.join(', '), '| |');
+  });
+}
+
+module.exports = () => {
+  glob('components/*/*.md', (error, files) => {
+    files.forEach(filePath => {
+      // Read md file to parse content
+      const content = fs.readFileSync(filePath, 'utf8');
+      const component = filePath.match(COMPONENT_NAME)[1];
+
+      // Parse lines to get API
+      const lines = content.split(/[\r\n]+/);
+      lines.forEach(line => {
+        mappingPropLine(component, line);
+      });
+    });
+
+    printReport(apiReport(components));
+  });
+};

antd-tools/cli/run.js

@@ -4,7 +4,6 @@
 'use strict';
 
 require('colorful').colorful();
-require('colorful').isatty = true;
 const gulp = require('gulp');
 const program = require('commander');
 

antd-tools/getNpm.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const runCmd = require('./runCmd');
+
+module.exports = function (done) {
+  if (process.env.NPM_CLI) {
+    done(process.env.NPM_CLI);
+    return;
+  }
+  runCmd('which', ['tnpm'], code => {
+    let npm = 'npm';
+    if (!code) {
+      npm = 'tnpm';
+    }
+    done(npm);
+  });
+};