Skip to content

Commit 9d925ff

Browse files
evilebottnawievilebottnawi
authored
feat: allow the additionalData to be async (#902)
1 parent e4afcd7 commit 9d925ff

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+3026
-2397
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,4 @@
11
module.exports = {
22
root: true,
3-
extends: ['@webpack-contrib/eslint-config-webpack', 'prettier'],
4-
overrides: [
5-
{
6-
files: [
7-
'test/watch/**/*.js',
8-
'test/hmr/**/*.js',
9-
'test/extractText/**/*.js',
10-
'test/helpers/testLoader.js',
11-
],
12-
rules: {
13-
strict: 'off',
14-
},
15-
},
16-
],
3+
extends: ["@webpack-contrib/eslint-config-webpack", "prettier"],
174
};

‎.prettierrc.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎README.md‎

Lines changed: 95 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Then add the loader to your Webpack configuration. For example:
4242
**app.js**
4343

4444
```js
45-
import './style.scss';
45+
import "./style.scss";
4646
```
4747

4848
**style.scss**
@@ -65,11 +65,11 @@ module.exports = {
6565
test: /\.s[ac]ss$/i,
6666
use: [
6767
// Creates `style` nodes from JS strings
68-
'style-loader',
68+
"style-loader",
6969
// Translates CSS into CommonJS
70-
'css-loader',
70+
"css-loader",
7171
// Compiles Sass to CSS
72-
'sass-loader',
72+
"sass-loader",
7373
],
7474
},
7575
],
@@ -86,7 +86,7 @@ Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org
8686
The `sass-loader` uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from `node_modules`. Just prepend them with a `~` to tell Webpack that this is not a relative import:
8787

8888
```scss
89-
@import '~bootstrap';
89+
@import "~bootstrap";
9090
```
9191

