diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31f4e3e4..b4f61eb4 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/package-lock.json b/package-lock.json
index eeea1746..e7f51f22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "css-loader",
- "version": "3.3.1",
+ "version": "3.3.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 12ec1230..0bd1a342 100644
--- a/package.json
+++ b/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",
diff --git a/src/runtime/api.js b/src/runtime/api.js
index 117f5263..b2acad8c 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);
}
};
diff --git a/test/__snapshots__/import-option.test.js.snap b/test/__snapshots__/import-option.test.js.snap
index e2befe22..e97bc6e2 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 0405fbdd..3b9a433c 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 b6e7afa5..a9630d92 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 6380c4c5..3e23caf8 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 d352d54f..3e23caf8 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 00000000..f34c6020
--- /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 00000000..2894e271
--- /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 00000000..d80177cb
--- /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 00000000..d063acd2
--- /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 00000000..851d03b2
--- /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 00000000..319f2869
--- /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 00000000..66940a71
--- /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 6e6bd41b..0f138102 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 7f342391..c2abf102 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; }