diff --git a/README.md b/README.md index 0618a008..50735bdb 100644 --- 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 index bdd1190d..8de12294 100644 --- 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 index 35a69612..cb5484ad 100644 --- 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, diff --git a/test/fixtures/custom-style-name/actual.js b/test/fixtures/custom-style-name/actual.js new file mode 100644 index 00000000..9d46e32c --- /dev/null +++ b/test/fixtures/custom-style-name/actual.js @@ -0,0 +1,5 @@ +import { Button } from 'element-ui'; + +ReactDOM.render(