diff --git a/.antd-tools.config.js b/.antd-tools.config.js index 82409a567e..ee9de399e0 100644 --- a/.antd-tools.config.js +++ b/.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(); diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index a18d9da118..5c0ef52188 100644 --- a/docs/react/customize-theme.en-US.md +++ b/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/) diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 6533f69f20..9d2c47d0a3 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/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/) diff --git a/tests/index.test.js b/tests/index.test.js index d42db4cf9d..348983d9fb 100644 --- a/tests/index.test.js +++ b/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); + }); + }); } });