fix: logic for order and media queries for imports

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