Antd mobile support

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",
+        },
       },
     },
   ],

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$/"

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;
   },
 };

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$/"