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, + }, +};