Repository: webpack-contrib/css-loader
Pull request #1018 (2019-12-12 16:43:07)

fix: logic for order and media queries for imports
<!--
  HOLY CRAP a Pull Request. We ❤️ those!

  If you remove or skip this template, you'll make the 🐼 sad and the mighty god
  of Github will appear and pile-drive the close button from a great height
  while making animal noises.

  Please place an x (no spaces!) in all [ ] that apply
-->

This PR contains a:

- [x] **bugfix**
- [ ] new **feature**
- [ ] **code refactor**
- [x] **test update** <!-- if bug or feature is checked, this should be too -->
- [ ] **typo fix**
- [ ] **metadata update**

### Motivation / Use-Case

logic was wrong with media and for order

### Breaking Changes

Should be not, but feel free to open new issue if you have problem(s)

### Additional Info

No


Patch:
diff --git a/src/runtime/api.js b/src/runtime/api.js
index 117f526..b2acad8 100644
--- a/src/runtime/api.js
+++ b/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 patch:
diff --git a/test/__snapshots__/import-option.test.js.snap b/test/__snapshots__/import-option.test.js.snap
index e2befe2..e97bc6e 100644
--- a/test/__snapshots__/import-option.test.js.snap
+++ b/test/__snapshots__/import-option.test.js.snap
@@ -10,7 +10,7 @@ Array [
   b: b;
 }
 ",
-    "((min-width: 100px)) and (screen and print)",
+    "screen and (orientation:landscape) and (min-width: 100px)",
   ],
   Array [
     2,
@@ -18,7 +18,15 @@ Array [
   c: c;
 }
 ",
-    "screen and print",
+    "screen and (orientation:landscape)",
+  ],
+  Array [
+    3,
+    ".test {
+  d: d;
+}
+",
+    "(min-width: 100px)",
   ],
   Array [
     1,
@@ -43,12 +51,12 @@ Array [
   Array [
     1,
     "@import url(http://example.com/other-style.css);",
-    "screen and print",
+    "screen and (orientation:landscape)",
   ],
   Array [
     1,
     "@import url(http://example.com/other-style.css);",
-    "screen and print",
+    "screen and (orientation:landscape)",
   ],
   Array [
     1,
@@ -70,6 +78,14 @@ Array [
 ",
     "",
   ],
+  Array [
+    5,
+    ".other-query {
+  f: f;
+}
+",
+    "screen and (orientation:landscape)",
+  ],
   Array [
     1,
     "@import url(https://fonts.googleapis.com/css?family=Roboto);",
@@ -127,6 +143,30 @@ Array [
     ".strange {
   color: red;
 }
+",
+    "",
+  ],
+  Array [
+    11,
+    ".strange {
+  color: red;
+}
+",
+    "",
+  ],
+  Array [
+    11,
+    ".strange {
+  color: red;
+}
+",
+    "",
+  ],
+  Array [
+    11,
+    ".strange {
+  color: red;
+}
 ",
     "",
   ],
@@ -156,10 +196,10 @@ Array [
 @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.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(~package/test.css);
 @import ;
 @import foo-bar;
@@ -231,19 +271,19 @@ var ___CSS_LOADER_AT_RULE_IMPORT_9___ = require(\\"-!../../../src/index.js??ref-
 var ___CSS_LOADER_GET_URL_IMPORT___ = require(\\"../../../src/runtime/getUrl.js\\");
 var ___CSS_LOADER_URL_IMPORT_0___ = require(\\"./img.png\\");
 exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and print\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\");
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"(min-width: 100px)\\");
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css#hash);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css?#hash);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css?foo=bar#hash);\\"]);
-exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and print\\"]);
-exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and print\\"]);
+exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and (orientation:landscape)\\"]);
+exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and (orientation:landscape)\\"]);
 exports.push([module.id, \\"@import url(//example.com/style.css);\\"]);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_2___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_3___);
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_3___, \\"screen and print\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_3___, \\"screen and (orientation:landscape)\\");
 exports.push([module.id, \\"@import url(https://fonts.googleapis.com/css?family=Roboto);\\"]);
 exports.push([module.id, \\"@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC);\\"]);
 exports.push([module.id, \\"@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto);\\"]);
