webpack-contrib · thomasbaldwin · Feb 12, 2019 · Feb 12, 2019 · Jul 30, 2019 · Jul 31, 2019
diff --git a/README.md b/README.md
@@ -367,6 +367,16 @@ new MiniCssExtractPlugin({
 }),
 ```
 
+### Disable Asynchronous Downloading of CSS
+
+For projects in which you do not want CSS asynchronously fetched on the client side, and only want the CSS that is delivered on the server side (via link tags) to be fetched and parsed, enabling this option will give you that functionality.
+
+```javascript
+new MiniCssExtractPlugin({
+  disableAsync: true,
+}),
+```
+
 ### Media Query Plugin
 
 If you'd like to extract the media queries from the extracted CSS (so mobile users don't need to load desktop or tablet specific CSS anymore) you should use one of the following plugins:

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "test:watch": "cross-env NODE_ENV=test jest --watch",
     "test:coverage": "cross-env NODE_ENV=test jest --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "test:manual": "webpack-dev-server test/manual/src/index.js --open --config test/manual/webpack.config.js",
+    "test:manualDisableAsync": "webpack-dev-server test/manualDisableAsyncOption/src/index.js --open --config test/manualDisableAsyncOption/webpack.config.js",
     "pretest": "npm run lint",
     "test": "cross-env NODE_ENV=test npm run test:coverage",
     "defaults": "webpack-defaults"

diff --git a/src/index.js b/src/index.js
@@ -304,6 +304,7 @@ class MiniCssExtractPlugin {
       mainTemplate.hooks.requireEnsure.tap(
         pluginName,
         (source, chunk, hash) => {
+          if (this.options.disableAsync) return null;
           const chunkMap = this.getCssChunkObject(chunk);
 
           if (Object.keys(chunkMap).length > 0) {

diff --git a/test/manualDisableAsyncOption/index.html b/test/manualDisableAsyncOption/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>mini-css-extract-plugin testcase</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="/dist/a.css" />
+</head>
+<body>
+  <script type="text/javascript" src="/dist/a.js"></script>
+  <script type="text/javascript" src="/dist/b.js"></script>
+  <script type="text/javascript" src="/dist/main.js"></script>
+</body>
+</html>
diff --git a/test/manualDisableAsyncOption/src/a.css b/test/manualDisableAsyncOption/src/a.css
@@ -0,0 +1,7 @@
+.container {
+  background: blue;
+  color: red;
+  width: 100%;
+  height: 20px;
+  text-align: center;
+}
diff --git a/test/manualDisableAsyncOption/src/b.css b/test/manualDisableAsyncOption/src/b.css
@@ -0,0 +1,7 @@
+.container {
+  background: purple;
+  color: green;
+  width: 100%;
+  height: 20px;
+  text-align: center;
+}
diff --git a/test/manualDisableAsyncOption/src/index.js b/test/manualDisableAsyncOption/src/index.js
@@ -0,0 +1,14 @@
+/* eslint-env browser */
+
+import './a.css';
+import './b.css';
+
+const render = () => {
+  const div = document.createElement('div');
+  div.setAttribute('class', 'container');
+  const text = 'My background color should be blue, and my text should be red!';
+  div.innerHTML = text;
+  document.body.appendChild(div);
+};
+
+render();
diff --git a/test/manualDisableAsyncOption/webpack.config.js b/test/manualDisableAsyncOption/webpack.config.js
@@ -0,0 +1,45 @@
+const Self = require('../../');
+
+module.exports = {
+  mode: 'development',
+  output: {
+    chunkFilename: '[name].js',
+    publicPath: '/dist/',
+    crossOriginLoading: 'anonymous',
+  },
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        default: false,
+        a: {
+          name: 'a',
+          test: /a.css/,
+          chunks: 'all',
+          enforce: true,
+        },
+        b: {
+          name: 'b',
+          test: /b.css/,
+          chunks: 'all',
+          enforce: true,
+        },
+      },
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+  devServer: {
+    contentBase: __dirname,
+  },
+};