9292
It's important to only prepend it with `~`, because `~/` resolves to the home directory.
@@ -167,13 +167,13 @@ module.exports = {
167167
{
168168
test: /\.s[ac]ss$/i,
169169
use: [
170-
'style-loader',
171-
'css-loader',
170+
"style-loader",
171+
"css-loader",
172172
{
173-
loader: 'sass-loader',
173+
loader: "sass-loader",
174174
options: {
175175
// Prefer `dart-sass`
176-
implementation: require('sass'),
176+
implementation: require("sass"),
177177
},
178178
},
179179
],
@@ -211,12 +211,12 @@ module.exports = {
211211
{
212212
test: /\.s[ac]ss$/i,
213213
use: [
214-
'style-loader',
215-
'css-loader',
214+
"style-loader",
215+
"css-loader",
216216
{
217-
loader: 'sass-loader',
217+
loader: "sass-loader",
218218
options: {
219-
implementation: require('sass'),
219+
implementation: require("sass"),
220220
sassOptions: {
221221
fiber: false,
222222
},
@@ -240,14 +240,14 @@ module.exports = {
240240
{
241241
test: /\.s[ac]ss$/i,
242242
use: [
243-
'style-loader',
244-
'css-loader',
243+
"style-loader",
244+
"css-loader",
245245
{
246-
loader: 'sass-loader',
246+
loader: "sass-loader",
247247
options: {
248-
implementation: require('sass'),
248+
implementation: require("sass"),
249249
sassOptions: {
250-
fiber: require('fibers'),
250+
fiber: require("fibers"),
251251
},
252252
},
253253
},
@@ -293,14 +293,14 @@ module.exports = {
293293
{
294294
test: /\.s[ac]ss$/i,
295295
use: [
296-
'style-loader',
297-
'css-loader',
296+
"style-loader",
297+
"css-loader",
298298
{
299-
loader: 'sass-loader',
299+
loader: "sass-loader",
300300
options: {
301301
sassOptions: {
302302
indentWidth: 4,
303-
includePaths: ['absolute/path/a', 'absolute/path/b'],
303+
includePaths: ["absolute/path/a", "absolute/path/b"],
304304
},
305305
},
306306
},
@@ -322,24 +322,24 @@ module.exports = {
322322
{
323323
test: /\.s[ac]ss$/i,
324324
use: [
325-
'style-loader',
326-
'css-loader',
325+
"style-loader",
326+
"css-loader",
327327
{
328-
loader: 'sass-loader',
328+
loader: "sass-loader",
329329
options: {
330330
sassOptions: (loaderContext) => {
331331
// More information about available properties https://webpack.js.org/api/loaders/
332332
const { resourcePath, rootContext } = loaderContext;
333333
const relativePath = path.relative(rootContext, resourcePath);
334334

335-
if (relativePath === 'styles/foo.scss') {
335+
if (relativePath === "styles/foo.scss") {
336336
return {
337-
includePaths: ['absolute/path/c', 'absolute/path/d'],
337+
includePaths: ["absolute/path/c", "absolute/path/d"],
338338
};
339339
}
340340

341341
return {
342-
includePaths: ['absolute/path/a', 'absolute/path/b'],
342+
includePaths: ["absolute/path/a", "absolute/path/b"],
343343
};
344344
},
345345
},
@@ -372,15 +372,15 @@ module.exports = {
372372
{
373373
test: /\.s[ac]ss$/i,
374374
use: [
375-
'style-loader',
375+
"style-loader",
376376
{
377-
loader: 'css-loader',
377+
loader: "css-loader",
378378
options: {
379379
sourceMap: true,
380380
},
381381
},
382382
{
383-
loader: 'sass-loader',
383+
loader: "sass-loader",
384384
options: {
385385
sourceMap: true,
386386
},
@@ -405,14 +405,14 @@ module.exports = {
405405
{
406406
test: /\.s[ac]ss$/i,
407407
use: [
408-
'style-loader',
409-
'css-loader',
408+
"style-loader",
409+
"css-loader",
410410
{
411-
loader: 'sass-loader',
411+
loader: "sass-loader",
412412
options: {
413413
sourceMap: true,
414414
sassOptions: {
415-
outputStyle: 'compressed',
415+
outputStyle: "compressed",
416416
},
417417
},
418418
},
@@ -442,12 +442,12 @@ module.exports = {
442442
{
443443
test: /\.s[ac]ss$/i,
444444
use: [
445-
'style-loader',
446-
'css-loader',
445+
"style-loader",
446+
"css-loader",
447447
{
448-
loader: 'sass-loader',
448+
loader: "sass-loader",
449449
options: {
450-
additionalData: '$env: ' + process.env.NODE_ENV + ';',
450+
additionalData: "$env: " + process.env.NODE_ENV + ";",
451451
},
452452
},
453453
],
@@ -459,28 +459,64 @@ module.exports = {
459459

460460
#### `Function`
461461

462+
##### Sync
463+
462464
```js
463465
module.exports = {
464466
module: {
465467
rules: [
466468
{
467469
test: /\.s[ac]ss$/i,
468470
use: [
469-
'style-loader',
470-
'css-loader',
471+
"style-loader",
472+
"css-loader",
471473
{
472-
loader: 'sass-loader',
474+
loader: "sass-loader",
473475
options: {
474476
additionalData: (content, loaderContext) => {
475477
// More information about available properties https://webpack.js.org/api/loaders/
476478
const { resourcePath, rootContext } = loaderContext;
477479
const relativePath = path.relative(rootContext, resourcePath);
478480

479-
if (relativePath === 'styles/foo.scss') {
480-
return '$value: 100px;' + content;
481+
if (relativePath === "styles/foo.scss") {
482+
return "$value: 100px;" + content;
483+
}
484+
485+
return "$value: 200px;" + content;
486+
},
487+
},
488+
},
489+
],
490+
},
491+
],
492+
},
493+
};
494+
```
495+
496+
##### Async
497+
498+
```js
499+
module.exports = {
500+
module: {
501+
rules: [
502+
{
503+
test: /\.s[ac]ss$/i,
504+
use: [
505+
"style-loader",
506+
"css-loader",
507+
{
508+
loader: "sass-loader",
509+
options: {
510+
additionalData: async (content, loaderContext) => {
511+
// More information about available properties https://webpack.js.org/api/loaders/
512+
const { resourcePath, rootContext } = loaderContext;
513+
const relativePath = path.relative(rootContext, resourcePath);
514+
515+
if (relativePath === "styles/foo.scss") {
516+
return "$value: 100px;" + content;
481517
}
482518

483-
return '$value: 200px;' + content;
519+
return "$value: 200px;" + content;
484520
},
485521
},
486522
},
@@ -510,10 +546,10 @@ module.exports = {
510546
{
511547
test: /\.s[ac]ss$/i,
512548
use: [
513-
'style-loader',
514-
'css-loader',
549+
"style-loader",
550+
"css-loader",
515551
{
516-
loader: 'sass-loader',
552+
loader: "sass-loader",
517553
options: {
518554
webpackImporter: false,
519555
},
@@ -539,7 +575,7 @@ There are two possibilities to extract a style sheet from the bundle:
539575
**webpack.config.js**
540576

541577
```js
542-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
578+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
543579

544580
module.exports = {
545581
module: {
@@ -548,11 +584,11 @@ module.exports = {
548584
test: /\.s[ac]ss$/i,
549585
use: [
550586
// fallback to style-loader in development
551-
process.env.NODE_ENV !== 'production'
552-
? 'style-loader'
587+
process.env.NODE_ENV !== "production"
588+
? "style-loader"
553589
: MiniCssExtractPlugin.loader,
554-
'css-loader',
555-
'sass-loader',
590+
"css-loader",
591+
"sass-loader",
556592
],
557593
},
558594
],
@@ -561,8 +597,8 @@ module.exports = {
561597
new MiniCssExtractPlugin({
562598
// Options similar to the same options in webpackOptions.output
563599
// both options are optional
564-
filename: '[name].css',
565-
chunkFilename: '[id].css',
600+
filename: "[name].css",
601+
chunkFilename: "[id].css",
566602
}),
567603
],
568604
};
@@ -578,21 +614,21 @@ To enable CSS source maps, you'll need to pass the `sourceMap` option to the `sa
578614

579615
```javascript
580616
module.exports = {
581-
devtool: 'source-map', // any "source-map"-like devtool is possible
617+
devtool: "source-map", // any "source-map"-like devtool is possible
582618
module: {
583619
rules: [
584620
{
585621
test: /\.s[ac]ss$/i,
586622
use: [
587-
'style-loader',
623+
"style-loader",
588624
{
589-
loader: 'css-loader',
625+
loader: "css-loader",
590626
options: {
591627
sourceMap: true,
592628
},
593629
},
594630
{
595-
loader: 'sass-loader',
631+
loader: "sass-loader",
596632
options: {
597633
sourceMap: true,
598634
},

‎babel.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ module.exports = (api) => {
77
return {
88
presets: [
99
[
10-
'@babel/preset-env',
10+
"@babel/preset-env",
1111
{
1212
targets: {
13-
node: '10.13.0',
13+
node: "10.13.0",
1414
},
1515
},
1616
],

‎commitlint.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
extends: ['@commitlint/config-conventional'],
2+
extends: ["@commitlint/config-conventional"],
33
};

‎husky.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
22
hooks: {
3-
'pre-commit': 'lint-staged',
4-
'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
3+
"pre-commit": "lint-staged",
4+
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
55
},
66
};

‎jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
testEnvironment: 'node',
2+
testEnvironment: "node",
33
};

‎lint-staged.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
2-
'*.js': ['prettier --write', 'eslint --fix'],
3-
'*.{json,md,yml,css,ts}': ['prettier --write'],
2+
"*.js": ["eslint --fix", "prettier --write"],
3+
"*.{json,md,yml,css,ts}": ["prettier --write"],
44
};

0 commit comments

Comments
 (0)