@@ -258,7 +298,7 @@ exports.i(___CSS_LOADER_AT_RULE_IMPORT_9___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_9___);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-exports.push([module.id, \\"@import url(test.css);\\\\n@import url('test.css');\\\\n@import url(\\\\\\"test.css\\\\\\");\\\\n@IMPORT url(test.css);\\\\n@import URL(test.css);\\\\n@import url(test.css );\\\\n@import url( test.css);\\\\n@import url( test.css );\\\\n@import url(\\\\n  test.css\\\\n);\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import \\\\\\"test.css\\\\\\";\\\\n@import 'test.css';\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\"   \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import url(test.css) screen and print;\\\\n@import url(test.css) SCREEN AND PRINT;\\\\n@import url(test.css)screen and print;\\\\n@import url(test.css)  screen and print;\\\\n@import url(~package/test.css);\\\\n@import ;\\\\n@import foo-bar;\\\\n@import-normalize;\\\\n@import url('http://') :root {}\\\\n\\\\n.class {\\\\n  a: b c d;\\\\n}\\\\n\\\\n.foo {\\\\n  @import 'path.css';\\\\n}\\\\n\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n@import url(./test.css);\\\\n\\\\n@import './te\\\\\\\\\\\\nst.css';\\\\n@import './te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css';\\\\n@import url('./te\\\\\\\\\\\\nst.css');\\\\n@import url('./te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css');\\\\n@import './test test.css';\\\\n@import url('./test test.css');\\\\n@import './test\\\\\\\\ test.css';\\\\n@import url('./test\\\\\\\\ test.css');\\\\n@import './test%20test.css';\\\\n@import url('./test%20test.css');\\\\n@import './\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import './t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import url(./test\\\\\\\\ test.css);\\\\n@import url(./t\\\\\\\\65st%20test.css);\\\\n@import url('./t\\\\\\\\65st%20test.css');\\\\n@import url(\\\\\\"./t\\\\\\\\65st%20test.css\\\\\\");\\\\n@import \\\\\\"./t\\\\\\\\65st%20test.css\\\\\\";\\\\n@import './t\\\\\\\\65st%20test.css';\\\\n@import url(                 test.css                      );\\\\n\\", \\"\\"]);
+exports.push([module.id, \\"@import url(test.css);\\\\n@import url('test.css');\\\\n@import url(\\\\\\"test.css\\\\\\");\\\\n@IMPORT url(test.css);\\\\n@import URL(test.css);\\\\n@import url(test.css );\\\\n@import url( test.css);\\\\n@import url( test.css );\\\\n@import url(\\\\n  test.css\\\\n);\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import \\\\\\"test.css\\\\\\";\\\\n@import 'test.css';\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\"   \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import url(test.css) screen and (orientation:landscape);\\\\n@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE);\\\\n@import url(test.css)screen and (orientation:landscape);\\\\n@import url(test.css)  screen and (orientation:landscape);\\\\n@import url(~package/test.css);\\\\n@import ;\\\\n@import foo-bar;\\\\n@import-normalize;\\\\n@import url('http://') :root {}\\\\n\\\\n.class {\\\\n  a: b c d;\\\\n}\\\\n\\\\n.foo {\\\\n  @import 'path.css';\\\\n}\\\\n\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n@import url(./test.css);\\\\n\\\\n@import './te\\\\\\\\\\\\nst.css';\\\\n@import './te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css';\\\\n@import url('./te\\\\\\\\\\\\nst.css');\\\\n@import url('./te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css');\\\\n@import './test test.css';\\\\n@import url('./test test.css');\\\\n@import './test\\\\\\\\ test.css';\\\\n@import url('./test\\\\\\\\ test.css');\\\\n@import './test%20test.css';\\\\n@import url('./test%20test.css');\\\\n@import './\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import './t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import url(./test\\\\\\\\ test.css);\\\\n@import url(./t\\\\\\\\65st%20test.css);\\\\n@import url('./t\\\\\\\\65st%20test.css');\\\\n@import url(\\\\\\"./t\\\\\\\\65st%20test.css\\\\\\");\\\\n@import \\\\\\"./t\\\\\\\\65st%20test.css\\\\\\";\\\\n@import './t\\\\\\\\65st%20test.css';\\\\n@import url(                 test.css                      );\\\\n\\", \\"\\"]);
 "
 `;
 
@@ -350,19 +390,19 @@ Array [
 @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 ;
@@ -371,7 +411,7 @@ Array [
 @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');
@@ -444,7 +484,7 @@ var ___CSS_LOADER_URL_IMPORT_0___ = require(\\"./img.png\\");
 exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___);
 // Module
-exports.push([module.id, \\"@import url(test.css);\\\\n@import url('test.css');\\\\n@import url(\\\\\\"test.css\\\\\\");\\\\n@IMPORT url(test.css);\\\\n@import URL(test.css);\\\\n@import url(test.css );\\\\n@import url( test.css);\\\\n@import url( test.css );\\\\n@import url(\\\\n  test.css\\\\n);\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import \\\\\\"test.css\\\\\\";\\\\n@import 'test.css';\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\"   \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import url(test.css) screen and print;\\\\n@import url(test.css) SCREEN AND PRINT;\\\\n@import url(test.css)screen and print;\\\\n@import url(test.css)  screen and print;\\\\n@import url(test-media.css) screen and print;\\\\n@import url(test-other.css) (min-width: 100px);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css#hash);\\\\n@import url(http://example.com/style.css?#hash);\\\\n@import url(http://example.com/style.css?foo=bar#hash);\\\\n@import url(http://example.com/other-style.css) screen and print;\\\\n@import url(http://example.com/other-style.css) screen and print;\\\\n@import url(\\\\\\"//example.com/style.css\\\\\\");\\\\n@import url(~package/test.css);\\\\n@import ;\\\\n@import foo-bar;\\\\n@import-normalize;\\\\n@import url('http://') :root {}\\\\n@import url('query.css?foo=1&bar=1');\\\\n@import url('other-query.css?foo=1&bar=1#hash');\\\\n@import url('other-query.css?foo=1&bar=1#hash') screen and print;\\\\n@import url('https://fonts.googleapis.com/css?family=Roboto');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');\\\\n\\\\n.class {\\\\n  a: b c d;\\\\n}\\\\n\\\\n.foo {\\\\n  @import 'path.css';\\\\n}\\\\n\\\\n@import url('./relative.css');\\\\n@import url('../import/top-relative.css');\\\\n@import url(~package/tilde.css);\\\\n@import url(~aliasesImport/alias.css);\\\\n@import url('./url.css');\\\\n\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n@import url(./test.css);\\\\n\\\\n@import './te\\\\\\\\\\\\nst.css';\\\\n@import './te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css';\\\\n@import url('./te\\\\\\\\\\\\nst.css');\\\\n@import url('./te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css');\\\\n\\\\n@import \\\\\\"./te'st.css\\\\\\";\\\\n@import url(\\\\\\"./te'st.css\\\\\\");\\\\n@import './te\\\\\\\\'st.css';\\\\n@import url('./te\\\\\\\\'st.css');\\\\n@import './test test.css';\\\\n@import url('./test test.css');\\\\n@import './test\\\\\\\\ test.css';\\\\n@import url('./test\\\\\\\\ test.css');\\\\n@import './test%20test.css';\\\\n@import url('./test%20test.css');\\\\n@import './\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import './t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import url(./test\\\\\\\\ test.css);\\\\n@import url(./t\\\\\\\\65st%20test.css);\\\\n@import url('./t\\\\\\\\65st%20test.css');\\\\n@import url(\\\\\\"./t\\\\\\\\65st%20test.css\\\\\\");\\\\n@import \\\\\\"./t\\\\\\\\65st%20test.css\\\\\\";\\\\n@import './t\\\\\\\\65st%20test.css';\\\\n@import url(                 test.css                      );\\\\n\\", \\"\\"]);
+exports.push([module.id, \\"@import url(test.css);\\\\n@import url('test.css');\\\\n@import url(\\\\\\"test.css\\\\\\");\\\\n@IMPORT url(test.css);\\\\n@import URL(test.css);\\\\n@import url(test.css );\\\\n@import url( test.css);\\\\n@import url( test.css );\\\\n@import url(\\\\n  test.css\\\\n);\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import \\\\\\"test.css\\\\\\";\\\\n@import 'test.css';\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\"   \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import url(test.css) screen and (orientation:landscape);\\\\n@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE);\\\\n@import url(test.css)screen and (orientation:landscape);\\\\n@import url(test.css)  screen and (orientation:landscape);\\\\n@import url(test-media.css) screen and (orientation:landscape);\\\\n@import url(test-other.css) (min-width: 100px);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css);\\\\n@import url(http://example.com/style.css#hash);\\\\n@import url(http://example.com/style.css?#hash);\\\\n@import url(http://example.com/style.css?foo=bar#hash);\\\\n@import url(http://example.com/other-style.css) screen and (orientation:landscape);\\\\n@import url(http://example.com/other-style.css) screen and (orientation:landscape);\\\\n@import url(\\\\\\"//example.com/style.css\\\\\\");\\\\n@import url(~package/test.css);\\\\n@import ;\\\\n@import foo-bar;\\\\n@import-normalize;\\\\n@import url('http://') :root {}\\\\n@import url('query.css?foo=1&bar=1');\\\\n@import url('other-query.css?foo=1&bar=1#hash');\\\\n@import url('other-query.css?foo=1&bar=1#hash') screen and (orientation:landscape);\\\\n@import url('https://fonts.googleapis.com/css?family=Roboto');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');\\\\n@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');\\\\n\\\\n.class {\\\\n  a: b c d;\\\\n}\\\\n\\\\n.foo {\\\\n  @import 'path.css';\\\\n}\\\\n\\\\n@import url('./relative.css');\\\\n@import url('../import/top-relative.css');\\\\n@import url(~package/tilde.css);\\\\n@import url(~aliasesImport/alias.css);\\\\n@import url('./url.css');\\\\n\\\\n.background {\\\\n  background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n@import url(./test.css);\\\\n\\\\n@import './te\\\\\\\\\\\\nst.css';\\\\n@import './te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css';\\\\n@import url('./te\\\\\\\\\\\\nst.css');\\\\n@import url('./te\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\nst.css');\\\\n\\\\n@import \\\\\\"./te'st.css\\\\\\";\\\\n@import url(\\\\\\"./te'st.css\\\\\\");\\\\n@import './te\\\\\\\\'st.css';\\\\n@import url('./te\\\\\\\\'st.css');\\\\n@import './test test.css';\\\\n@import url('./test test.css');\\\\n@import './test\\\\\\\\ test.css';\\\\n@import url('./test\\\\\\\\ test.css');\\\\n@import './test%20test.css';\\\\n@import url('./test%20test.css');\\\\n@import './\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./\\\\\\\\74\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import './t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css';\\\\n@import url('./t\\\\\\\\65\\\\\\\\73\\\\\\\\74.css');\\\\n@import url(./test\\\\\\\\ test.css);\\\\n@import url(./t\\\\\\\\65st%20test.css);\\\\n@import url('./t\\\\\\\\65st%20test.css');\\\\n@import url(\\\\\\"./t\\\\\\\\65st%20test.css\\\\\\");\\\\n@import \\\\\\"./t\\\\\\\\65st%20test.css\\\\\\";\\\\n@import './t\\\\\\\\65st%20test.css';\\\\n@import url(                 test.css                      );\\\\n\\", \\"\\"]);
 "
 `;
 
