feat: allow the additionalData to be async (#902)

webpack-contrib · Nov 11, 2020 · 9d925ff · 9d925ff
1 parent e4afcd7
commit 9d925ff
Show file tree

Hide file tree

Showing 44 changed files with 3,026 additions and 2,397 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,17 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['@webpack-contrib/eslint-config-webpack', 'prettier'],
-  overrides: [
-    {
-      files: [
-        'test/watch/**/*.js',
-        'test/hmr/**/*.js',
-        'test/extractText/**/*.js',
-        'test/helpers/testLoader.js',
-      ],
-      rules: {
-        strict: 'off',
-      },
-    },
-  ],
+  extends: ["@webpack-contrib/eslint-config-webpack", "prettier"],
 };
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ Then add the loader to your Webpack configuration. For example:
 **app.js**
 
 ```js
-import './style.scss';
+import "./style.scss";
 ```
 
 **style.scss**
@@ -65,11 +65,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           // Creates `style` nodes from JS strings
-          'style-loader',
+          "style-loader",
           // Translates CSS into CommonJS
-          'css-loader',
+          "css-loader",
           // Compiles Sass to CSS
-          'sass-loader',
+          "sass-loader",
         ],
       },
     ],
@@ -86,7 +86,7 @@ Webpack provides an [advanced mechanism to resolve files](https://webpack.js.org
 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:
 
 ```scss
-@import '~bootstrap';
+@import "~bootstrap";
 ```
 
 It's important to only prepend it with `~`, because `~/` resolves to the home directory.
@@ -167,13 +167,13 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               // Prefer `dart-sass`
-              implementation: require('sass'),
+              implementation: require("sass"),
             },
           },
         ],
@@ -211,12 +211,12 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              implementation: require('sass'),
+              implementation: require("sass"),
               sassOptions: {
                 fiber: false,
               },
@@ -240,14 +240,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              implementation: require('sass'),
+              implementation: require("sass"),
               sassOptions: {
-                fiber: require('fibers'),
+                fiber: require("fibers"),
               },
             },
           },
@@ -293,14 +293,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sassOptions: {
                 indentWidth: 4,
-                includePaths: ['absolute/path/a', 'absolute/path/b'],
+                includePaths: ["absolute/path/a", "absolute/path/b"],
               },
             },
           },
@@ -322,24 +322,24 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sassOptions: (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.scss') {
+                if (relativePath === "styles/foo.scss") {
                   return {
-                    includePaths: ['absolute/path/c', 'absolute/path/d'],
+                    includePaths: ["absolute/path/c", "absolute/path/d"],
                   };
                 }
 
                 return {
-                  includePaths: ['absolute/path/a', 'absolute/path/b'],
+                  includePaths: ["absolute/path/a", "absolute/path/b"],
                 };
               },
             },
@@ -372,15 +372,15 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               sourceMap: true,
             },
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },
@@ -405,14 +405,14 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
               sassOptions: {
-                outputStyle: 'compressed',
+                outputStyle: "compressed",
               },
             },
           },
@@ -442,12 +442,12 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              additionalData: '$env: ' + process.env.NODE_ENV + ';',
+              additionalData: "$env: " + process.env.NODE_ENV + ";",
             },
           },
         ],
@@ -459,28 +459,64 @@ module.exports = {
 
 #### `Function`
 
+##### Sync
+
 ```js
 module.exports = {
   module: {
     rules: [
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-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.scss') {
-                  return '$value: 100px;' + content;
+                if (relativePath === "styles/foo.scss") {
+                  return "$value: 100px;" + content;
+                }
+
+                return "$value: 200px;" + content;
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+##### Async
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: [
+          "style-loader",
+          "css-loader",
+          {
+            loader: "sass-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.scss") {
+                  return "$value: 100px;" + content;
                 }
 
-                return '$value: 200px;' + content;
+                return "$value: 200px;" + content;
               },
             },
           },
@@ -510,10 +546,10 @@ module.exports = {
       {
         test: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
-          'css-loader',
+          "style-loader",
+          "css-loader",
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               webpackImporter: false,
             },
@@ -539,7 +575,7 @@ There are two possibilities to extract a style sheet from the bundle:
 **webpack.config.js**
 
 ```js
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
   module: {
@@ -548,11 +584,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           // fallback to style-loader in development
-          process.env.NODE_ENV !== 'production'
-            ? 'style-loader'
+          process.env.NODE_ENV !== "production"
+            ? "style-loader"
             : MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader',
+          "css-loader",
+          "sass-loader",
         ],
       },
     ],
@@ -561,8 +597,8 @@ module.exports = {
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
+      filename: "[name].css",
+      chunkFilename: "[id].css",
     }),
   ],
 };
@@ -578,21 +614,21 @@ To enable CSS source maps, you'll need to pass the `sourceMap` option to the `sa
 
 ```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: /\.s[ac]ss$/i,
         use: [
-          'style-loader',
+          "style-loader",
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               sourceMap: true,
             },
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
               sourceMap: true,
             },

diff --git a/babel.config.js b/babel.config.js
@@ -7,10 +7,10 @@ module.exports = (api) => {
   return {
     presets: [
       [
-        '@babel/preset-env',
+        "@babel/preset-env",
         {
           targets: {
-            node: '10.13.0',
+            node: "10.13.0",
           },
         },
       ],

diff --git a/commitlint.config.js b/commitlint.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
+  extends: ["@commitlint/config-conventional"],
 };
diff --git a/husky.config.js b/husky.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   hooks: {
-    'pre-commit': 'lint-staged',
-    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
+    "pre-commit": "lint-staged",
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
   },
 };
diff --git a/jest.config.js b/jest.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  testEnvironment: 'node',
+  testEnvironment: "node",
 };
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,4 +1,4 @@
 module.exports = {
-  '*.js': ['prettier --write', 'eslint --fix'],
-  '*.{json,md,yml,css,ts}': ['prettier --write'],
+  "*.js": ["eslint --fix", "prettier --write"],
+  "*.{json,md,yml,css,ts}": ["prettier --write"],
 };