Merge pull request umijs#221 from GeoffZhu/master

Options style support customize & update README.md

README.md

@@ -117,6 +117,11 @@ For Example:
 - `["import", { "libraryName": "antd", "style": true }]`: import js and css modularly (LESS/Sass source files)
 - `["import", { "libraryName": "antd", "style": "css" }]`: import js and css modularly (css built files)
 
+If option style is a `Function`, `babel-plugin-import` will auto import the file which filepath equal to the function return value. This is useful for the components library developers.
+
+e.g. 
+- `["import", { "libraryName": "antd", "style": (name) => `${name}/style/2x` }]`: import js and css modularly & css file path is `ComponentName/style/2x`
+
 ### Note
 
 babel-plugin-import will not work properly if you add the library to the webpack config [vendor](https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code). 

src/Plugin.js

@@ -60,6 +60,8 @@ export default class Plugin {
         addSideEffect(file.path, `${path}/style`);
       } else if (style === 'css') {
         addSideEffect(file.path, `${path}/style/css`);
+      } else if (typeof style === 'function') {
+        addSideEffect(file.path, style(path));
       }
     }
     return Object.assign({}, this.selectedMethods[methodName]);

test/fixtures/custom-style-path/actual.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import { Button } from 'antd';
+
+ReactDOM.render(<div>
+  <Button>xxxx</Button>
+</div>, document.getElementById('react-container'));

test/fixtures/custom-style-path/expected.js

@@ -0,0 +1,13 @@
+"use strict";
+
+require("antd/lib/button/style/2x");
+
+var _button = _interopRequireDefault(require("antd/lib/button"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ReactDOM.render(_react.default.createElement("div", null, _react.default.createElement(_button.default, null, "xxxx")), document.getElementById('react-container'));

test/index-test.js

@@ -58,6 +58,14 @@ describe('index', () => {
             customName: (name) => `antd/lib/${name}`,
           },
         ];
+      } else if (caseName === 'custom-style-path') {
+        pluginWithOpts = [
+          plugin,
+          {
+            libraryName: 'antd',
+            style: (name) => `${name}/style/2x`,
+          },
+        ];
       } else {
         pluginWithOpts = [
           plugin, { libraryName: 'antd' }