@@ -456,8 +496,8 @@ exports[`import option should keep original order: module (evaluated) 1`] = `
 Array [
   Array [
     2,
-    "div {
-  background: red;
+    ".order-1 {
+  color: red;
 }
 ",
     "",
@@ -468,8 +508,20 @@ Array [
   ],
   Array [
     3,
-    "div {
-  background: blue;
+    ".order-1 {
+  color: red;
+}
+",
+    "",
+  ],
+  Array [
+    1,
+    "@import url(http://example.com/style.css);",
+  ],
+  Array [
+    2,
+    ".order-1 {
+  color: red;
 }
 ",
     "",
@@ -478,14 +530,78 @@ Array [
     1,
     "@import url(http://example.com/style.css);",
   ],
+  Array [
+    3,
+    ".order-1 {
+  color: red;
+}
+",
+    "screen and (min-width: 2000px)",
+  ],
   Array [
     1,
     "@import url(http://example.com/style.css);",
   ],
+  Array [
+    5,
+    ".order-3-1 {
+  color: white;
+}
+",
+    "screen and (orientation:landscape)",
+  ],
+  Array [
+    4,
+    ".order-3 {
+  color: red;
+}
+",
+    "",
+  ],
   Array [
     1,
     "@import url(http://example.com/style.css);",
   ],
+  Array [
+    6,
+    ".order-4-1 {
+  color: red;
+}
+",
+    "screen and (min-width: 1000px)",
+  ],
+  Array [
+    8,
+    ".order-4-2-1 {
+  color: red;
+}
+",
+    "screen and (min-width: 2000px)",
+  ],
+  Array [
+    9,
+    ".order-4-2-2 {
+  color: red;
+}
+",
+    "screen and (min-width: 2000px) and (orientation:landscape)",
+  ],
+  Array [
+    7,
+    ".order-4-2 {
+  color: red;
+}
+",
+    "screen and (min-width: 2000px)",
+  ],
+  Array [
+    5,
+    ".order-4 {
+  color: red;
+}
+",
+    "screen",
+  ],
   Array [
     1,
     "div {
@@ -503,6 +619,8 @@ exports[`import option should keep original order: module 1`] = `
 var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../src/runtime/api.js\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_0___ = require(\\"-!../../../src/index.js??ref--4-0!./order-1.css\\");
 var ___CSS_LOADER_AT_RULE_IMPORT_1___ = require(\\"-!../../../src/index.js??ref--4-0!./order-2.css\\");
