diff --git a/README.md b/README.md
index 3c570d29..c665a044 100644
--- 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
index 3cce8c9a..52c9fe82 100644
--- 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
index bbe672a4..23fe46c1 100644
--- 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
new file mode 100644
index 00000000..6491a340
--- /dev/null
+++ b/test/manualDisableAsyncOption/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ mini-css-extract-plugin testcase
+
+
+
+
+
+
+
+
+
diff --git a/test/manualDisableAsyncOption/src/a.css b/test/manualDisableAsyncOption/src/a.css
new file mode 100644
index 00000000..8555ec16
--- /dev/null
+++ 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
new file mode 100644
index 00000000..481b6e78
--- /dev/null
+++ 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
new file mode 100644
index 00000000..eef64358
--- /dev/null
+++ 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
new file mode 100644
index 00000000..fa648be6
--- /dev/null
+++ 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,
+ },
+};