diff --git a/README.md b/README.md index 87e2b2d..6cfa624 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ Pull requests will be ignored and closed if there is a failing build on Travis C # Craco Ant Design Plugin This is a [craco](https://github.com/sharegate/craco) plugin that makes it easy to use the [Ant Design](https://ant.design/) UI library with [create-react-app](https://facebook.github.io/create-react-app/) version >= 2. +[Ant Design Mobile](https://mobile.ant.design/) is also supported. > Use [react-app-rewired](https://github.com/timarney/react-app-rewired) for `create-react-app` version 1. @@ -93,6 +94,23 @@ module.exports = { }; ``` +If you would like to enable `antd-mobile` support, add `options` object with `mobile` property set to `true` + +```js +const CracoAntDesignPlugin = require("craco-antd"); + +module.exports = { + plugins: [ + { + plugin: CracoAntDesignPlugin, + options: { + mobile: true, + }, + }, + ], +}; +``` + ## Advanced Usage Here is a production-ready `craco.config.js` file that sets up [`webpackbar`](https://github.com/nuxt/webpackbar) and [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer). @@ -249,6 +267,7 @@ See the [`craco-less`](https://github.com/DocSpring/craco-less#configuration) do See the [`babel-plugin-import`](https://github.com/ant-design/babel-plugin-import#options) documentation for more information about this option: - `options.babelPluginImportOptions` +- `options.babelPluginImportOptionsMobile` - `babel-plugin-import` options for ant-mobile Example: @@ -258,6 +277,7 @@ module.exports = { { plugin: CracoAntDesignPlugin, options: { + mobile: true, lessLoaderOptions: { modifyVars: { "@primary-color": "#1DA57A" }, strictMath: true, @@ -270,6 +290,9 @@ module.exports = { babelPluginImportOptions: { libraryDirectory: "es", }, + babelPluginImportOptionsMobile: { + libraryDirectory: "es", + }, }, }, ], diff --git a/lib/craco-antd.dev.test.js b/lib/craco-antd.dev.test.js index be80629..820b0a6 100644 --- a/lib/craco-antd.dev.test.js +++ b/lib/craco-antd.dev.test.js @@ -54,6 +54,7 @@ test("the webpack config is modified correctly with all options and Less vars", { plugin: CracoAntDesignPlugin, options: { + mobile: true, lessLoaderOptions: { lessOptions: { modifyVars: { @@ -89,6 +90,9 @@ test("the webpack config is modified correctly with all options and Less vars", babelPluginImportOptions: { libraryDirectory: "es", }, + babelPluginImportOptionsMobile: { + libraryDirectory: "es", + }, }, }, ], @@ -109,6 +113,11 @@ test("the webpack config is modified correctly with all options and Less vars", "import", { libraryName: "antd", libraryDirectory: "es", style: true }, ]); + expect(jsRule.options.plugins[2]).toEqual([ + "import", + { libraryName: "antd-mobile", libraryDirectory: "es", style: true }, + "antd-mobile", + ]); const lessRule = oneOfRules.oneOf.find( (r) => r.test && r.test.toString() === "/\\.less$/" diff --git a/lib/craco-antd.js b/lib/craco-antd.js index 7557c8f..ac4217d 100644 --- a/lib/craco-antd.js +++ b/lib/craco-antd.js @@ -99,6 +99,25 @@ module.exports = { // `style: true` loads the original Less so that variables can be modified. // See: https://github.com/DocSpring/craco-antd/issues/3 cracoConfig.babel.plugins.push(["import", babelPluginImportOptions]); + + if (pluginOptions && pluginOptions.mobile) { + const babelPluginImportOptions = { + libraryName: "antd-mobile", + libraryDirectory: "lib", + style: true, + }; + if (pluginOptions.babelPluginImportOptionsMobile) { + Object.assign( + babelPluginImportOptions, + pluginOptions.babelPluginImportOptionsMobile + ); + } + cracoConfig.babel.plugins.push([ + "import", + babelPluginImportOptions, + "antd-mobile", + ]); + } return cracoConfig; }, }; diff --git a/lib/craco-antd.prod.test.js b/lib/craco-antd.prod.test.js index fa796d8..7fd5625 100644 --- a/lib/craco-antd.prod.test.js +++ b/lib/craco-antd.prod.test.js @@ -54,6 +54,7 @@ test("the webpack config is modified correctly with all options and Less vars", { plugin: CracoAntDesignPlugin, options: { + mobile: true, lessLoaderOptions: { lessOptions: { modifyVars: { @@ -89,6 +90,9 @@ test("the webpack config is modified correctly with all options and Less vars", babelPluginImportOptions: { libraryDirectory: "es", }, + babelPluginImportOptionsMobile: { + libraryDirectory: "es", + }, }, }, ], @@ -109,6 +113,11 @@ test("the webpack config is modified correctly with all options and Less vars", "import", { libraryName: "antd", libraryDirectory: "es", style: true }, ]); + expect(jsRule.options.plugins[2]).toEqual([ + "import", + { libraryName: "antd-mobile", libraryDirectory: "es", style: true }, + "antd-mobile", + ]); const lessRule = oneOfRules.oneOf.find( (r) => r.test && r.test.toString() === "/\\.less$/"