+var ___CSS_LOADER_AT_RULE_IMPORT_2___ = require(\\"-!../../../src/index.js??ref--4-0!./order-3.css\\");
+var ___CSS_LOADER_AT_RULE_IMPORT_3___ = require(\\"-!../../../src/index.js??ref--4-0!./order-4.css\\");
 exports = module.exports = ___CSS_LOADER_API_IMPORT___(false);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
@@ -512,6 +630,9 @@ exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"screen and (min-width: 2000px)\\");
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_2___);
+exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_3___, \\"screen\\");
 // Module
 exports.push([module.id, \\"div {\\\\n  width: 100%;\\\\n  height: 200px;\\\\n}\\\\n\\", \\"\\"]);
 "
@@ -531,13 +652,125 @@ Array [
 ",
     "",
   ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "screen and (orientation:landscape)",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "screen and (orientation: landscape)",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "screen and (orientation:landscape)",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "screen and (orientation:landscape)",
+  ],
   Array [
     4,
     "a {
   b: b;
 }
 ",
-    "((min-width: 100px)) and (screen and print)",
+    "screen and (orientation:landscape) and (min-width: 100px)",
   ],
   Array [
     3,
@@ -545,7 +778,15 @@ Array [
   c: c;
 }
 ",
-    "screen and print",
+    "screen and (orientation:landscape)",
+  ],
+  Array [
+    4,
+    ".test {
+  d: d;
+}
+",
+    "(min-width: 100px)",
   ],
   Array [
     1,
@@ -570,12 +811,12 @@ Array [
   Array [
     1,
     "@import url(http://example.com/other-style.css);",
-    "screen and print",
+    "screen and (orientation:landscape)",
   ],
   Array [
     1,
     "@import url(http://example.com/other-style.css);",
-    "screen and print",
+    "screen and (orientation:landscape)",
   ],
   Array [
     1,
@@ -605,6 +846,14 @@ Array [
 ",
     "",
   ],
+  Array [
+    7,
+    ".other-query {
+  f: f;
+}
+",
+    "screen and (orientation:landscape)",
+  ],
   Array [
     1,
     "@import url(https://fonts.googleapis.com/css?family=Roboto);",
@@ -654,6 +903,70 @@ Array [
     ".background-imported {
   background: url(/webpack/public/path/img.png);
 }
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    13,
+    ".strange {
+  color: red;
+}
+",
+    "",
+  ],
+  Array [
+    13,
+    ".strange {
+  color: red;
+}
+",
+    "",
+  ],
+  Array [
+    13,
+    ".strange {
+  color: red;
+}
 ",
     "",
   ],
