fix: fix ${theme}-theme.js file order (#23243)

* fix: fix ${theme}-theme.js file order

* chore: add generateThemeFileContent test

* chore: add test

* patch

* update docs

* update docs

* update docs

.antd-tools.config.js

@@ -6,6 +6,14 @@ 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'))) {
@@ -81,11 +89,7 @@ function buildThemeFile(theme, vars) {
 
   fs.writeFileSync(
     path.join(process.cwd(), 'dist', `${theme}-theme.js`),
-    `const { ${theme}ThemeSingle } = require('./theme');\nconst defaultTheme = require('./default-theme');\n
-module.exports = {
-  ...${theme}ThemeSingle,
-  ...defaultTheme
-}`,
+    generateThemeFileContent(theme),
   );
 
   // eslint-disable-next-line no-console
@@ -151,5 +155,6 @@ module.exports = {
   dist: {
     finalize: finalizeDist,
   },
+  generateThemeFileContent,
 };
 finalizeDist();

docs/react/customize-theme.en-US.md

@@ -177,7 +177,7 @@ If the project does not use Less, you can import [antd.dark.css](https://unpkg.c
 @import '~antd/dist/antd.compact.css';
 ```
 
-> Note that you don't need to import `antd/dist/antd.less` or `antd/dist/antd.css` anymore, please remove it, and remove babel-plugin-import `style` config too.
+> Note that you don't need to import `antd/dist/antd.less` or `antd/dist/antd.css` anymore, please remove it, and remove babel-plugin-import `style` config too. You can't enable two or more theme at the same time by this method.
 
 Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
 
@@ -206,8 +206,6 @@ module.exports = {
 };
 ```
 
-Use dark theme and compact theme at the same time will cause double css bundle size in current implementation, please be aware of this.
-
 ## Related Articles
 
 - [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/)

docs/react/customize-theme.zh-CN.md

@@ -155,7 +155,7 @@ module.exports = {
 @import '~antd/dist/antd.compact.css';
 ```
 
-> 注意这种方式下你不需要再引入 `antd/dist/antd.less` 或 `antd/dist/antd.css` 了，可以安全移除掉。也不需要开启 babel-plugin-import 的 `style` 配置。
+> 注意这种方式下你不需要再引入 `antd/dist/antd.less` 或 `antd/dist/antd.css` 了，可以安全移除掉。也不需要开启 babel-plugin-import 的 `style` 配置。通过此方式不能同时配置两种及以上主题。
 
 方式三：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
 
@@ -184,8 +184,6 @@ module.exports = {
 };
 ```
 
-同时开启暗黑和紧凑模式会导致 css 的加载体积增加一倍，这暂时受限于我们目前的主题实现方式，请知晓。
-
 ## 社区教程
 
 - [Using Ant Design in Sass-Styled Webpack Projects with `antd-scss-theme-plugin`](https://intoli.com/blog/antd-scss-theme-plugin/)

tests/index.test.js

@@ -19,5 +19,73 @@ describe('antd dist files', () => {
       const antd = require('../dist/antd');
       expect(antd.version).toBe(pkg.version);
     });
+
+    /* eslint-disable global-require,import/no-unresolved */
+    const defaultTheme = require('../dist/default-theme');
+    const darkTheme = require('../dist/dark-theme');
+    const compactTheme = require('../dist/compact-theme');
+    const { getThemeVariables } = require('../dist/theme');
+    /* eslint-enable global-require,import/no-unresolved */
+
+    const expectThemeWithoutDark = theme => {
+      expect(theme['blue-3']).toBe("color(~`colorPalette('@{blue-6}', 3) `)");
+      expect(theme['body-background']).toBe('#fff');
+    };
+
+    const expectDarkTheme = theme => {
+      expect(theme['blue-3']).toBe('mix(@blue-base, @component-background, 30%)');
+      expect(theme['body-background']).toBe('@black');
+    };
+
+    const expectThemeWithoutCompact = theme => {
+      expect(theme['padding-lg']).toBe('24px');
+      expect(theme['padding-md']).toBe('16px');
+    };
+
+    const expectCompactTheme = theme => {
+      expect(theme['padding-lg']).toBe('16px');
+      expect(theme['padding-md']).toBe('8px');
+    };
+
+    describe('theme variables', () => {
+      it('should be get default theme', () => {
+        expectThemeWithoutDark(defaultTheme);
+        expectThemeWithoutCompact(defaultTheme);
+      });
+
+      it('should be get dark theme', () => {
+        expectDarkTheme(darkTheme);
+        expectThemeWithoutCompact(darkTheme);
+      });
+
+      it('should be get compact theme', () => {
+        expectCompactTheme(compactTheme);
+        expectThemeWithoutDark(compactTheme);
+      });
+
+      it('shoule get default variables by getThemeVariables()', () => {
+        const theme = getThemeVariables();
+        expectThemeWithoutCompact(theme);
+        expectThemeWithoutDark(theme);
+      });
+
+      it('shoule get dark variables by getThemeVariables({ dark: true })', () => {
+        const theme = getThemeVariables({ dark: true });
+        expectDarkTheme(theme);
+        expectThemeWithoutCompact(theme);
+      });
+
+      it('shoule get compact variables by getThemeVariables({ compact: true })', () => {
+        const theme = getThemeVariables({ compact: true });
+        expectThemeWithoutDark(theme);
+        expectCompactTheme(theme);
+      });
+
+      it('shoule get compact&dark variables by getThemeVariables({ compact: true, dark: true })', () => {
+        const theme = getThemeVariables({ compact: true, dark: true });
+        expectDarkTheme(theme);
+        expectCompactTheme(theme);
+      });
+    });
   }
 });