add styleLibraryDirectory option, fixes #381 (#382)

README.md

@@ -159,6 +159,27 @@ e.g.
 ]
 ```
 
+#### styleLibraryDirectory
+
+- `["import", { "libraryName": "element-ui", "styleLibraryDirectory": "lib/theme-chalk" }]`: import js and css modularly
+
+If `styleLibraryDirectory` is provided (default `null`), it will be used to form style file path,
+`style` will be ignored then. e.g.
+
+```javascript
+{
+  "libraryName": "element-ui",
+  "styleLibraryDirectory": "lib/theme-chalk",
+}
+
+import { Button } from 'element-ui';
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+var _button = require('element-ui/lib/button');
+require('element-ui/lib/theme-chalk/button');
+```
+
 #### customName
 
 We can use `customName` to customize import file path.
@@ -226,6 +247,10 @@ module.exports = function customName(name) {
 };
 ```
 
+#### customStyleName
+
+`customStyleName` works exactly the same as customName, except that it deals with style file path.
+
 #### transformToDefaultImport
 
 Set this option to `false` if your module does not have a `default` export.

src/Plugin.js

@@ -26,6 +26,8 @@ export default class Plugin {
     libraryName,
     libraryDirectory,
     style,
+    styleLibraryDirectory,
+    customStyleName,
     camel2DashComponentName,
     camel2UnderlineComponentName,
     fileName,
@@ -43,6 +45,8 @@ export default class Plugin {
       : camel2DashComponentName;
     this.camel2UnderlineComponentName = camel2UnderlineComponentName;
     this.style = style || false;
+    this.styleLibraryDirectory = styleLibraryDirectory;
+    this.customStyleName = normalizeCustomName(customStyleName);
     this.fileName = fileName || '';
     this.customName = normalizeCustomName(customName);
     this.transformToDefaultImport = typeof transformToDefaultImport === 'undefined'
@@ -74,7 +78,15 @@ export default class Plugin {
       pluginState.selectedMethods[methodName] = this.transformToDefaultImport  // eslint-disable-line
         ? addDefault(file.path, path, { nameHint: methodName })
         : addNamed(file.path, methodName, path);
-      if (style === true) {
+      if (this.customStyleName) {
+        const stylePath = winPath(this.customStyleName(transformedMethodName));
+        addSideEffect(file.path, `${stylePath}`);
+      } else if (this.styleLibraryDirectory) {
+        const stylePath = winPath(
+          join(this.libraryName, this.styleLibraryDirectory, transformedMethodName, this.fileName)
+        );
+        addSideEffect(file.path, `${stylePath}`);
+      } else if (style === true) {
         addSideEffect(file.path, `${path}/style`);
       } else if (style === 'css') {
         addSideEffect(file.path, `${path}/style/css`);

src/index.js

@@ -26,6 +26,8 @@ export default function ({ types }) {
             libraryName,
             libraryDirectory,
             style,
+            styleLibraryDirectory,
+            customStyleName,
             camel2DashComponentName,
             camel2UnderlineComponentName,
             fileName,
@@ -37,6 +39,8 @@ export default function ({ types }) {
               libraryName,
               libraryDirectory,
               style,
+              styleLibraryDirectory,
+              customStyleName,
               camel2DashComponentName,
               camel2UnderlineComponentName,
               fileName,
@@ -53,6 +57,8 @@ export default function ({ types }) {
               opts.libraryName,
               opts.libraryDirectory,
               opts.style,
+              opts.styleLibraryDirectory,
+              opts.customStyleName,
               opts.camel2DashComponentName,
               opts.camel2UnderlineComponentName,
               opts.fileName,

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

@@ -0,0 +1,5 @@
+import { Button } from 'element-ui';
+
+ReactDOM.render(<div>
+  <Button>xxxx</Button>
+</div>);

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("element-ui/lib/theme-light/button");
+
+var _button2 = _interopRequireDefault(require("element-ui/lib/button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ReactDOM.render(_react.default.createElement("div", null, _react.default.createElement(_button2.default, null, "xxxx")));

test/fixtures/style-library-name/actual.js

@@ -0,0 +1,5 @@
+import { Button } from 'element-ui';
+
+ReactDOM.render(<div>
+  <Button>xxxx</Button>
+</div>);

test/fixtures/style-library-name/expected.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+require("element-ui/lib/theme-chalk/button");
+
+var _button2 = _interopRequireDefault(require("element-ui/lib/button"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ReactDOM.render(_react.default.createElement("div", null, _react.default.createElement(_button2.default, null, "xxxx")));

test/index.test.js

@@ -90,6 +90,22 @@ describe('index', () => {
             },
           },
         ];
+      } else if (caseName === 'style-library-name') {
+        pluginWithOpts = [
+          plugin,
+          {
+            libraryName: 'element-ui',
+            styleLibraryDirectory: 'lib/theme-chalk',
+          },
+        ];
+      } else if (caseName === 'custom-style-name') {
+        pluginWithOpts = [
+          plugin,
+          {
+            libraryName: 'element-ui',
+            customStyleName: (name) => `element-ui/lib/theme-light/${name}`,
+          },
+        ];
       } else {
         pluginWithOpts = [
           plugin, { libraryName: 'antd' }