From d8d8edc2dfc53285ec1b8dbc393ce37a68e959c9 Mon Sep 17 00:00:00 2001
From: Thomas Baldwin
Date: Mon, 11 Feb 2019 20:40:52 -0500
Subject: [PATCH 1/4] feat(options): added option to disableAsync loading of
CSS
---
src/index.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/index.js b/src/index.js
index bbe672a4..f55763c0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -304,6 +304,8 @@ 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) {
From 968edb43ddec731cae323556bbc604fd74a20bb1 Mon Sep 17 00:00:00 2001
From: Thomas Baldwin
Date: Mon, 11 Feb 2019 21:16:28 -0500
Subject: [PATCH 2/4] fix(linter): fixed linter issue
---
src/index.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/index.js b/src/index.js
index f55763c0..23fe46c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -305,7 +305,6 @@ class MiniCssExtractPlugin {
pluginName,
(source, chunk, hash) => {
if (this.options.disableAsync) return null;
-
const chunkMap = this.getCssChunkObject(chunk);
if (Object.keys(chunkMap).length > 0) {
From e6358e139bb2fc75cc6707e6aad6d91a10e6914e Mon Sep 17 00:00:00 2001
From: Thomas Baldwin
Date: Tue, 30 Jul 2019 12:28:49 -0400
Subject: [PATCH 3/4] feat(options): updated readme
---
README.md | 10 ++++++++++
1 file changed, 10 insertions(+)
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:
From 45e22e80da7836e174f992af53715063355e62be Mon Sep 17 00:00:00 2001
From: Thomas Baldwin
Date: Tue, 30 Jul 2019 22:40:09 -0400
Subject: [PATCH 4/4] test(option): added testing of disableAsync option
---
package.json | 1 +
test/manualDisableAsyncOption/index.html | 15 +++++++
test/manualDisableAsyncOption/src/a.css | 7 +++
test/manualDisableAsyncOption/src/b.css | 7 +++
test/manualDisableAsyncOption/src/index.js | 14 ++++++
.../webpack.config.js | 45 +++++++++++++++++++
6 files changed, 89 insertions(+)
create mode 100644 test/manualDisableAsyncOption/index.html
create mode 100644 test/manualDisableAsyncOption/src/a.css
create mode 100644 test/manualDisableAsyncOption/src/b.css
create mode 100644 test/manualDisableAsyncOption/src/index.js
create mode 100644 test/manualDisableAsyncOption/webpack.config.js
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/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,
+ },
+};