Skip to content

Commit fcec43b

Browse files
evilebottnawievilebottnawi
authored
docs: improve
1 parent c673cf4 commit fcec43b

13 files changed

+220
-21
lines changed

‎README.md

+32-21
Original file line numberDiff line numberDiff line change
@@ -565,7 +565,6 @@ module.exports = {
565565
loader: 'css-loader',
566566
options: {
567567
modules: {
568-
// All files for which /\.module\.\w+$/i.test(filename) return true
569568
auto: true,
570569
},
571570
},
@@ -577,7 +576,7 @@ module.exports = {
577576

578577
###### `RegExp`
579578

580-
Enable css modules for files based on filename and satisfying `/youRegExp/.test(filename)` regex.
579+
Enable css modules for files based on a filename and satisfying your regex.
581580

582581
**webpack.config.js**
583582

@@ -590,8 +589,7 @@ module.exports = {
590589
loader: 'css-loader',
591590
options: {
592591
modules: {
593-
// All files for which /youRegExp/i.test(filename) return true
594-
auto: /youRegExp/i,
592+
auto: /\.custom-module\.\w+$/i,
595593
},
596594
},
597595
},
@@ -609,9 +607,7 @@ Setup `mode` option. You can omit the value when you want `local` mode.
609607

610608
###### `String`
611609

612-
Possible values:
613-
614-
`local`, `global`, `pure`
610+
Possible values - `local`, `global`, and `pure`.
615611

616612
**webpack.config.js**
617613

@@ -637,7 +633,7 @@ module.exports = {
637633

638634
Allows set different values for the `mode` option based on a filename
639635

640-
Possible return values - `local`, `global` and `pure`
636+
Possible return values - `local`, `global`, and `pure`.
641637

642638
**webpack.config.js**
643639

@@ -650,9 +646,13 @@ module.exports = {
650646
loader: 'css-loader',
651647
options: {
652648
modules: {
653-
// Callback must return "local", "global" or "pure"
654-
mode: (filename) => {
655-
if (/global.css$/i.test(filename)) {
649+
// Callback must return "local", "global", or "pure" values
650+
mode: (resourcePath) => {
651+
if (/pure.css$/i.test(resourcePath)) {
652+
return 'pure';
653+
}
654+
655+
if (/global.css$/i.test(resourcePath)) {
656656
return 'global';
657657
}
658658

@@ -1049,33 +1049,44 @@ For production builds it's recommended to extract the CSS from your bundle being
10491049

10501050
- As an alternative, if seeking better development performance and css outputs that mimic production. [extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev
10511051

1052-
### CSS modules and pure CSS
1052+
### Pure CSS, CSS modules and PostCSS
10531053

1054-
When you have pure CSS (without CSS modules) and CSS modules in project you can use this setup:
1054+
When you have pure CSS (without CSS modules), CSS modules and PostCSS in your project you can use this setup:
10551055

10561056
**webpack.config.js**
10571057

10581058
```js
10591059
module.exports = {
10601060
module: {
10611061
rules: [
1062-
{
1063-
// For pure CSS (without CSS modules)
1064-
test: /\.css$/i,
1065-
exclude: /\.module\.css$/i,
1066-
use: ['style-loader', 'css-loader'],
1067-
},
10681062
{
10691063
// For CSS modules
1070-
test: /\.module\.css$/i,
1064+
// For pure CSS - /\.css$/i,
1065+
// For Sass/SCSS - /\.((c|sa|sc)ss)$/i,
1066+
// For Less - /\.((c|le)ss)$/i,
1067+
test: /\.((c|sa|sc)ss)$/i,
10711068
use: [
10721069
'style-loader',
10731070
{
10741071
loader: 'css-loader',
10751072
options: {
1076-
modules: true,
1073+
// Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
1074+
// If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
1075+
importLoaders: 1,
1076+
// Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
1077+
modules: { auto: true },
10771078
},
10781079
},
1080+
{
1081+
loader: 'postcss-loader',
1082+
options: { plugins: () => [postcssPresetEnv({ stage: 0 })] },
1083+
},
1084+
// Can be `less-loader`
1085+
// The `test` property should be `\.less/i`
1086+
{
1087+
test: /\.s[ac]ss$/i,
1088+
loader: 'sass-loader',
1089+
},
10791090
],
10801091
},
10811092
{

‎test/__snapshots__/loader.test.js.snap

+70
Original file line numberDiff line numberDiff line change
@@ -578,6 +578,76 @@ a[href=\\"\\" i] {
578578
579579
exports[`loader should work with empty options: warnings 1`] = `Array []`;
580580
581+
exports[`loader should work with the "modules.auto" option and the "importLoaders" option: errors 1`] = `Array []`;
582+
583+
exports[`loader should work with the "modules.auto" option and the "importLoaders" option: result 1`] = `
584+
"/* Pure CSS */
585+
.imported-by-pure {
586+
overflow-x: hidden;
587+
overflow-y: auto;
588+
overflow: hidden auto;
589+
}
590+
.pure {
591+
color: red;
592+
}
593+
594+
/* PostCSS */
595+
.imported-by-postcss {
596+
overflow-x: hidden;
597+
overflow-y: auto;
598+
overflow: hidden auto;
599+
}
600+
.postcss {
601+
color: rgba(0, 0, 255, 0.9)
602+
}
603+
604+
.postcss:hover {
605+
color: #639;
606+
}
607+
608+
/* SCSS */
609+
.imported-by-scss {
610+
overflow-x: hidden;
611+
overflow-y: auto;
612+
overflow: hidden auto;
613+
}
614+
.scss {
615+
font: 100% Helvetica, sans-serif;
616+
color: #333;
617+
}
618+
/* CSS modules */
619+
.dA97I-anu7-0d9tFzAFON {
620+
overflow-x: hidden;
621+
overflow-y: auto;
622+
overflow: hidden auto;
623+
color: red;
624+
}
625+
626+
.global {
627+
color: blue;
628+
}
629+
630+
/* CSS modules + SCSS */
631+
.imported-by-module-scss {
632+
overflow-x: hidden;
633+
overflow-y: auto;
634+
overflow: hidden auto;
635+
}
636+
._2qRovssCxTKx1PYTv5qdNp {
637+
color: #333;
638+
overflow-x: hidden;
639+
overflow-y: auto;
640+
overflow: hidden auto;
641+
}
642+
643+
.global {
644+
color: #333;
645+
}
646+
"
647+
`;
648+
649+
exports[`loader should work with the "modules.auto" option and the "importLoaders" option: warnings 1`] = `Array []`;
650+
581651
exports[`loader should work: errors 1`] = `Array []`;
582652
583653
exports[`loader should work: module 1`] = `

‎test/fixtures/integration/css.module.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.local {
2+
overflow: hidden auto;
3+
color: red;
4+
}
5+
6+
:global(.global) {
7+
color: blue;
8+
}

‎test/fixtures/integration/imported-by-module-scss.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.imported-by-module-scss {
2+
overflow: hidden auto;
3+
}

‎test/fixtures/integration/imported-by-postcss.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.imported-by-postcss {
2+
overflow: hidden auto;
3+
}

‎test/fixtures/integration/imported-by-pure.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.imported-by-pure {
2+
overflow: hidden auto;
3+
}

‎test/fixtures/integration/imported-by-scss.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.imported-by-scss {
2+
overflow: hidden auto;
3+
}

‎test/fixtures/integration/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import css1 from './pure.css';
2+
import css2 from './postcss.css';
3+
import css3 from './scss.scss';
4+
import css4 from './css.module.css';
5+
import css5 from './scss.module.scss';
6+
7+
__export__ = `/* Pure CSS */\n${css1}\n/* PostCSS */\n${css2}\n/* SCSS */\n${css3}\n/* CSS modules */\n${css4}\n/* CSS modules + SCSS */\n${css5}\n`;
8+
9+
export default `/* Pure CSS */\n${css1}\n/* PostCSS */\n${css2}\n/* SCSS */\n${css3}\n/* CSS modules */\n${css4}\n/* CSS modules + SCSS */\n${css5}\n`;

‎test/fixtures/integration/postcss.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "./imported-by-postcss.css";
2+
3+
.postcss {
4+
color: rgb(0 0 100% / 90%);
5+
6+
&:hover {
7+
color: rebeccapurple;
8+
}
9+
}

‎test/fixtures/integration/pure.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "./imported-by-pure.css";
2+
3+
.pure {
4+
color: red;
5+
}

‎test/fixtures/integration/scss.module.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@import "./imported-by-module-scss.css";
2+
3+
$primary-color: #333;
4+
5+
.local {
6+
color: $primary-color;
7+
overflow: hidden auto;
8+
}
9+
10+
:global(.global) {
11+
color: $primary-color;
12+
}

‎test/fixtures/integration/scss.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "./imported-by-scss.css";
2+
3+
$font-stack: Helvetica, sans-serif;
4+
$primary-color: #333;
5+
6+
.scss {
7+
font: 100% $font-stack;
8+
color: $primary-color;
9+
}

‎test/loader.test.js

+54
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import path from 'path';
22

33
import { version } from 'webpack';
44

5+
import postcssPresetEnv from 'postcss-preset-env';
6+
57
import {
68
compile,
79
getCompiler,
@@ -352,4 +354,56 @@ describe('loader', () => {
352354
expect(getWarnings(stats)).toMatchSnapshot('warnings');
353355
expect(getErrors(stats)).toMatchSnapshot('errors');
354356
});
357+
358+
it('should work with the "modules.auto" option and the "importLoaders" option', async () => {
359+
const compiler = getCompiler(
360+
'./integration/index.js',
361+
{},
362+
{
363+
module: {
364+
rules: [
365+
{
366+
test: /\.((c|sa|sc)ss)$/i,
367+
rules: [
368+
{
369+
loader: path.resolve(__dirname, '../src'),
370+
options: {
371+
// Run only `postcss-loader` on each `@import`
372+
// If you need run `sass-loader` and `postcss-loader` please set it to `2`
373+
importLoaders: 1,
374+
// Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
375+
modules: { auto: true },
376+
},
377+
},
378+
{
379+
loader: 'postcss-loader',
380+
options: { plugins: () => [postcssPresetEnv({ stage: 0 })] },
381+
},
382+
// Can be `less-loader`
383+
// The `test` property should be `\.less/i`
384+
{
385+
test: /\.s[ac]ss$/i,
386+
loader: 'sass-loader',
387+
},
388+
],
389+
},
390+
{
391+
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
392+
loader: 'url-loader',
393+
options: {
394+
limit: 8192,
395+
},
396+
},
397+
],
398+
},
399+
}
400+
);
401+
const stats = await compile(compiler);
402+
403+
expect(getExecutedCode('main.bundle.js', compiler, stats)).toMatchSnapshot(
404+
'result'
405+
);
406+
expect(getWarnings(stats)).toMatchSnapshot('warnings');
407+
expect(getErrors(stats)).toMatchSnapshot('errors');
408+
});
355409
});

0 commit comments

Comments
 (0)