@glitchr/media-query-plugin 1.5.6 → 1.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/media-query-plugin",
-  "version": "1.5.6",
+  "version": "1.5.8",
   "description": "Webpack plugin for media query extraction.",
   "license": "MIT",
   "access": "public",
@@ -29,10 +29,7 @@
     "mini-css-extract-plugin": "^0.11.1",
     "mocha": "^8.1.3",
     "rimraf": "^3.0.2",
-    "sass": "^1.26.10",
-    "sass-loader": "^10.0.2",
-    "style-loader": "^1.2.1",
-    "webpack-merge": "^5.1.4"
+    "style-loader": "^1.2.1"
   },
   "repository": {
     "type": "git",

package/src/plugin.js

@@ -57,17 +57,11 @@ module.exports = class MediaQueryPlugin {
 
         compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
 
-            const hasDeprecatedChunks = (compilation.chunks instanceof Set) === false; // webpack < 5
-
-            if (hasDeprecatedChunks) {
-                console.warn('\n\n[WARNING] media-query-plugin is going to drop webpack 4 support with the next major version so you should consider upgrading asap!\n\n');
-            }
-
             const processAssets = (compilationAssets, cb) => {
 
                 const chunks = compilation.chunks;
                 const chunkIds = [...chunks].map(chunk => chunk.id);
-                const assets =  hasDeprecatedChunks ? compilation.assets : compilationAssets;
+                const assets =  compilationAssets;
 
                 store.getMediaKeys().forEach(mediaKey => {
 
@@ -90,11 +84,7 @@ module.exports = class MediaQueryPlugin {
                         mediaChunk.id = mediaKey;
                         mediaChunk.ids = [mediaKey];
 
-                        if (hasDeprecatedChunks) {
-                            chunks.push(mediaChunk);
-                        } else {
-                            chunks.add(mediaChunk);
-                        }
+                        chunks.add(mediaChunk);
                     }
 
                     const chunk = [...chunks].filter(chunk => chunk.id === mediaKey)[0];
@@ -136,20 +126,13 @@ module.exports = class MediaQueryPlugin {
                                 } else {
                                     content = new ConcatSource(assets[file], content);
                                 }
-                                if (hasDeprecatedChunks) {
-                                    chunk.files.splice(chunk.files.indexOf(file), 1);
-                                } else {
-                                    chunk.files.delete(file);
-                                }
+
+                                chunk.files.delete(file);
                                 delete assets[file];
                             }
                         }
-
-                        if (hasDeprecatedChunks) {
-                            chunk.files.push(`${basename}.js`);
-                        } else {
-                            chunk.files.add(`${basename}.js`);
-                        }
+                        
+                        chunk.files.add(`${basename}.js`);
                         assets[`${basename}.js`] = content;
                     }
 
@@ -162,20 +145,12 @@ module.exports = class MediaQueryPlugin {
                             if (assets[file]) {
                                 content = new ConcatSource(assets[file], content);
 
-                                if (hasDeprecatedChunks) {
-                                    chunk.files.splice(chunk.files.indexOf(file), 1);
-                                } else {
-                                    chunk.files.delete(file);
-                                }
+                                chunk.files.delete(file);
                                 delete assets[file];
                             }
                         });
 
-                        if (hasDeprecatedChunks) {
-                            chunk.files.push(`${basename}.css`);
-                        } else {
-                            chunk.files.add(`${basename}.css`);
-                        }
+                        chunk.files.add(`${basename}.css`);
                         assets[`${basename}.css`] = content;
                     }
 
@@ -193,7 +168,7 @@ module.exports = class MediaQueryPlugin {
                 };
                 const sortedChunks = [...chunks].sort(chunksCompareFn);
 
-                compilation.chunks = hasDeprecatedChunks ? sortedChunks : new Set(sortedChunks);
+                compilation.chunks = new Set(sortedChunks);
 
                 const assetsCompareFn = (a, b) => {
                     // take file extension out of sort
@@ -208,31 +183,18 @@ module.exports = class MediaQueryPlugin {
                         return 0;
                 };
                 const sortedAssets = Object.keys(assets).sort(assetsCompareFn).reduce((res, key) => (res[key] = assets[key], res), {});
-
-                if (hasDeprecatedChunks) {
-                    compilation.assets = sortedAssets;
-                } else {
-                    compilationAssets = sortedAssets;
-                }
+                compilationAssets = sortedAssets;
 
                 cb();
             };
 
-            // Since webpack 4 doesn't have the processAssets hook, we need the following condition.
-            // In future (once webpack 4 support has been dropped) this can be simplified again.
-            if (hasDeprecatedChunks) {
-                compilation.hooks.additionalAssets.tapAsync(pluginName, (cb) => {
-                    processAssets(compilation.assets, cb);
-                });
-            } else {
-                compilation.hooks.processAssets.tapAsync({
-                    name: pluginName,
-                    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
-                }, (assets, cb) => {
-                    processAssets(assets, cb);
-                });
-            }
-
+            compilation.hooks.processAssets.tapAsync({
+                name: pluginName,
+                stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
+            }, (assets, cb) => {
+                processAssets(assets, cb);
+            });
+            
             // consider html-webpack-plugin and provide extracted files
             // which can be accessed in templates via htmlWebpackPlugin.files.extracted
             // { css: [{file:'',query:''},{file:'',query:''}] }

package/src/store.js

@@ -19,8 +19,10 @@ class MediaQueryStore {
 
         if (typeof this.media[key] !== 'object') {
             this.media[key] = [];
+            this.media[key].push(data);
         }
-        this.media[key].push(data);
+
+        this.media[key] = this.media[key].map(media => media.filename == filename ? data : media);
     }
 
     getMedia(key) {