@@ -670,6 +983,134 @@ Array [
     ".space {
   color: gray;
 }
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    14,
+    ".space {
+  color: gray;
+}
+",
+    "",
+  ],
+  Array [
+    2,
+    ".test {
+  a: a;
+}
 ",
     "",
   ],
@@ -738,24 +1179,24 @@ exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___);
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and print\\");
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and print\\");
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and print\\");
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and print\\");
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"screen and print\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation: landscape)\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_1___, \\"screen and (orientation:landscape)\\");
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_2___, \\"(min-width: 100px)\\");
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css#hash);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css?#hash);\\"]);
 exports.push([module.id, \\"@import url(http://example.com/style.css?foo=bar#hash);\\"]);
-exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and print\\"]);
-exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and print\\"]);
+exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and (orientation:landscape)\\"]);
+exports.push([module.id, \\"@import url(http://example.com/other-style.css);\\", \\"screen and (orientation:landscape)\\"]);
 exports.push([module.id, \\"@import url(//example.com/style.css);\\"]);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_3___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_4___);
 exports.i(___CSS_LOADER_AT_RULE_IMPORT_5___);
-exports.i(___CSS_LOADER_AT_RULE_IMPORT_5___, \\"screen and print\\");
+exports.i(___CSS_LOADER_AT_RULE_IMPORT_5___, \\"screen and (orientation:landscape)\\");
 exports.push([module.id, \\"@import url(https://fonts.googleapis.com/css?family=Roboto);\\"]);
 exports.push([module.id, \\"@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC);\\"]);
 exports.push([module.id, \\"@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto);\\"]);
diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap
index 0405fbd..3b9a433 100644
--- a/test/__snapshots__/loader.test.js.snap
+++ b/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);
     }
   };
 
diff --git a/test/fixtures/import/import.css b/test/fixtures/import/import.css
index b6e7afa..a9630d9 100644
--- a/test/fixtures/import/import.css
+++ b/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');
diff --git a/test/fixtures/import/order-1.css b/test/fixtures/import/order-1.css
index 6380c4c..3e23caf 100644
--- a/test/fixtures/import/order-1.css
+++ b/test/fixtures/import/order-1.css
@@ -1,3 +1,3 @@
-div {
-  background: red;
+.order-1 {
+  color: red;
 }
diff --git a/test/fixtures/import/order-2.css b/test/fixtures/import/order-2.css
index d352d54..3e23caf 100644
--- a/test/fixtures/import/order-2.css
+++ b/test/fixtures/import/order-2.css
@@ -1,3 +1,3 @@
-div {
-  background: blue;
+.order-1 {
+  color: red;
 }
diff --git a/test/fixtures/import/order-3-1.css b/test/fixtures/import/order-3-1.css
new file mode 100644
index 0000000..f34c602
--- /dev/null
+++ b/test/fixtures/import/order-3-1.css
@@ -0,0 +1,3 @@
+.order-3-1 {
+  color: white;
+}
diff --git a/test/fixtures/import/order-3.css b/test/fixtures/import/order-3.css
new file mode 100644
index 0000000..2894e27
--- /dev/null
+++ b/test/fixtures/import/order-3.css
@@ -0,0 +1,5 @@
+@import url('./order-3-1.css') screen and (orientation:landscape);
+
+.order-3 {
+  color: red;
+}
diff --git a/test/fixtures/import/order-4-1.css b/test/fixtures/import/order-4-1.css
new file mode 100644
index 0000000..d80177c
--- /dev/null
+++ b/test/fixtures/import/order-4-1.css
@@ -0,0 +1,3 @@
+.order-4-1 {
+  color: red;
+}
diff --git a/test/fixtures/import/order-4-2-1.css b/test/fixtures/import/order-4-2-1.css
new file mode 100644
index 0000000..d063acd
--- /dev/null
+++ b/test/fixtures/import/order-4-2-1.css
@@ -0,0 +1,3 @@
+.order-4-2-1 {
+  color: red;
+}
diff --git a/test/fixtures/import/order-4-2-2.css b/test/fixtures/import/order-4-2-2.css
new file mode 100644
index 0000000..851d03b
--- /dev/null
+++ b/test/fixtures/import/order-4-2-2.css
@@ -0,0 +1,3 @@
+.order-4-2-2 {
+  color: red;
+}
diff --git a/test/fixtures/import/order-4-2.css b/test/fixtures/import/order-4-2.css
new file mode 100644
index 0000000..319f286
--- /dev/null
+++ b/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;
+}
diff --git a/test/fixtures/import/order-4.css b/test/fixtures/import/order-4.css
new file mode 100644
index 0000000..66940a7
--- /dev/null
+++ b/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;
+}
diff --git a/test/fixtures/import/order.css b/test/fixtures/import/order.css
index 6e6bd41..0f13810 100644
--- a/test/fixtures/import/order.css
+++ b/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%;
diff --git a/test/runtime/__snapshots__/api.test.js.snap b/test/runtime/__snapshots__/api.test.js.snap
index 7f34239..c2abf10 100644
--- a/test/runtime/__snapshots__/api.test.js.snap
+++ b/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; }