Skip to content

Commit

Permalink
feat: allow the additionalData to be async
Browse files Browse the repository at this point in the history
  • Loading branch information
@evilebottnawi
evilebottnawi committed Nov 11, 2020
1 parent 1eb6520 commit 0ce3dd8
Show file tree
Hide file tree
Showing 33 changed files with 2,723 additions and 3,526 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.js
View file
@@ -1,4 +1,4 @@
module.exports = {
root: true,
extends: ['@webpack-contrib/eslint-config-webpack', 'prettier'],
extends: ["@webpack-contrib/eslint-config-webpack", "prettier"],
};
1 change: 0 additions & 1 deletion .prettierrc.js
View file

This file was deleted.

136 changes: 86 additions & 50 deletions README.md
View file
Expand Up @@ -34,7 +34,7 @@ module.exports = {
rules: [
{
test: /\.styl$/,
loader: 'stylus-loader', // compiles Styl to CSS
loader: "stylus-loader", // compiles Styl to CSS
},
],
},
Expand Down Expand Up @@ -75,13 +75,13 @@ module.exports = {
test: /\.styl$/,
use: [
{
loader: 'style-loader',
loader: "style-loader",
},
{
loader: 'css-loader',
loader: "css-loader",
},
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
stylusOptions: {
/**
Expand All @@ -91,23 +91,23 @@ module.exports = {
* @type {(string|Function)[]}
* @default []
*/
use: ['nib'],
use: ["nib"],

/**
* Add path(s) to the import lookup paths.
*
* @type {string[]}
* @default []
*/
include: [path.join(__dirname, 'src/styl/config')],
include: [path.join(__dirname, "src/styl/config")],

/**
* Import the specified Stylus files/paths.
*
* @type {string[]}
* @default []
*/
import: ['nib', path.join(__dirname, 'src/styl/mixins')],
import: ["nib", path.join(__dirname, "src/styl/mixins")],

/**
* Define Stylus variables or functions.
Expand All @@ -117,8 +117,8 @@ module.exports = {
*/
// Array is the recommended syntax: [key, value, raw]
define: [
['$development', process.env.NODE_ENV === 'development'],
['rawVar', 42, true],
["$development", process.env.NODE_ENV === "development"],
["rawVar", 42, true],
],
// Object is deprecated syntax (there is no possibility to specify "raw')
// define: {
Expand Down Expand Up @@ -196,24 +196,24 @@ module.exports = {
{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
"style-loader",
"css-loader",
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
stylusOptions: (loaderContext) => {
// More information about available properties https://webpack.js.org/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);

if (relativePath === 'styles/foo.styl') {
if (relativePath === "styles/foo.styl") {
return {
paths: ['absolute/path/c', 'absolute/path/d'],
paths: ["absolute/path/c", "absolute/path/d"],
};
}

return {
paths: ['absolute/path/a', 'absolute/path/b'],
paths: ["absolute/path/a", "absolute/path/b"],
};
},
},
Expand All @@ -238,15 +238,15 @@ module.exports = {
{
test: /\.styl$/i,
use: [
'style-loader',
"style-loader",
{
loader: 'css-loader',
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
sourceMap: true,
},
Expand Down Expand Up @@ -277,10 +277,10 @@ module.exports = {
{
test: /\.styl/i,
use: [
'style-loader',
'css-loader',
"style-loader",
"css-loader",
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
webpackImporter: false,
},
Expand Down Expand Up @@ -313,10 +313,10 @@ module.exports = {
{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
"style-loader",
"css-loader",
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
additionalData: `@env: ${process.env.NODE_ENV};`,
},
Expand All @@ -330,28 +330,64 @@ module.exports = {

#### `Function`

##### Sync

```js
module.exports = {
module: {
rules: [
{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
"style-loader",
"css-loader",
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
additionalData: (content, loaderContext) => {
// More information about available properties https://webpack.js.org/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);

if (relativePath === 'styles/foo.styl') {
return 'value = 100px' + content;
if (relativePath === "styles/foo.styl") {
return "value = 100px" + content;
}

return "value 200px" + content;
},
},
},
],
},
],
},
};
```

##### Async

```js
module.exports = {
module: {
rules: [
{
test: /\.styl/,
use: [
"style-loader",
"css-loader",
{
loader: "stylus-loader",
options: {
additionalData: async (content, loaderContext) => {
// More information about available properties https://webpack.js.org/api/loaders/
const { resourcePath, rootContext } = loaderContext;
const relativePath = path.relative(rootContext, resourcePath);

if (relativePath === "styles/foo.styl") {
return "value = 100px" + content;
}

return 'value 200px' + content;
return "value 200px" + content;
},
},
},
Expand All @@ -378,13 +414,13 @@ module.exports = {
test: /\.styl$/,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
loader: "style-loader", // creates style nodes from JS strings
},
{
loader: 'css-loader', // translates CSS into CommonJS
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: 'stylus-loader', // compiles Stylus to CSS
loader: "stylus-loader", // compiles Stylus to CSS
},
],
},
Expand All @@ -401,21 +437,21 @@ To enable sourcemaps for CSS, you'll need to pass the `sourceMap` property in th

```javascript
module.exports = {
devtool: 'source-map', // any "source-map"-like devtool is possible
devtool: "source-map", // any "source-map"-like devtool is possible
module: {
rules: [
{
test: /\.styl$/,
use: [
'style-loader',
"style-loader",
{
loader: 'css-loader',
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
sourceMap: true,
},
Expand All @@ -439,17 +475,17 @@ module.exports = {
test: /\.styl$/,
use: [
{
loader: 'style-loader', // creates style nodes from JS strings
loader: "style-loader", // creates style nodes from JS strings
},
{
loader: 'css-loader', // translates CSS into CommonJS
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: 'stylus-loader', // compiles Stylus to CSS
loader: "stylus-loader", // compiles Stylus to CSS
options: {
stylusOptions: {
use: [require('nib')()],
import: ['nib'],
use: [require("nib")()],
import: ["nib"],
},
},
},
Expand Down Expand Up @@ -487,14 +523,14 @@ module.exports = {
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
"style-loader",
"css-loader",
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
stylusOptions: {
// Specify the path. where to find files
paths: ['node_modules/vars'],
paths: ["node_modules/vars"],
},
},
},
Expand Down Expand Up @@ -539,16 +575,16 @@ module.exports = {
test: /\.styl/,
use: [
{
loader: 'style-loader',
loader: "style-loader",
},
{
loader: 'css-loader',
loader: "css-loader",
},
{
loader: 'stylus-loader',
loader: "stylus-loader",
options: {
stylusOptions: {
paths: [path.resolve(__dirname, 'node_modules')],
paths: [path.resolve(__dirname, "node_modules")],
},
},
},
Expand Down
4 changes: 2 additions & 2 deletions babel.config.js
View file
Expand Up @@ -7,10 +7,10 @@ module.exports = (api) => {
return {
presets: [
[
'@babel/preset-env',
"@babel/preset-env",
{
targets: {
node: '10.13.0',
node: "10.13.0",
},
},
],
Expand Down
2 changes: 1 addition & 1 deletion bench/fixtures/imports/index.js
View file
@@ -1 +1 @@
import './index.styl';
import "./index.styl";
8 changes: 4 additions & 4 deletions bench/fixtures/imports/webpack.config.js
View file
@@ -1,20 +1,20 @@
module.exports = {
context: __dirname,
entry: './index.js',
entry: "./index.js",
output: {
path: `${__dirname}/tmp`,
filename: 'bundle.js',
filename: "bundle.js",
},
module: {
rules: [
{
test: /\.styl$/,
use: [
{
loader: require('path').join(__dirname, './testLoader.js'),
loader: require("path").join(__dirname, "./testLoader.js"),
},
{
loader: require('path').join(__dirname, '../../../dist/cjs.js'),
loader: require("path").join(__dirname, "../../../dist/cjs.js"),
options: {},
},
],
Expand Down

0 comments on commit 0ce3dd8

Please sign in to comment.