add styleLibraryDirectory option, fixes #381

umijs · Nov 23, 2019 · aeb9193 · aeb9193
1 parent 8efa514
commit aeb9193
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/README.md b/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.

diff --git a/src/Plugin.js b/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`);

diff --git a/src/index.js b/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,