Skip to content

Commit 0ce3dd8

Browse files
evilebottnawievilebottnawi
authoredNov 11, 2020
feat: allow the additionalData to be async
·
v8.1.1v4.3.0
1 parent 1eb6520 commit 0ce3dd8

33 files changed

+2723
-3526
lines changed
 

‎.eslintrc.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
root: true,
3-
extends: ['@webpack-contrib/eslint-config-webpack', 'prettier'],
3+
extends: ["@webpack-contrib/eslint-config-webpack", "prettier"],
44
};

‎.prettierrc.js

-1
This file was deleted.

‎README.md

+86-50
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ module.exports = {
3434
rules: [
3535
{
3636
test: /\.styl$/,
37-
loader: 'stylus-loader', // compiles Styl to CSS
37+
loader: "stylus-loader", // compiles Styl to CSS
3838
},
3939
],
4040
},
@@ -75,13 +75,13 @@ module.exports = {
7575
test: /\.styl$/,
7676
use: [
7777
{
78-
loader: 'style-loader',
78+
loader: "style-loader",
7979
},
8080
{
81-
loader: 'css-loader',
81+
loader: "css-loader",
8282
},
8383
{
84-
loader: 'stylus-loader',
84+
loader: "stylus-loader",
8585
options: {
8686
stylusOptions: {
8787
/**
@@ -91,23 +91,23 @@ module.exports = {
9191
* @type {(string|Function)[]}
9292
* @default []
9393
*/
94-
use: ['nib'],
94+
use: ["nib"],
9595

9696
/**
9797
* Add path(s) to the import lookup paths.
9898
*
9999
* @type {string[]}
100100
* @default []
101101
*/
102-
include: [path.join(__dirname, 'src/styl/config')],
102+
include: [path.join(__dirname, "src/styl/config")],
103103

104104
/**
105105
* Import the specified Stylus files/paths.
106106
*
107107
* @type {string[]}
108108
* @default []
109109
*/
110-
import: ['nib', path.join(__dirname, 'src/styl/mixins')],
110+
import: ["nib", path.join(__dirname, "src/styl/mixins")],
111111

112112
/**
113113
* Define Stylus variables or functions.
@@ -117,8 +117,8 @@ module.exports = {
117117
*/
118118
// Array is the recommended syntax: [key, value, raw]
119119
define: [
120-
['$development', process.env.NODE_ENV === 'development'],
121-
['rawVar', 42, true],
120+
["$development", process.env.NODE_ENV === "development"],
121+
["rawVar", 42, true],
122122
],
123123
// Object is deprecated syntax (there is no possibility to specify "raw')
124124
// define: {
@@ -196,24 +196,24 @@ module.exports = {
196196
{
197197
test: /\.styl/,
198198
use: [
199-
'style-loader',
200-
'css-loader',
199+
"style-loader",
200+
"css-loader",
201201
{
202-
loader: 'stylus-loader',
202+
loader: "stylus-loader",
203203
options: {
204204
stylusOptions: (loaderContext) => {
205205
// More information about available properties https://webpack.js.org/api/loaders/
206206
const { resourcePath, rootContext } = loaderContext;
207207
const relativePath = path.relative(rootContext, resourcePath);
208208

209-
if (relativePath === 'styles/foo.styl') {
209+
if (relativePath === "styles/foo.styl") {
210210
return {
211-
paths: ['absolute/path/c', 'absolute/path/d'],
211+
paths: ["absolute/path/c", "absolute/path/d"],
212212
};
213213
}
214214

215215
return {
216-
paths: ['absolute/path/a', 'absolute/path/b'],
216+
paths: ["absolute/path/a", "absolute/path/b"],
217217
};
218218
},
219219
},
@@ -238,15 +238,15 @@ module.exports = {
238238
{
239239
test: /\.styl$/i,
240240
use: [
241-
'style-loader',
241+
"style-loader",
242242
{
243-
loader: 'css-loader',
243+
loader: "css-loader",
244244
options: {
245245
sourceMap: true,
246246
},
247247
},
248248
{
249-
loader: 'stylus-loader',
249+
loader: "stylus-loader",
250250
options: {
251251
sourceMap: true,
252252
},
@@ -277,10 +277,10 @@ module.exports = {
277277
{
278278
test: /\.styl/i,
279279
use: [
280-
'style-loader',
281-
'css-loader',
280+
"style-loader",
281+
"css-loader",
282282
{
283-
loader: 'stylus-loader',
283+
loader: "stylus-loader",
284284
options: {
285285
webpackImporter: false,
286286
},
@@ -313,10 +313,10 @@ module.exports = {
313313
{
314314
test: /\.styl/,
315315
use: [
316-
'style-loader',
317-
'css-loader',
316+
"style-loader",
317+
"css-loader",
318318
{
319-
loader: 'stylus-loader',
319+
loader: "stylus-loader",
320320
options: {
321321
additionalData: `@env: ${process.env.NODE_ENV};`,
322322
},
@@ -330,28 +330,64 @@ module.exports = {
330330

331331
#### `Function`
332332

333+
##### Sync
334+
333335
```js
334336
module.exports = {
335337
module: {
336338
rules: [
337339
{
338340
test: /\.styl/,
339341
use: [
340-
'style-loader',
341-
'css-loader',
342+
"style-loader",
343+
"css-loader",
342344
{
343-
loader: 'stylus-loader',
345+
loader: "stylus-loader",
344346
options: {
345347
additionalData: (content, loaderContext) => {
346348
// More information about available properties https://webpack.js.org/api/loaders/
347349
const { resourcePath, rootContext } = loaderContext;
348350
const relativePath = path.relative(rootContext, resourcePath);
349351

350-
if (relativePath === 'styles/foo.styl') {
351-
return 'value = 100px' + content;
352+
if (relativePath === "styles/foo.styl") {
353+
return "value = 100px" + content;
354+
}
355+
356+
return "value 200px" + content;
357+
},
358+
},
359+
},
360+
],
361+
},
362+
],
363+
},
364+
};
365+
```
366+
367+
##### Async
368+
369+
```js
370+
module.exports = {
371+
module: {
372+
rules: [
373+
{
374+
test: /\.styl/,
375+
use: [
376+
"style-loader",
377+
"css-loader",
378+
{
379+
loader: "stylus-loader",
380+
options: {
381+
additionalData: async (content, loaderContext) => {
382+
// More information about available properties https://webpack.js.org/api/loaders/
383+
const { resourcePath, rootContext } = loaderContext;
384+
const relativePath = path.relative(rootContext, resourcePath);
385+
386+
if (relativePath === "styles/foo.styl") {
387+
return "value = 100px" + content;
352388
}
353389

354-
return 'value 200px' + content;
390+
return "value 200px" + content;
355391
},
356392
},
357393
},
@@ -378,13 +414,13 @@ module.exports = {
378414
test: /\.styl$/,
379415
use: [
380416
{
381-
loader: 'style-loader', // creates style nodes from JS strings
417+
loader: "style-loader", // creates style nodes from JS strings
382418
},
383419
{
384-
loader: 'css-loader', // translates CSS into CommonJS
420+
loader: "css-loader", // translates CSS into CommonJS
385421
},
386422
{
387-
loader: 'stylus-loader', // compiles Stylus to CSS
423+
loader: "stylus-loader", // compiles Stylus to CSS
388424
},
389425
],
390426
},
@@ -401,21 +437,21 @@ To enable sourcemaps for CSS, you'll need to pass the `sourceMap` property in th
401437

402438
```javascript
403439
module.exports = {
404-
devtool: 'source-map', // any "source-map"-like devtool is possible
440+
devtool: "source-map", // any "source-map"-like devtool is possible
405441
module: {
406442
rules: [
407443
{
408444
test: /\.styl$/,
409445
use: [
410-
'style-loader',
446+
"style-loader",
411447
{
412-
loader: 'css-loader',
448+
loader: "css-loader",
413449
options: {
414450
sourceMap: true,
415451
},
416452
},
417453
{
418-
loader: 'stylus-loader',
454+
loader: "stylus-loader",
419455
options: {
420456
sourceMap: true,
421457
},
@@ -439,17 +475,17 @@ module.exports = {
439475
test: /\.styl$/,
440476
use: [
441477
{
442-
loader: 'style-loader', // creates style nodes from JS strings
478+
loader: "style-loader", // creates style nodes from JS strings
443479
},
444480
{
445-
loader: 'css-loader', // translates CSS into CommonJS
481+
loader: "css-loader", // translates CSS into CommonJS
446482
},
447483
{
448-
loader: 'stylus-loader', // compiles Stylus to CSS
484+
loader: "stylus-loader", // compiles Stylus to CSS
449485
options: {
450486
stylusOptions: {
451-
use: [require('nib')()],
452-
import: ['nib'],
487+
use: [require("nib")()],
488+
import: ["nib"],
453489
},
454490
},
455491
},
@@ -487,14 +523,14 @@ module.exports = {
487523
{
488524
test: /\.styl$/,
489525
use: [
490-
'style-loader',
491-
'css-loader',
526+
"style-loader",
527+
"css-loader",
492528
{
493-
loader: 'stylus-loader',
529+
loader: "stylus-loader",
494530
options: {
495531
stylusOptions: {
496532
// Specify the path. where to find files
497-
paths: ['node_modules/vars'],
533+
paths: ["node_modules/vars"],
498534
},
499535
},
500536
},
@@ -539,16 +575,16 @@ module.exports = {
539575
test: /\.styl/,
540576
use: [
541577
{
542-
loader: 'style-loader',
578+
loader: "style-loader",
543579
},
544580
{
545-
loader: 'css-loader',
581+
loader: "css-loader",
546582
},
547583
{
548-
loader: 'stylus-loader',
584+
loader: "stylus-loader",
549585
options: {
550586
stylusOptions: {
551-
paths: [path.resolve(__dirname, 'node_modules')],
587+
paths: [path.resolve(__dirname, "node_modules")],
552588
},
553589
},
554590
},

‎babel.config.js

+2-2
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
],

‎bench/fixtures/imports/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import './index.styl';
1+
import "./index.styl";

‎bench/fixtures/imports/webpack.config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
module.exports = {
22
context: __dirname,
3-
entry: './index.js',
3+
entry: "./index.js",
44
output: {
55
path: `${__dirname}/tmp`,
6-
filename: 'bundle.js',
6+
filename: "bundle.js",
77
},
88
module: {
99
rules: [
1010
{
1111
test: /\.styl$/,
1212
use: [
1313
{
14-
loader: require('path').join(__dirname, './testLoader.js'),
14+
loader: require("path").join(__dirname, "./testLoader.js"),
1515
},
1616
{
17-
loader: require('path').join(__dirname, '../../../dist/cjs.js'),
17+
loader: require("path").join(__dirname, "../../../dist/cjs.js"),
1818
options: {},
1919
},
2020
],

0 commit comments

Comments
 (0)
Please sign in to comment.