Skip to content

Commit 9100905

Browse files
feat: the ability to disable plugins (#442)
1 parent 6b1da04 commit 9100905

File tree

6 files changed

+138
-15
lines changed

6 files changed

+138
-15
lines changed

README.md

Lines changed: 82 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,9 @@ If you use JS styles without the [`postcss-js`][postcss-js] parser, add the `exe
143143
Type: `Boolean|String|Object`
144144
Default: `undefined`
145145

146+
Options specified in the config file are combined with options passed to the loader.
147+
Loader options overwrite options from config.
148+
146149
#### Boolean
147150

148151
Enables/Disables autoloading config.
@@ -264,21 +267,89 @@ module.exports = ({ file, options, env }) => ({
264267
**`webpack.config.js`**
265268

266269
```js
267-
{
268-
loader: 'postcss-loader',
269-
options: {
270-
ident: 'postcss',
271-
plugins: (loader) => [
272-
require('postcss-import')({ root: loader.resourcePath }),
273-
require('postcss-preset-env')(),
274-
require('cssnano')()
275-
]
276-
}
277-
}
270+
module.exports = {
271+
module: {
272+
rules: [
273+
{
274+
test: /\.css$/i,
275+
loader: 'postcss-loader',
276+
options: {
277+
ident: 'postcss',
278+
plugins: (loader) => [
279+
require('postcss-import')({ root: loader.resourcePath }),
280+
require('postcss-preset-env')(),
281+
require('cssnano')(),
282+
],
283+
},
284+
},
285+
],
286+
},
287+
};
278288
```
279289

280290
> ⚠️ webpack requires an identifier (`ident`) in `options` when `{Function}/require` is used (Complex Options). The `ident` can be freely named as long as it is unique. It's recommended to name it (`ident: 'postcss'`)
281291
292+
**`webpack.config.js`**
293+
294+
```js
295+
module.exports = {
296+
module: {
297+
rules: [
298+
{
299+
test: /\.css$/i,
300+
loader: 'postcss-loader',
301+
options: {
302+
ident: 'postcss',
303+
plugins: {
304+
'postcss-import': {},
305+
'postcss-nested': {},
306+
'postcss-short': { prefix: 'x' },
307+
},
308+
},
309+
},
310+
],
311+
},
312+
};
313+
```
314+
315+
It is possible to disable the plugin specified in the config.
316+
317+
**`postcss.config.js`**
318+
319+
```js
320+
module.exports = {
321+
plugins: {
322+
'postcss-short': { prefix: 'x' },
323+
'postcss-import': {},
324+
'postcss-nested': {},
325+
},
326+
};
327+
```
328+
329+
**`webpack.config.js`**
330+
331+
```js
332+
module.exports = {
333+
module: {
334+
rules: [
335+
{
336+
test: /\.css$/i,
337+
loader: 'postcss-loader',
338+
options: {
339+
ident: 'postcss',
340+
plugins: {
341+
'postcss-import': {},
342+
'postcss-nested': {},
343+
// Turn off the plugin
344+
'postcss-short': false,
345+
},
346+
},
347+
},
348+
],
349+
},
350+
};
351+
```
352+
282353
### `Syntaxes`
283354

284355
| Name | Type | Default | Description |

src/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,13 @@ export default async function loader(content, sourceMap, meta = {}) {
7777

7878
let plugins;
7979

80+
const disabledPlugins = [];
81+
8082
try {
8183
plugins = [
8284
...getArrayPlugins(loadedConfig.plugins, file),
83-
...getArrayPlugins(options.plugins, file),
84-
];
85+
...getArrayPlugins(options.plugins, file, disabledPlugins),
86+
].filter((i) => !disabledPlugins.includes(i.postcssPlugin));
8587
} catch (error) {
8688
this.emitError(error);
8789
}

src/utils.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ function getPlugin(pluginEntry) {
165165
return Array.isArray(result) ? result : [result];
166166
}
167167

168-
function getArrayPlugins(plugins, file) {
168+
function getArrayPlugins(plugins, file, disabledPlugins) {
169169
if (Array.isArray(plugins)) {
170170
return plugins.reduce((accumulator, plugin) => {
171171
// eslint-disable-next-line no-param-reassign
@@ -180,7 +180,22 @@ function getArrayPlugins(plugins, file) {
180180
return [];
181181
}
182182

183-
return getArrayPlugins(loadPlugins(plugins, file), file);
183+
const statePlagins = {
184+
enabled: {},
185+
disabled: disabledPlugins || [],
186+
};
187+
188+
Object.entries(plugins).forEach((plugin) => {
189+
const [name, options] = plugin;
190+
191+
if (options === false) {
192+
statePlagins.disabled.push(name);
193+
} else {
194+
statePlagins.enabled[name] = options;
195+
}
196+
});
197+
198+
return getArrayPlugins(loadPlugins(statePlagins.enabled, file), file);
184199
}
185200

186201
return getPlugin(plugins);

test/fixtures/css/plugins.config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
plugins: {
3+
'postcss-short': { prefix: 'x' },
4+
'postcss-import': {},
5+
'postcss-nested': {},
6+
}
7+
}

test/options/__snapshots__/plugins.test.js.snap

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Options Plugins should disables plugin from config: css 1`] = `
4+
"a {
5+
-x-border-color: blue blue *;
6+
-x-color: * #fafafa;
7+
}
8+
"
9+
`;
10+
11+
exports[`Options Plugins should disables plugin from config: errors 1`] = `Array []`;
12+
13+
exports[`Options Plugins should disables plugin from config: warnings 1`] = `Array []`;
14+
315
exports[`Options Plugins should emit error on load plugin: errors 1`] = `
416
Array [
517
"ModuleBuildError: Module build failed (from \`replaced original path\`):

test/options/plugins.test.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,22 @@ describe('Options Plugins', () => {
142142
expect(getErrors(stats)).toMatchSnapshot('errors');
143143
});
144144

145+
it('should disables plugin from config', async () => {
146+
const compiler = getCompiler('./css/index2.js', {
147+
config: 'test/fixtures/css/plugins.config.js',
148+
plugins: {
149+
'postcss-short': false,
150+
},
151+
});
152+
const stats = await compile(compiler);
153+
154+
const codeFromBundle = getCodeFromBundle('style2.css', stats);
155+
156+
expect(codeFromBundle.css).toMatchSnapshot('css');
157+
expect(getWarnings(stats)).toMatchSnapshot('warnings');
158+
expect(getErrors(stats)).toMatchSnapshot('errors');
159+
});
160+
145161
it('should emit error on load plugin', async () => {
146162
const compiler = getCompiler('./css/index2.js', {
147163
plugins: {

0 commit comments

Comments
 (0)