feat: add getThemeVar file to support theme config and fix 4.1.2 them… (

#23171) * feat: add getThemeVar file to support theme config and fix 4.1.2 theme config breaking change * patch
ant-design · Apr 13, 2020 · 291ebce · 291ebce
1 parent f386272
commit 291ebce
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 19 deletions.
diff --git a/.antd-tools.config.js b/.antd-tools.config.js
@@ -61,11 +61,31 @@ function buildThemeFile(theme, vars) {
   // eslint-disable-next-line no-console
   console.log(`Built a entry less file to dist/antd.${theme}.less`);
 
+  if (theme === 'default') {
+    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`),
-    `module.exports = ${JSON.stringify(vars, null, 2)};`,
+    `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
+module.exports = {
+  ...${theme}ThemeSingle,
+  ...defaultTheme
+}`,
   );
 
   // eslint-disable-next-line no-console
@@ -80,10 +100,46 @@ function finalizeDist() {
       '@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`,
+    );
     console.log('Built a entry less file to dist/antd.less');
     buildThemeFile('default', defaultVars);
     buildThemeFile('dark', darkVars);
     buildThemeFile('compact', compactVars);
+    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',
+      },
+    );
   }
 }
 
@@ -95,3 +151,4 @@ module.exports = {
     finalize: finalizeDist,
   },
 };
+finalizeDist();
diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
@@ -182,9 +182,7 @@ If the project does not use Less, you can import [antd.dark.css](https://unpkg.c
 Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
 
 ```diff
-const defaultTheme = require('antd/dist/default-theme');
-const darkTheme = require('antd/dist/dark-theme');
-const compactTheme = require('antd/dist/compact-theme');
+const { getThemeVariables } = require('antd/dist/theme');
 
 // webpack.config.js
 module.exports = {
@@ -197,12 +195,10 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: {
-+          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
-+          ...defaultTheme, // darkTheme and compactTheme depend on defaultTheme
-+          ...darkTheme,
-+          ...compactTheme,
-+       },
++       modifyVars: getThemeVariables({
++         dark: true, // enable dark mode
++         compact: true, // enable compact mode
++       }),
 +       javascriptEnabled: true,
 +     },
     }],

diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
@@ -160,9 +160,7 @@ module.exports = {
 方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
 
 ```diff
-const defaultTheme = require('antd/dist/default-theme');
-const darkTheme = require('antd/dist/dark-theme');
-const compactTheme = require('antd/dist/compact-theme');
+const { getThemeVariables } = require('antd/dist/theme');
 
 // webpack.config.js
 module.exports = {
@@ -175,12 +173,10 @@ module.exports = {
     }, {
       loader: 'less-loader', // compiles Less to CSS
 +     options: {
-+       modifyVars: {
-+          'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`,
-+          ...defaultTheme, // darkTheme 和 compactTheme 依赖 defaultTheme
-+          ...darkTheme,
-+          ...compactTheme,
-+       },
++       modifyVars: getThemeVariables({
++         dark: true, // 开启暗黑模式
++         compact: true, // 开启紧凑模式
++       }),
 +       javascriptEnabled: true,
 +     },
     }],