diff --git a/README.md b/README.md index 33a90d3..8516d92 100644 --- a/README.md +++ b/README.md @@ -208,7 +208,7 @@ Missing a configuration? [Raise an issue](https://github.com/gajus/babel-plugin- ```js type FiletypeOptionsType = {| +syntax: string, - +plugins?: $ReadOnlyArray + +plugins?: $ReadOnlyArray> |}; type FiletypesConfigurationType = { @@ -251,11 +251,25 @@ To add support for different CSS syntaxes (e.g. SCSS), perform the following two "filetypes": { ".scss": { "syntax": "postcss-scss", - "plugins": ["postcss-nested"] + "plugins": [ + "postcss-nested" + ] } } ``` - + + Postcss plugins can have options specified by wrapping the name and an options object in an array inside your config + + ```json + "plugins": [ + ["postcss-import-sync2", { + "path": ["src/styles", "shared/styles"] + }], + "postcss-nested" + ] + ``` + + ### Custom Attribute Mapping You can set your own attribute mapping rules using the `attributeNames` option. diff --git a/src/requireCssModule.js b/src/requireCssModule.js index d1d35ad..283718e 100644 --- a/src/requireCssModule.js +++ b/src/requireCssModule.js @@ -21,7 +21,7 @@ import type { type FiletypeOptionsType = {| +syntax: string, - +plugins?: $ReadOnlyArray + +plugins?: $ReadOnlyArray> |}; type FiletypesConfigurationType = { @@ -52,6 +52,13 @@ const getExtraPlugins = (filetypeOptions: ?FiletypeOptionsType): $ReadOnlyArray< } return filetypeOptions.plugins.map((plugin) => { + if (Array.isArray(plugin)) { + const [pluginName, pluginOptions] = plugin; + + // eslint-disable-next-line import/no-dynamic-require, global-require + return require(pluginName)(pluginOptions); + } + // eslint-disable-next-line import/no-dynamic-require, global-require return require(plugin); }); diff --git a/src/schemas/optionsSchema.json b/src/schemas/optionsSchema.json index 0a441c1..e14e525 100644 --- a/src/schemas/optionsSchema.json +++ b/src/schemas/optionsSchema.json @@ -15,7 +15,14 @@ "properties": { "plugins": { "items": { - "type": "string" + "oneOf": [ + { + "type": "string" + }, + { + "type": "array" + } + ] }, "type": "array" },