Skip to content

Commit 6eb44ed

Browse files
cap-Bernarditocap-Bernardito
authored
refactor: code
BREAKING CHANGE: `postcss` options was moved to the `postcssOptions` option
1 parent 53da71a commit 6eb44ed

39 files changed

+738
-531
lines changed

‎README.md

+96-55
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,11 @@ npm i -D postcss-loader
3838
```js
3939
module.exports = {
4040
parser: 'sugarss',
41-
plugins: [['postcss-import', {}], ['postcss-preset-env'], 'postcss-short'],
41+
plugins: {
42+
'postcss-import': {},
43+
'postcss-preset-env': {},
44+
cssnano: {},
45+
},
4246
};
4347
```
4448

@@ -109,15 +113,12 @@ module.exports = {
109113

110114
<h2 align="center">Options</h2>
111115

112-
| Name | Type | Default | Description |
113-
| :------------------------: | :----------------------------------------------------------: | :----------------: | :------------------------------------------- |
114-
| [`exec`](#exec) | `{Boolean}` | `undefined` | Enable PostCSS Parser support in `CSS-in-JS` |
115-
| [`parser`](#syntaxes) | `{String\|Object\|Function}` | `undefined` | Set PostCSS Parser |
116-
| [`syntax`](#syntaxes) | `{String\|Object}` | `undefined` | Set PostCSS Syntax |
117-
| [`stringifier`](#syntaxes) | `{String\|Object\|Function}` | `undefined` | Set PostCSS Stringifier |
118-
| [`config`](#config) | `{String\|Object\|Boolean}` | `undefined` | Set `postcss.config.js` config path && `ctx` |
119-
| [`plugins`](#plugins) | `{Function\|Object\|Array<String\|Function\|Object\|Array>}` | `[]` | Set PostCSS Plugins |
120-
| [`sourceMap`](#sourcemap) | `{String\|Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
116+
| Name | Type | Default | Description |
117+
| :---------------------------------: | :-------------------------: | :-----------------------------------: | :---------------------------------------------- |
118+
| [`exec`](#exec) | `{Boolean}` | `undefined` | Enable PostCSS Parser support in `CSS-in-JS` |
119+
| [`config`](#config) | `{String\|Object\|Boolean}` | `undefined` | Set `postcss.config.js` config path && `ctx` |
120+
| [`postcssOptions`](#postcssOptions) | `{Object}` | `defaults values for Postcss.process` | Set Postcss.process options and postcss plugins |
121+
| [`sourceMap`](#sourcemap) | `{String\|Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps |
121122

122123
### `Exec`
123124

@@ -139,7 +140,12 @@ module.exports = {
139140
{ loader: 'css-loader', options: { importLoaders: 1 } },
140141
{
141142
loader: 'postcss-loader',
142-
options: { parser: 'sugarss', exec: true },
143+
options: {
144+
postcssOptions: {
145+
parser: 'sugarss',
146+
},
147+
exec: true,
148+
},
143149
},
144150
],
145151
},
@@ -290,7 +296,16 @@ module.exports = {
290296
};
291297
```
292298

293-
### `Plugins`
299+
### `postcssOptions`
300+
301+
| Name | Type | Default | Description |
302+
| :---------------------------: | :-------------------------------------------: | :---------: | :----------------------------- |
303+
| [`plugins`](#plugins) | `{Function\|Object\|Array<Function\|Object>}` | `[]` | Set PostCSS Plugins |
304+
| [`parser`](#parser) | `{String\|Object\|Function}` | `undefined` | Set custom PostCSS Parser |
305+
| [`syntax`](#syntax) | `{String\|Object}` | `undefined` | Set custom PostCSS Syntax |
306+
| [`stringifier`](#stringifier) | `{String\|Object\|Function}` | `undefined` | Set custom PostCSS Stringifier |
307+
308+
#### `Plugins`
294309

295310
Type: `Function|Object|Array<String|Function\|Object|Array>`
296311
Default: `[]`
@@ -352,11 +367,13 @@ module.exports = {
352367
test: /\.css$/i,
353368
loader: 'postcss-loader',
354369
options: {
355-
plugins: (loader) => [
356-
require('postcss-import')({ root: loader.resourcePath }),
357-
require('postcss-preset-env')(),
358-
require('cssnano')(),
359-
],
370+
postcssOptions: {
371+
plugins: (loader) => [
372+
require('postcss-import')({ root: loader.resourcePath }),
373+
require('postcss-preset-env')(),
374+
require('cssnano')(),
375+
],
376+
},
360377
},
361378
},
362379
],
@@ -394,11 +411,11 @@ It is possible to disable the plugin specified in the config.
394411

395412
```js
396413
module.exports = {
397-
plugins: [
398-
['postcss-short', { prefix: 'x' }],
399-
'postcss-import',
400-
'postcss-nested',
401-
],
414+
plugins: {
415+
'postcss-short': { prefix: 'x' },
416+
'postcss-import': {},
417+
'postcss-nested': {},
418+
},
402419
};
403420
```
404421

@@ -412,11 +429,13 @@ module.exports = {
412429
test: /\.css$/i,
413430
loader: 'postcss-loader',
414431
options: {
415-
plugins: {
416-
'postcss-import': {},
417-
'postcss-nested': {},
418-
// Turn off the plugin
419-
'postcss-short': false,
432+
postcssOptions: {
433+
plugins: {
434+
'postcss-import': {},
435+
'postcss-nested': {},
436+
// Turn off the plugin
437+
'postcss-short': false,
438+
},
420439
},
421440
},
422441
},
@@ -425,17 +444,6 @@ module.exports = {
425444
};
426445
```
427446

428-
### `Syntaxes`
429-
430-
Type: `String|Object`
431-
Default: `undefined`
432-
433-
| Name | Type | Default | Description |
434-
| :---------------------------: | :--------------------------: | :---------: | :------------------------- |
435-
| [`parser`](#parser) | `{String\|Object}` | `undefined` | Custom PostCSS Parser |
436-
| [`syntax`](#syntax) | `{String\|Object}` | `undefined` | Custom PostCSS Syntax |
437-
| [`stringifier`](#stringifier) | `{String\|Object\|Function}` | `undefined` | Custom PostCSS Stringifier |
438-
439447
#### `Parser`
440448

441449
Type: `String|Object|Function`
@@ -455,8 +463,10 @@ module.exports = {
455463
test: /\.sss$/i,
456464
loader: 'postcss-loader',
457465
options: {
458-
// Will be converted to `require('sugarss')`
459-
parser: 'sugarss',
466+
postcssOptions: {
467+
// Will be converted to `require('sugarss')`
468+
parser: 'sugarss',
469+
},
460470
},
461471
},
462472
],
@@ -476,7 +486,9 @@ module.exports = {
476486
test: /\.sss$/i,
477487
loader: 'postcss-loader',
478488
options: {
479-
parser: require('sugarss'),
489+
postcssOptions: {
490+
parser: require('sugarss'),
491+
},
480492
},
481493
},
482494
],
@@ -496,7 +508,9 @@ module.exports = {
496508
test: /\.sss$/i,
497509
loader: 'postcss-loader',
498510
options: {
499-
parser: require('sugarss').parse,
511+
postcssOptions: {
512+
parser: require('sugarss').parse,
513+
},
500514
},
501515
},
502516
],
@@ -523,8 +537,10 @@ module.exports = {
523537
test: /\.css$/i,
524538
loader: 'postcss-loader',
525539
options: {
526-
// Will be converted to `require('sugarss')`
527-
syntax: 'sugarss',
540+
postcssOptions: {
541+
// Will be converted to `require('sugarss')`
542+
syntax: 'sugarss',
543+
},
528544
},
529545
},
530546
],
@@ -544,7 +560,9 @@ module.exports = {
544560
test: /\.css$/i,
545561
loader: 'postcss-loader',
546562
options: {
547-
stringifier: require('sugarss'),
563+
postcssOptions: {
564+
stringifier: require('sugarss'),
565+
},
548566
},
549567
},
550568
],
@@ -571,8 +589,10 @@ module.exports = {
571589
test: /\.css$/i,
572590
loader: 'postcss-loader',
573591
options: {
574-
// Will be converted to `require('sugarss')`
575-
stringifier: 'sugarss',
592+
postcssOptions: {
593+
// Will be converted to `require('sugarss')`
594+
stringifier: 'sugarss',
595+
},
576596
},
577597
},
578598
],
@@ -592,7 +612,9 @@ module.exports = {
592612
test: /\.css$/i,
593613
loader: 'postcss-loader',
594614
options: {
595-
stringifier: require('sugarss'),
615+
postcssOptions: {
616+
stringifier: require('sugarss'),
617+
},
596618
},
597619
},
598620
],
@@ -615,7 +637,9 @@ module.exports = {
615637
test: /\.css$/i,
616638
loader: 'postcss-loader',
617639
options: {
618-
stringifier: midas.stringifier,
640+
postcssOptions: {
641+
stringifier: midas.stringifier,
642+
},
619643
},
620644
},
621645
],
@@ -707,7 +731,9 @@ module.exports = {
707731
{
708732
loader: 'postcss-loader',
709733
options: {
710-
plugins: ['postcss-import', 'stylelint'],
734+
postcssOptions: {
735+
plugins: ['postcss-import', 'stylelint'],
736+
},
711737
},
712738
},
713739
],
@@ -733,7 +759,9 @@ module.exports = {
733759
{
734760
loader: 'postcss-loader',
735761
options: {
736-
plugins: [['autoprefixer', { ...options }]],
762+
postcssOptions: {
763+
plugins: [['autoprefixer', { ...options }]],
764+
},
737765
},
738766
},
739767
],
@@ -797,7 +825,14 @@ module.exports = {
797825
use: [
798826
'style-loader',
799827
{ loader: 'css-loader', options: { importLoaders: 2 } },
800-
{ loader: 'postcss-loader', options: { parser: 'postcss-js' } },
828+
{
829+
loader: 'postcss-loader',
830+
options: {
831+
postcssOptions: {
832+
parser: 'postcss-js',
833+
},
834+
},
835+
},
801836
'babel-loader',
802837
],
803838
},
@@ -896,7 +931,9 @@ module.exports = {
896931
{
897932
loader: 'postcss-loader',
898933
options: {
899-
plugins: [postcssPlugin()],
934+
postcssOptions: {
935+
plugins: [postcssPlugin()],
936+
},
900937
},
901938
},
902939
],
@@ -942,7 +979,9 @@ module.exports = {
942979
{
943980
loader: 'postcss-loader',
944981
options: {
945-
plugins: [postcssPlugin()],
982+
postcssOptions: {
983+
plugins: [postcssPlugin()],
984+
},
946985
},
947986
},
948987
],
@@ -982,7 +1021,9 @@ module.exports = {
9821021

9831022
```js
9841023
module.exports = (loaderContext) => ({
985-
plugins: [require('path/to/customPlugin')(loaderContext)],
1024+
postcssOptions: {
1025+
plugins: [require('path/to/customPlugin')(loaderContext)],
1026+
},
9861027
});
9871028
```
9881029

0 commit comments

Comments
 (0)