CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [3.3.2](https://github.com/webpack-contrib/css-loader/compare/v3.3.1...v3.3.2) (2019-12-12)
+
+
+### Bug Fixes
+
+* logic for order and media queries for imports ([1fb5134](https://github.com/webpack-contrib/css-loader/commit/1fb51340a7719b6f5b517cb71ea85ec5d45c1199))
+
 ### [3.3.1](https://github.com/webpack-contrib/css-loader/compare/v3.3.0...v3.3.1) (2019-12-12)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-loader",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "css loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/css-loader",

src/runtime/api.js

@@ -13,7 +13,7 @@ module.exports = function(useSourceMap) {
       const content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return `@media ${item[2]}{${content}}`;
+        return `@media ${item[2]} {${content}}`;
       }
 
       return content;
@@ -28,33 +28,18 @@ module.exports = function(useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    const alreadyImportedModules = {};
-
-    for (let i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      const id = this[i][0];
-
-      if (id != null) {
-        alreadyImportedModules[id] = true;
-      }
-    }
-
     for (let i = 0; i < modules.length; i++) {
-      const item = modules[i];
+      const item = [].concat(modules[i]);
 
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = `(${item[2]}) and (${mediaQuery})`;
+        } else {
+          item[2] = `${mediaQuery} and ${item[2]}`;
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 

test/__snapshots__/loader.test.js.snap

@@ -16,7 +16,7 @@ module.exports = function(useSourceMap) {
       const content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return \`@media \${item[2]}{\${content}}\`;
+        return \`@media \${item[2]} {\${content}}\`;
       }
 
       return content;
@@ -31,33 +31,18 @@ module.exports = function(useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    const alreadyImportedModules = {};
-
-    for (let i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      const id = this[i][0];
-
-      if (id != null) {
-        alreadyImportedModules[id] = true;
-      }
-    }
-
     for (let i = 0; i < modules.length; i++) {
-      const item = modules[i];
-
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      const item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
+        } else {
+          item[2] = \`\${mediaQuery} and \${item[2]}\`;
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 
@@ -322,7 +307,7 @@ module.exports = function(useSourceMap) {
       const content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return \`@media \${item[2]}{\${content}}\`;
+        return \`@media \${item[2]} {\${content}}\`;
       }
 
       return content;
@@ -337,33 +322,18 @@ module.exports = function(useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    const alreadyImportedModules = {};
-
-    for (let i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      const id = this[i][0];
-
-      if (id != null) {
-        alreadyImportedModules[id] = true;
-      }
-    }
-
     for (let i = 0; i < modules.length; i++) {
-      const item = modules[i];
-
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      const item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
+        } else {
+          item[2] = \`\${mediaQuery} and \${item[2]}\`;
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 
@@ -652,7 +622,7 @@ module.exports = function(useSourceMap) {
       const content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return \`@media \${item[2]}{\${content}}\`;
+        return \`@media \${item[2]} {\${content}}\`;
       }
 
       return content;
@@ -667,33 +637,18 @@ module.exports = function(useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    const alreadyImportedModules = {};
-
-    for (let i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      const id = this[i][0];
-
-      if (id != null) {
-        alreadyImportedModules[id] = true;
-      }
-    }
-
     for (let i = 0; i < modules.length; i++) {
-      const item = modules[i];
-
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      const item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
+        } else {
+          item[2] = \`\${mediaQuery} and \${item[2]}\`;
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 
@@ -958,7 +913,7 @@ module.exports = function(useSourceMap) {
       const content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return \`@media \${item[2]}{\${content}}\`;
+        return \`@media \${item[2]} {\${content}}\`;
       }
 
       return content;
@@ -973,33 +928,18 @@ module.exports = function(useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    const alreadyImportedModules = {};
-
-    for (let i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      const id = this[i][0];
-
-      if (id != null) {
-        alreadyImportedModules[id] = true;
-      }
-    }
-
     for (let i = 0; i < modules.length; i++) {
-      const item = modules[i];
-
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      const item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
+        } else {
+          item[2] = \`\${mediaQuery} and \${item[2]}\`;
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 
@@ -1428,7 +1368,7 @@ module.exports = function(useSourceMap) {
       const content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return \`@media \${item[2]}{\${content}}\`;
+        return \`@media \${item[2]} {\${content}}\`;
       }
 
       return content;
@@ -1443,33 +1383,18 @@ module.exports = function(useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    const alreadyImportedModules = {};
-
-    for (let i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      const id = this[i][0];
-
-      if (id != null) {
-        alreadyImportedModules[id] = true;
-      }
-    }
-
     for (let i = 0; i < modules.length; i++) {
-      const item = modules[i];
-
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      const item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
+        } else {
+          item[2] = \`\${mediaQuery} and \${item[2]}\`;
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 
@@ -1708,7 +1633,7 @@ module.exports = function(useSourceMap) {
       const content = cssWithMappingToString(item, useSourceMap);
 
       if (item[2]) {
-        return \`@media \${item[2]}{\${content}}\`;
+        return \`@media \${item[2]} {\${content}}\`;
       }
 
       return content;
@@ -1723,33 +1648,18 @@ module.exports = function(useSourceMap) {
       modules = [[null, modules, '']];
     }
 
-    const alreadyImportedModules = {};
-
-    for (let i = 0; i < this.length; i++) {
-      // eslint-disable-next-line prefer-destructuring
-      const id = this[i][0];
-
-      if (id != null) {
-        alreadyImportedModules[id] = true;
-      }
-    }
-
     for (let i = 0; i < modules.length; i++) {
-      const item = modules[i];
-
-      // skip already imported module
-      // this implementation is not 100% perfect for weird media query combinations
-      // when a module is imported multiple times with different media queries.
-      // I hope this will never occur (Hey this way we have smaller bundles)
-      if (item[0] == null || !alreadyImportedModules[item[0]]) {
-        if (mediaQuery && !item[2]) {
+      const item = [].concat(modules[i]);
+
+      if (mediaQuery) {
+        if (!item[2]) {
           item[2] = mediaQuery;
-        } else if (mediaQuery) {
-          item[2] = \`(\${item[2]}) and (\${mediaQuery})\`;
+        } else {
+          item[2] = \`\${mediaQuery} and \${item[2]}\`;
         }
-
-        list.push(item);
       }
+
+      list.push(item);
     }
   };
 

test/fixtures/import/import.css

@@ -22,19 +22,19 @@
 @import url();
 @import url('');
 @import url("");
-@import url(test.css) screen and print;
-@import url(test.css) SCREEN AND PRINT;
-@import url(test.css)screen and print;
-@import url(test.css)  screen and print;
-@import url(test-media.css) screen and print;
+@import url(test.css) screen and (orientation:landscape);
+@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE);
+@import url(test.css)screen and (orientation:landscape);
+@import url(test.css)  screen and (orientation:landscape);
+@import url(test-media.css) screen and (orientation:landscape);
 @import url(test-other.css) (min-width: 100px);
 @import url(http://example.com/style.css);
 @import url(http://example.com/style.css);
 @import url(http://example.com/style.css#hash);
 @import url(http://example.com/style.css?#hash);
 @import url(http://example.com/style.css?foo=bar#hash);
-@import url(http://example.com/other-style.css) screen and print;
-@import url(http://example.com/other-style.css) screen and print;
+@import url(http://example.com/other-style.css) screen and (orientation:landscape);
+@import url(http://example.com/other-style.css) screen and (orientation:landscape);
 @import url("//example.com/style.css");
 @import url(~package/test.css);
 @import ;
@@ -43,7 +43,7 @@
 @import url('http://') :root {}
 @import url('query.css?foo=1&bar=1');
 @import url('other-query.css?foo=1&bar=1#hash');
-@import url('other-query.css?foo=1&bar=1#hash') screen and print;
+@import url('other-query.css?foo=1&bar=1#hash') screen and (orientation:landscape);
 @import url('https://fonts.googleapis.com/css?family=Roboto');
 @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
 @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');

test/fixtures/import/order-1.css

@@ -1,3 +1,3 @@
-div {
-  background: red;
+.order-1 {
+  color: red;
 }

test/fixtures/import/order-2.css

@@ -1,3 +1,3 @@
-div {
-  background: blue;
+.order-1 {
+  color: red;
 }

test/fixtures/import/order-3-1.css

@@ -0,0 +1,3 @@
+.order-3-1 {
+  color: white;
+}

test/fixtures/import/order-3.css

@@ -0,0 +1,5 @@
+@import url('./order-3-1.css') screen and (orientation:landscape);
+
+.order-3 {
+  color: red;
+}

test/fixtures/import/order-4-1.css

@@ -0,0 +1,3 @@
+.order-4-1 {
+  color: red;
+}

test/fixtures/import/order-4-2-1.css

@@ -0,0 +1,3 @@
+.order-4-2-1 {
+  color: red;
+}

test/fixtures/import/order-4-2-2.css

@@ -0,0 +1,3 @@
+.order-4-2-2 {
+  color: red;
+}

test/fixtures/import/order-4-2.css

@@ -0,0 +1,6 @@
+@import url('./order-4-2-1.css');
+@import url('./order-4-2-2.css') (orientation:landscape);
+
+.order-4-2 {
+  color: red;
+}

test/fixtures/import/order-4.css

@@ -0,0 +1,6 @@
+@import url('./order-4-1.css') (min-width: 1000px);
+@import url('./order-4-2.css') (min-width: 2000px);
+
+.order-4 {
+  color: red;
+}

test/fixtures/import/order.css

@@ -6,6 +6,9 @@
 @import url(http://example.com/style.css);
 @import url('./order-2.css') screen and (min-width: 2000px);
 @import url(http://example.com/style.css);
+@import url('./order-3.css');
+@import url(http://example.com/style.css);
+@import url('./order-4.css') screen;
 
 div {
   width: 100%;

test/runtime/__snapshots__/api.test.js.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`api should import modules 1`] = `"body { b: 2; }body { c: 3; }@media print{body { d: 4; }}@media screen{body { a: 1; }}"`;
+exports[`api should import modules 1`] = `"body { b: 2; }body { c: 3; }body { b: 2; }@media print {body { b: 2; }}@media print {body { d: 4; }}@media screen {body { a: 1; }}"`;
 
-exports[`api should import named modules 1`] = `"body { b: 2; }body { c: 3; }@media print{body { d: 4; }}@media screen{body { a: 1; }}"`;
+exports[`api should import named modules 1`] = `"body { b: 2; }body { c: 3; }body { b: 2; }@media print {body { b: 2; }}@media print {body { d: 4; }}@media screen {body { a: 1; }}"`;
 
 exports[`api should toString a single module 1`] = `"body { a: 1; }"`;
 
 exports[`api should toString multiple modules 1`] = `"body { b: 2; }body { a: 1; }"`;
 
-exports[`api should toString with media query 1`] = `"@media screen{body { a: 1; }}"`;
+exports[`api should toString with media query 1`] = `"@media screen {body { a: 1; }}"`;
 
 exports[`api should toString with source mapping 1`] = `
 "body { a: 1; }