From 65450d9c04790ccc9fb06eac81ea6d8f3cdbfaac Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Thu, 12 Dec 2019 19:48:33 +0300 Subject: [PATCH] fix: logic for order and media queries for imports (#1018) --- src/runtime/api.js | 31 +- test/__snapshots__/import-option.test.js.snap | 517 ++++++++++++++++-- test/__snapshots__/loader.test.js.snap | 198 ++----- test/fixtures/import/import.css | 16 +- test/fixtures/import/order-1.css | 4 +- test/fixtures/import/order-2.css | 4 +- test/fixtures/import/order-3-1.css | 3 + test/fixtures/import/order-3.css | 5 + test/fixtures/import/order-4-1.css | 3 + test/fixtures/import/order-4-2-1.css | 3 + test/fixtures/import/order-4-2-2.css | 3 + test/fixtures/import/order-4-2.css | 6 + test/fixtures/import/order-4.css | 6 + test/fixtures/import/order.css | 3 + test/runtime/__snapshots__/api.test.js.snap | 6 +- 15 files changed, 588 insertions(+), 220 deletions(-) create mode 100644 test/fixtures/import/order-3-1.css create mode 100644 test/fixtures/import/order-3.css create mode 100644 test/fixtures/import/order-4-1.css create mode 100644 test/fixtures/import/order-4-2-1.css create mode 100644 test/fixtures/import/order-4-2-2.css create mode 100644 test/fixtures/import/order-4-2.css create mode 100644 test/fixtures/import/order-4.css 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; }