Skip to content

Commit 7e15d9d

Browse files
fix: Fixed HMR issue when oneOf is used (faceyspacey#102)
When using oneOf, HRM is never activated. This patch improved the lookup system used for determining if CSS can and should be reloaded. There have been some other tweaks for css modules and HMR fix faceyspacey#98,faceyspacey#80
1 parent 2e242d2 commit 7e15d9d

File tree

3 files changed

+27
-18
lines changed

3 files changed

+27
-18
lines changed

.github/CODEOWNERS

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
# extract-css-chunks-webpack-plugin maintainers
2-
* @faceyspacey @ScriptedAlchemy
2+
* @ScriptedAlchemy

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.0-placeholder",
44
"author": "James Gillmore <james@faceyspacey.com>",
55
"contributors": [
6-
"Zack Jackson <zackary.l.jackson@gmail.com> (https://github.com/ScriptedAlchemy)"
6+
"Zack Jackson <zack@ScriptedAlchemy.com> (https://github.com/ScriptedAlchemy)"
77
],
88
"description": "Extract CSS from chunks into stylesheets + HMR. Supports Webpack 4",
99
"engines": {

src/index.js

+25-16
Original file line numberDiff line numberDiff line change
@@ -150,22 +150,7 @@ class ExtractCssChunks {
150150
const isHOT = this.options.hot ? true : isHMR(compiler);
151151

152152
if (isHOT && compiler.options.module && compiler.options.module.rules) {
153-
const updatedRules = compiler.options.module.rules.reduce((rules, rule) => {
154-
if (rule.use && Array.isArray(rule.use)) {
155-
const isMiniCss = rule.use.some((l) => {
156-
const needle = l.loader || l;
157-
return needle.includes(pluginName);
158-
});
159-
if (isMiniCss) {
160-
rule.use.unshift(hotLoader);
161-
}
162-
}
163-
rules.push(rule);
164-
165-
return rules;
166-
}, []);
167-
168-
compiler.options.module.rules = updatedRules;
153+
compiler.options.module.rules = this.updateWebpackConfig(compiler.options.module.rules);
169154
}
170155
} catch (e) {
171156
console.error('Something went wrong: contact the author', JSON.stringify(e)); // eslint-disable-line no-console
@@ -412,6 +397,30 @@ class ExtractCssChunks {
412397
});
413398
}
414399

400+
updateWebpackConfig(rulez) {
401+
let isExtract = null;
402+
return rulez.reduce((rules, rule) => {
403+
if (rule.oneOf) {
404+
rule.oneOf = this.updateWebpackConfig(rule.oneOf);
405+
}
406+
407+
if (rule.use && Array.isArray(rule.use)) {
408+
isExtract = rule.use.some((l) => {
409+
const needle = l.loader || l;
410+
return needle.includes(pluginName);
411+
});
412+
413+
if (isExtract) {
414+
rule.use.unshift(hotLoader);
415+
}
416+
}
417+
418+
rules.push(rule);
419+
420+
return rules;
421+
}, []);
422+
}
423+
415424
getCssChunkObject(mainChunk) {
416425
const obj = {};
417426
for (const chunk of mainChunk.getAllAsyncChunks()) {

0 commit comments

Comments
 (0)