From bce2c17524290591be243829187f909a0ae5a6f7 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Fri, 17 Sep 2021 23:52:45 +0300 Subject: [PATCH] feat: supported `supports()` and `layer()` and fix multiple `@media` merging in `@import` at-rule (#1377) --- .eslintrc.js | 1 + src/index.js | 6 +- src/plugins/postcss-import-parser.js | 84 +- src/runtime/api.js | 59 +- src/utils.js | 60 +- test/__snapshots__/import-option.test.js.snap | 2648 ++++++----------- .../sourceMap-option.test.js.snap | 22 +- .../import/deep-import-with-layer.css | 7 + .../import/deep-import-with-media.css | 1 + .../import/deep-import-with-supports.css | 1 + test/fixtures/import/deep-layer-base.css | 3 + .../import/deep-layer-first-level.css | 2 + test/fixtures/import/deep-layer.css | 8 + .../import-deep-with-supports-and-media.css | 1 + .../import/import-multiple-unnamed-layer.css | 6 + .../import/import-multiple-with-layer.css | 8 + test/fixtures/import/import-unnamed-layer.css | 5 + ...port-with-layer-and-supports-and-media.css | 2 +- test/fixtures/import/import-with-layer.css | 8 +- test/fixtures/import/import-with-media.css | 1 + .../import/import-with-supports-and-media.css | 2 +- test/fixtures/import/import.css | 27 +- test/fixtures/import/import.js | 2 +- test/import-option.test.js | 7 +- test/runtime/__snapshots__/api.test.js.snap | 10 +- test/runtime/api.test.js | 142 +- test/sourceMap-option.test.js | 2 +- 27 files changed, 1251 insertions(+), 1874 deletions(-) create mode 100644 test/fixtures/import/deep-import-with-layer.css create mode 100644 test/fixtures/import/deep-import-with-media.css create mode 100644 test/fixtures/import/deep-import-with-supports.css create mode 100644 test/fixtures/import/deep-layer-base.css create mode 100644 test/fixtures/import/deep-layer-first-level.css create mode 100644 test/fixtures/import/deep-layer.css create mode 100644 test/fixtures/import/import-deep-with-supports-and-media.css create mode 100644 test/fixtures/import/import-multiple-unnamed-layer.css create mode 100644 test/fixtures/import/import-multiple-with-layer.css create mode 100644 test/fixtures/import/import-unnamed-layer.css create mode 100644 test/fixtures/import/import-with-media.css diff --git a/.eslintrc.js b/.eslintrc.js index f23a1652..7a66ba28 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,6 +12,7 @@ module.exports = { "no-param-reassign": "off", "no-continue": "off", "no-underscore-dangle": "off", + "no-undefined": "off", }, }, ], diff --git a/src/index.js b/src/index.js index c462060d..b8b72d05 100644 --- a/src/index.js +++ b/src/index.js @@ -71,7 +71,7 @@ export default async function loader(content, map, meta) { context: this.context, rootContext: this.rootContext, resourcePath: this.resourcePath, - filter: getFilter(options.import.filter, this.resourcePath), + filter: options.import.filter, resolver, urlHandler: (url) => stringifyRequest( @@ -205,13 +205,11 @@ export default async function loader(content, map, meta) { if (options.sourceMap) { imports.unshift({ - type: "api_sourcemap_import", importName: "___CSS_LOADER_API_SOURCEMAP_IMPORT___", - url: stringifyRequest(this, require.resolve("./runtime/noSourceMaps")), + url: stringifyRequest(this, require.resolve("./runtime/sourceMaps")), }); } else { imports.unshift({ - type: "api_sourcemap_import", importName: "___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___", url: stringifyRequest(this, require.resolve("./runtime/noSourceMaps")), }); diff --git a/src/plugins/postcss-import-parser.js b/src/plugins/postcss-import-parser.js index 9a75b2ad..b410c99a 100644 --- a/src/plugins/postcss-import-parser.js +++ b/src/plugins/postcss-import-parser.js @@ -118,15 +118,54 @@ function parseNode(atRule, key) { throw error; } - const mediaNodes = paramsNodes.slice(1); + const additionalNodes = paramsNodes.slice(1); + + let supports; + let layer; let media; - if (mediaNodes.length > 0) { - media = valueParser.stringify(mediaNodes).trim().toLowerCase(); + if (additionalNodes.length > 0) { + let nodes = []; + + for (const node of additionalNodes) { + nodes.push(node); + + const isLayerFunction = + node.type === "function" && node.value.toLowerCase() === "layer"; + const isLayerWord = + node.type === "word" && node.value.toLowerCase() === "layer"; + + if (isLayerFunction || isLayerWord) { + if (isLayerFunction) { + nodes.splice(nodes.length - 1, 1, ...node.nodes); + } else { + nodes.splice(nodes.length - 1, 1, { + type: "string", + value: "", + unclosed: false, + }); + } + + layer = valueParser.stringify(nodes).trim().toLowerCase(); + nodes = []; + } else if ( + node.type === "function" && + node.value.toLowerCase() === "supports" + ) { + nodes.splice(nodes.length - 1, 1, ...node.nodes); + + supports = valueParser.stringify(nodes).trim().toLowerCase(); + nodes = []; + } + } + + if (nodes.length > 0) { + media = valueParser.stringify(nodes).trim().toLowerCase(); + } } // eslint-disable-next-line consistent-return - return { atRule, prefix, url, media, isRequestable }; + return { atRule, prefix, url, layer, supports, media, isRequestable }; } const plugin = (options = {}) => { @@ -160,11 +199,24 @@ const plugin = (options = {}) => { const resolvedAtRules = await Promise.all( parsedAtRules.map(async (parsedAtRule) => { - const { atRule, isRequestable, prefix, url, media } = - parsedAtRule; + const { + atRule, + isRequestable, + prefix, + url, + layer, + supports, + media, + } = parsedAtRule; if (options.filter) { - const needKeep = await options.filter(url, media); + const needKeep = await options.filter( + url, + media, + options.resourcePath, + supports, + layer + ); if (!needKeep) { return; @@ -192,13 +244,20 @@ const plugin = (options = {}) => { atRule.remove(); // eslint-disable-next-line consistent-return - return { url: resolvedUrl, media, prefix, isRequestable }; + return { + url: resolvedUrl, + layer, + supports, + media, + prefix, + isRequestable, + }; } atRule.remove(); // eslint-disable-next-line consistent-return - return { url, media, prefix, isRequestable }; + return { url, layer, supports, media, prefix, isRequestable }; }) ); @@ -212,10 +271,11 @@ const plugin = (options = {}) => { continue; } - const { url, isRequestable, media } = resolvedAtRule; + const { url, isRequestable, layer, supports, media } = + resolvedAtRule; if (!isRequestable) { - options.api.push({ url, media, index }); + options.api.push({ url, layer, supports, media, index }); // eslint-disable-next-line no-continue continue; @@ -237,7 +297,7 @@ const plugin = (options = {}) => { }); } - options.api.push({ importName, media, index }); + options.api.push({ importName, layer, supports, media, index }); } }, }; diff --git a/src/runtime/api.js b/src/runtime/api.js index 05fb4caf..e868524f 100644 --- a/src/runtime/api.js +++ b/src/runtime/api.js @@ -8,10 +8,34 @@ module.exports = (cssWithMappingToString) => { // return the list of modules as css string list.toString = function toString() { return this.map((item) => { - const content = cssWithMappingToString(item); + let content = ""; + + const needLayer = typeof item[5] !== "undefined"; + + if (item[4]) { + content += `@supports (${item[4]}) {`; + } + + if (item[2]) { + content += `@media ${item[2]} {`; + } + + if (needLayer) { + content += `@layer${item[5].length > 0 ? ` ${item[5]}` : ""} {`; + } + + content += cssWithMappingToString(item); + + if (needLayer) { + content += "}"; + } if (item[2]) { - return `@media ${item[2]} {${content}}`; + content += "}"; + } + + if (item[4]) { + content += "}"; } return content; @@ -19,9 +43,9 @@ module.exports = (cssWithMappingToString) => { }; // import a list of modules into the list - list.i = function i(modules, mediaQuery, dedupe) { + list.i = function i(modules, media, dedupe, supports, layer) { if (typeof modules === "string") { - modules = [[null, modules, ""]]; + modules = [[null, modules, undefined]]; } const alreadyImportedModules = {}; @@ -43,11 +67,32 @@ module.exports = (cssWithMappingToString) => { continue; } - if (mediaQuery) { + if (typeof layer !== "undefined") { + if (typeof item[5] === "undefined") { + item[5] = layer; + } else { + item[1] = `@layer${item[5].length > 0 ? ` ${item[5]}` : ""} {${ + item[1] + }}`; + item[5] = layer; + } + } + + if (media) { if (!item[2]) { - item[2] = mediaQuery; + item[2] = media; + } else { + item[1] = `@media ${item[2]} {${item[1]}}`; + item[2] = media; + } + } + + if (supports) { + if (!item[4]) { + item[4] = `${supports}`; } else { - item[2] = `${mediaQuery} and ${item[2]}`; + item[1] = `@supports (${item[4]}) {${item[1]}}`; + item[4] = supports; } } diff --git a/src/utils.js b/src/utils.js index ccc289d7..97aef5b5 100644 --- a/src/utils.js +++ b/src/utils.js @@ -921,6 +921,34 @@ function normalizeSourceMapForRuntime(map, loaderContext) { return JSON.stringify(resultMap); } +function printParams(media, dedupe, supports, layer) { + let result = ""; + + if (typeof layer !== "undefined") { + result = `, ${JSON.stringify(layer)}`; + } + + if (typeof supports !== "undefined") { + result = `, ${JSON.stringify(supports)}${result}`; + } else if (result.length > 0) { + result = `, undefined${result}`; + } + + if (dedupe) { + result = `, true${result}`; + } else if (result.length > 0) { + result = `, false${result}`; + } + + if (media) { + result = `${JSON.stringify(media)}${result}`; + } else if (result.length > 0) { + result = `""${result}`; + } + + return result; +} + function getModuleCode(result, api, replacements, options, loaderContext) { if (options.modules.exportOnlyLocals === true) { return ""; @@ -939,15 +967,22 @@ function getModuleCode(result, api, replacements, options, loaderContext) { });\n`; for (const item of api) { - const { url, media, dedupe } = item; - - beforeCode += url - ? `___CSS_LOADER_EXPORT___.push([module.id, ${JSON.stringify( - `@import url(${url});` - )}${media ? `, ${JSON.stringify(media)}` : ""}]);\n` - : `___CSS_LOADER_EXPORT___.i(${item.importName}${ - media ? `, ${JSON.stringify(media)}` : dedupe ? ', ""' : "" - }${dedupe ? ", true" : ""});\n`; + const { url, layer, supports, media, dedupe } = item; + + if (url) { + // eslint-disable-next-line no-undefined + const printedParam = printParams(media, undefined, supports, layer); + + beforeCode += `___CSS_LOADER_EXPORT___.push([module.id, ${JSON.stringify( + `@import url(${url});` + )}${printedParam.length > 0 ? `, ${printedParam}` : ""}]);\n`; + } else { + const printedParam = printParams(media, dedupe, supports, layer); + + beforeCode += `___CSS_LOADER_EXPORT___.i(${item.importName}${ + printedParam.length > 0 ? `, ${printedParam}` : "" + });\n`; + } } for (const item of replacements) { @@ -980,6 +1015,13 @@ function getModuleCode(result, api, replacements, options, loaderContext) { } } + // Indexes description: + // 0 - module id + // 1 - CSS code + // 2 - media + // 3 - source map + // 4 - supports + // 5 - layer return `${beforeCode}// Module\n___CSS_LOADER_EXPORT___.push([module.id, ${code}, ""${sourceMapValue}]);\n`; } diff --git a/test/__snapshots__/import-option.test.js.snap b/test/__snapshots__/import-option.test.js.snap index 26a56ee7..a4470ab0 100644 --- a/test/__snapshots__/import-option.test.js.snap +++ b/test/__snapshots__/import-option.test.js.snap @@ -101,35 +101,35 @@ Array [ ], Array [ "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/order-4-1.css", - ".order-4-1 { + "@media (min-width: 1000px) {.order-4-1 { color: red; } -", - "screen and (min-width: 1000px)", +}", + "screen", ], Array [ "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/order-4-2-1.css", - ".order-4-2-1 { + "@media (min-width: 2000px) {.order-4-2-1 { color: red; } -", - "screen and (min-width: 2000px)", +}", + "screen", ], Array [ "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/order-4-2-2.css", - ".order-4-2-2 { + "@media (min-width: 2000px) {@media (orientation:landscape) {.order-4-2-2 { color: red; } -", - "screen and (min-width: 2000px) and (orientation:landscape)", +}}", + "screen", ], Array [ "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/order-4-2.css", - ".order-4-2 { + "@media (min-width: 2000px) {.order-4-2 { color: red; } -", - "screen and (min-width: 2000px)", +}", + "screen", ], Array [ "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/order-4.css", @@ -503,12 +503,21 @@ import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??ruleS import ___CSS_LOADER_AT_RULE_IMPORT_25___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./my.scss\\"; import ___CSS_LOADER_AT_RULE_IMPORT_26___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./package/first.css\\"; import ___CSS_LOADER_AT_RULE_IMPORT_27___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./node_modules/package/second.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_28___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_29___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_30___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_31___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_32___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_33___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_28___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_29___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_30___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_31___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_32___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_33___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-deep-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_34___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_35___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_36___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_37___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_38___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_39___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_40___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_41___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_42___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-layer.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); @@ -579,8 +588,8 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_13___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_14___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_15___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_16___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex) screen and (orientation:landscape)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\", false, \\"display: flex\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_17___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_17___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_18___); @@ -602,30 +611,49 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_13___); ___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);\\"]); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_26___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_27___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"supports(display: flex) screen and (min-width: 400px)\\"]); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default)supports(display: flex)screen and (min-width:400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"unknown\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex !important\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"\\"); +___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"]); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width:400px)\\", false, \\"display: flex\\", \\"default\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer( default ) supports( display : flex ) screen and ( min-width : 400px )\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ layer(/* comment */default/* comment */) /* comment */ supports(/* comment */display/* comment */:/* comment */ flex/* comment */)/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and ( min-width : 400px )\\", false, \\"display : flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)\\", false, \\"/* comment */ /* comment */display/* comment */:/* comment */ flex/* comment */\\", \\"/* comment */ /* comment */default/* comment */\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ print and (orientation:landscape)\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ print and (orientation:landscape)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_28___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_29___, \\"supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_31___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_32___, \\"layer(default) supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_33___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_28___, \\"screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_29___, \\"(prefers-color-scheme: dark)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"\\", false, \\"((display: flex))\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_31___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: grid\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_32___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_33___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_34___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_35___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_36___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_37___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_38___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_39___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_40___, \\"\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_41___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_42___); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"unknown(default) unknown(display: flex) unknown\\"); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\" \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\\\n/* TODO fix comments */\\\\n/* TODO check source maps generation */\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\" \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -677,10 +705,10 @@ exports[`"import" option should work when not specified and print correct output }@media screen and (orientation:landscape) {.test { a: a; } -}@media screen and (orientation:landscape) and (min-width: 100px) {a { +}@media screen and (orientation:landscape) {@media (min-width: 100px) {a { b: b; } -}@media screen and (orientation:landscape) {.test { +}}@media screen and (orientation:landscape) {.test { c: c; } }@media (min-width: 100px) {.test { @@ -800,13 +828,13 @@ a { color: red };.test { .test { a: a; } -@media supports(display: flex) {.test { +@supports (display: flex) {.test { a: a; } -}@media supports(display: flex) screen and (orientation:landscape) {.test { +}@supports (display: flex) {@media screen and (orientation:landscape) {.test { a: a; } -}.my-box { +}}.my-box { color: red; } .my-box { @@ -859,37 +887,55 @@ a { .second { color: red; } -@media supports(display: flex) {.test { +.test { + a: a; +} +@supports (unknown) {.test { + a: a; +} +}@supports (display: flex) {.test { + a: a; +} +}@supports (display: flex !important) {.test { + a: a; +} +}@supports (display: flex) {@media screen and (min-width: 400px) {.test { a: a; } -}@media supports(display: flex) screen and (min-width: 400px) {.test { +}}@layer {.test { a: a; } -}@media layer {.test { +}@layer default {.test { a: a; } -}@media layer(default) {.test { +}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {.test { a: a; } -}@media layer(default) supports(display: flex) screen and (min-width: 400px) {.test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer {.test { a: a; } -}@media supports(display: flex) screen and (min-width: 400px) {@import url(http://example.com/style.css);}@media layer(default)supports(display: flex)screen and (min-width:400px) {.test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer {.test { a: a; } -}@media screen and (min-width: 400px) {.test { +}}}@layer {.test { a: a; } -}@media layer( default ) supports( display : flex ) screen and ( min-width : 400px ) {.test { +}@supports (display: flex) {@media screen and (min-width: 400px) {@import url(http://example.com/style.css);}}@supports (display: flex) {@media screen and (min-width:400px) {@layer default {.test { a: a; } -}@media layer(default) supports(display: flex) screen and (min-width: 400px) {.test { +}}}@media screen and (min-width: 400px) {.test { a: a; } -}@media /* comment */ layer(/* comment */default/* comment */) /* comment */ supports(/* comment */display/* comment */:/* comment */ flex/* comment */)/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */) {.test { +}@supports (display : flex) {@media screen and ( min-width : 400px ) {@layer default {.test { a: a; } -}.test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {.test { + a: a; +} +}}}@supports (/* comment */ /* comment */display/* comment */:/* comment */ flex/* comment */) {@media /* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */) {@layer /* comment */ /* comment */default/* comment */ {.test { + a: a; +} +}}}.test { a: a; } .test { @@ -901,22 +947,107 @@ a { }@media /* comment */ print and (orientation:landscape) {.test { a: a; } -}@media supports(display: flex) and supports(display: grid) {.test { +}@media screen and (min-width: 400px) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}@media screen and (min-width: 400px) { +}@media (prefers-color-scheme: dark) {@media screen and (min-width: 400px) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}@media (prefers-color-scheme: dark) {@media screen and (min-width: 400px) { +}}@media (prefers-color-scheme: dark) {}@supports (display: flex) {@supports (display: grid) {.test { + a: a; +} +}}@supports (display: flex) {}@supports (((display: flex))) {@supports (display: grid) {.test { + a: a; +} +}}@supports (((display: flex))) {}@supports (display: flex) {@supports (display: block) {@supports (display: grid) {.test { + a: a; +} +}}}@supports (display: flex) {@supports (display: block) {}}@supports (display: flex) {}@supports (display: grid) {.test { + a: a; +} +}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: grid) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}}@supports (display: flex) {@media screen and (min-width: 400px) {}}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: grid) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}}}}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: flex) {@media screen and (min-width: 400px) {}}}}@supports (display: flex) {@media screen and (min-width: 400px) {}}@layer framework {.test { + a: a; +} +}@layer framework {@layer base {.test { + a: a; +} +}}@layer framework {@layer base { + .foo { + color: red; + } +} +}@layer framework {@layer form {@layer base {.test { + a: a; +} +}}}@layer framework {@layer form {@layer base { + .foo { + color: red; + } +} +}}@layer framework {@layer form { + .bar { + color: red; + } +} +}@layer default {@layer base {.test { + a: a; +} +}}@layer default {@layer base {.relative { + color: red; +} +}}@layer default {@layer base { + .foo { + color: red; + } +} +}@layer default {@layer {.test { + a: a; +} +}}@layer default {}@layer base {@layer {.test { + a: a; +} +}}@layer base {.foo { + color: red; +} +}@layer base {@layer {.test { a: a; } -}@media supports(display: flex) {}@media supports(display: flex) screen and (min-width: 400px) and supports(display: grid) handheld and (max-width: 400px) {.test { +}}@layer base {@layer {.relative { + color: red; +} +}}@layer base {.foo { + color: red; +} +}@supports (display: flex) {@layer default {@layer base {.test { a: a; } -}@media supports(display: flex) screen and (min-width: 400px) {}@media layer(default) and layer(base) supports(display: grid) {.test { +}}}@supports (display: flex) {@layer default {}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {@supports (display: grid) {@media screen and (min-width: 900px) {@layer base {.test { a: a; } -}@media layer(default) {}@media layer(default) and layer {.test { +}}}}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {}}}@layer bootstrap {@layer base {@layer {.relative { + color: red; +} +}}}@layer bootstrap {@layer base {@layer {.test { a: a; } -}@media layer(default) {}@media layer(default) supports(display: flex) and layer(base) {.test { +}}}@layer bootstrap {@layer base {/* unnamed wrapper layers around each sub-file */ +}}@layer bootstrap {/* the internal names are hidden from access, subsumed in \\"base\\" */}/* Adds additional styles to the bootstrap layer: */ +@layer bootstrap { + .test { + color: red; + } +}@media unknown(default) unknown(display: flex) unknown {.test { a: a; } -}@media layer(default) supports(display: flex) {}@media layer(default) supports(display: flex) screen and (min-width: 400px) {}@import url(); +}@import url(); @import url(''); @import url(\\"\\"); @import ''; @@ -937,7 +1068,7 @@ a { } .foo { -@import 'path.css'; + @import 'path.css'; } .background { @@ -963,9 +1094,6 @@ a { @import url('!!../../helpers/string-loader.js?esModule=false!'); /* Prefer relative */ - -/* TODO fix comments */ -/* TODO check source maps generation */ " `; @@ -1076,12 +1204,21 @@ import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??ruleS import ___CSS_LOADER_AT_RULE_IMPORT_25___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./my.scss\\"; import ___CSS_LOADER_AT_RULE_IMPORT_26___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./package/first.css\\"; import ___CSS_LOADER_AT_RULE_IMPORT_27___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./node_modules/package/second.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_28___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_29___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_30___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_31___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_32___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_33___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_28___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_29___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_30___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_31___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_32___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_33___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-deep-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_34___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_35___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_36___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_37___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_38___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_39___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_40___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_41___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_42___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-layer.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); @@ -1152,8 +1289,8 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_13___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_14___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_15___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_16___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex) screen and (orientation:landscape)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\", false, \\"display: flex\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_17___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_17___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_18___); @@ -1175,898 +1312,443 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_13___); ___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);\\"]); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_26___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_27___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"supports(display: flex) screen and (min-width: 400px)\\"]); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default)supports(display: flex)screen and (min-width:400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"unknown\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex !important\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"\\"); +___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"]); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width:400px)\\", false, \\"display: flex\\", \\"default\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer( default ) supports( display : flex ) screen and ( min-width : 400px )\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ layer(/* comment */default/* comment */) /* comment */ supports(/* comment */display/* comment */:/* comment */ flex/* comment */)/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and ( min-width : 400px )\\", false, \\"display : flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)\\", false, \\"/* comment */ /* comment */display/* comment */:/* comment */ flex/* comment */\\", \\"/* comment */ /* comment */default/* comment */\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ print and (orientation:landscape)\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ print and (orientation:landscape)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_28___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_29___, \\"supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_31___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_32___, \\"layer(default) supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_33___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_28___, \\"screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_29___, \\"(prefers-color-scheme: dark)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"\\", false, \\"((display: flex))\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_31___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: grid\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_32___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_33___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_34___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_35___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_36___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_37___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_38___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_39___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_40___, \\"\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_41___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_42___); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"unknown(default) unknown(display: flex) unknown\\"); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\" \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\\\n/* TODO fix comments */\\\\n/* TODO check source maps generation */\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\" \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " `; exports[`"import" option should work when not specified: result 1`] = ` -Array [ - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +".test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +@media screen and (orientation:landscape) {.test { a: a; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@media screen and (orientation: landscape) {.test { a: a; } -", - "screen and (orientation: landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@media screen and (orientation:landscape) {.test { a: a; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@media screen and (orientation:landscape) {.test { a: a; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-nested-media.css", - "a { +}@media screen and (orientation:landscape) {@media (min-width: 100px) {a { b: b; } -", - "screen and (orientation:landscape) and (min-width: 100px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-media.css", - ".test { +}}@media screen and (orientation:landscape) {.test { c: c; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-other.css", - ".test { +}@media (min-width: 100px) {.test { d: d; } -", - "(min-width: 100px)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css?#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css?foo=bar#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/other-style.css);", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/other-style.css);", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(//example.com/style.css);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/test.css", - ".test { +}@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);@media screen and (orientation:landscape) {@import url(http://example.com/other-style.css);}@media screen and (orientation:landscape) {@import url(http://example.com/other-style.css);}@import url(//example.com/style.css);.test { d: d } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/query.css?foo=1&bar=1", - ".query { +.query { e: e; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/other-query.css?foo=1&bar=1#hash", - ".other-query { +.other-query { f: f; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/other-query.css?foo=1&bar=1#hash", - ".other-query { +@media screen and (orientation:landscape) {.other-query { f: f; } -", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Roboto);", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC);", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/relative.css", - ".relative { +}@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);.relative { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/top-relative.css", - ".top-relative { +.top-relative { color: black; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/tilde.css", - ".tilde { +.tilde { color: yellow; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/alias.css", - ".alias { +.alias { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/url.css", - ".background-imported { +.background-imported { background: url(replaced_file_protocol_/webpack/public/path/img.png); } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!../helpers/string-loader.js?esModule=false!./import/node_modules/package/tilde.css", - "a { color: red };", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css?foo=bar", - ".test { +a { color: red };.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css?foo=bar#hash", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css?#hash", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +@supports (display: flex) {.test { a: a; } -", - "supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (orientation:landscape) {.test { a: a; } -", - "supports(display: flex) screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css", - ".my-box { +}}.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#hash", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#hash", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?bar=foo", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#one", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#two", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=1&bar=2", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=2&bar=1", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/my.scss", - "a { +a { color: red; -}", - "", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Roboto);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!../helpers/string-loader.js?esModule=false!./import/node_modules/package/tilde.css", - "a { color: red };", - "", - ], - Array [ - "./import/import.css", - "@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/package/first.css", - ".first { +}@import url(https://fonts.googleapis.com/css?family=Roboto);a { color: red };@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);.first { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/second.css", - ".second { +.second { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +@supports (unknown) {.test { a: a; } -", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {.test { a: a; } -", - "layer", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex !important) {.test { a: a; } -", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (min-width: 400px) {.test { a: a; } -", - "layer(default) supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}@layer {.test { a: a; } -", - "layer(default)supports(display: flex)screen and (min-width:400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@layer default {.test { a: a; } -", - "screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {.test { a: a; } -", - "layer( default ) supports( display : flex ) screen and ( min-width : 400px )", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer {.test { a: a; } -", - "layer(default) supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer {.test { a: a; } -", - "/* comment */ layer(/* comment */default/* comment */) /* comment */ supports(/* comment */display/* comment */:/* comment */ flex/* comment */)/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@layer {.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (min-width: 400px) {@import url(http://example.com/style.css);}}@supports (display: flex) {@media screen and (min-width:400px) {@layer default {.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@media screen and (min-width: 400px) {.test { a: a; } -", - "/* comment */ print and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display : flex) {@media screen and ( min-width : 400px ) {@layer default {.test { a: a; } -", - "/* comment */ print and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {.test { a: a; } -", - "supports(display: flex) and supports(display: grid)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-supports.css", - "", - "supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (/* comment */ /* comment */display/* comment */:/* comment */ flex/* comment */) {@media /* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */) {@layer /* comment */ /* comment */default/* comment */ {.test { a: a; } -", - "supports(display: flex) screen and (min-width: 400px) and supports(display: grid) handheld and (max-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-supports-and-media.css", - "", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}.test { a: a; } -", - "layer(default) and layer(base) supports(display: grid)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer.css", - "", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "layer(default) and layer", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-unnamed.css", - "", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +@media /* comment */ print and (orientation:landscape) {.test { a: a; } -", - "layer(default) supports(display: flex) and layer(base)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-and-supports.css", - "", - "layer(default) supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-and-supports-and-media.css", - "", - "layer(default) supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "./import/import.css", - "@import url(); +}@media /* comment */ print and (orientation:landscape) {.test { + a: a; +} +}@media screen and (min-width: 400px) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}@media screen and (min-width: 400px) { +}@media (prefers-color-scheme: dark) {@media screen and (min-width: 400px) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}@media (prefers-color-scheme: dark) {@media screen and (min-width: 400px) { +}}@media (prefers-color-scheme: dark) {}@supports (display: flex) {@supports (display: grid) {.test { + a: a; +} +}}@supports (display: flex) {}@supports (((display: flex))) {@supports (display: grid) {.test { + a: a; +} +}}@supports (((display: flex))) {}@supports (display: flex) {@supports (display: block) {@supports (display: grid) {.test { + a: a; +} +}}}@supports (display: flex) {@supports (display: block) {}}@supports (display: flex) {}@supports (display: grid) {.test { + a: a; +} +}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: grid) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}}@supports (display: flex) {@media screen and (min-width: 400px) {}}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: grid) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}}}}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: flex) {@media screen and (min-width: 400px) {}}}}@supports (display: flex) {@media screen and (min-width: 400px) {}}@layer framework {.test { + a: a; +} +}@layer framework {@layer base {.test { + a: a; +} +}}@layer framework {@layer base { + .foo { + color: red; + } +} +}@layer framework {@layer form {@layer base {.test { + a: a; +} +}}}@layer framework {@layer form {@layer base { + .foo { + color: red; + } +} +}}@layer framework {@layer form { + .bar { + color: red; + } +} +}@layer default {@layer base {.test { + a: a; +} +}}@layer default {@layer base {.relative { + color: red; +} +}}@layer default {@layer base { + .foo { + color: red; + } +} +}@layer default {@layer {.test { + a: a; +} +}}@layer default {}@layer base {@layer {.test { + a: a; +} +}}@layer base {.foo { + color: red; +} +}@layer base {@layer {.test { + a: a; +} +}}@layer base {@layer {.relative { + color: red; +} +}}@layer base {.foo { + color: red; +} +}@supports (display: flex) {@layer default {@layer base {.test { + a: a; +} +}}}@supports (display: flex) {@layer default {}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {@supports (display: grid) {@media screen and (min-width: 900px) {@layer base {.test { + a: a; +} +}}}}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {}}}@layer bootstrap {@layer base {@layer {.relative { + color: red; +} +}}}@layer bootstrap {@layer base {@layer {.test { + a: a; +} +}}}@layer bootstrap {@layer base {/* unnamed wrapper layers around each sub-file */ +}}@layer bootstrap {/* the internal names are hidden from access, subsumed in \\"base\\" */}/* Adds additional styles to the bootstrap layer: */ +@layer bootstrap { + .test { + color: red; + } +}@media unknown(default) unknown(display: flex) unknown {.test { + a: a; +} +}@import url(); @import url(''); @import url(\\"\\"); @import ''; @@ -2087,7 +1769,7 @@ Array [ } .foo { -@import 'path.css'; + @import 'path.css'; } .background { @@ -2113,13 +1795,7 @@ Array [ @import url('!!../../helpers/string-loader.js?esModule=false!'); /* Prefer relative */ - -/* TODO fix comments */ -/* TODO check source maps generation */ -", - "", - ], -] +" `; exports[`"import" option should work when not specified: warnings 1`] = ` @@ -2574,17 +2250,14 @@ var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); // Module -___CSS_LOADER_EXPORT___.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(\\\\ntest.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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css');\\\\n@import url(test.css?foo=bar);\\\\n@import url(test.css?foo=bar#hash);\\\\n@import url(test.css?#hash);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex) screen and (orientation:landscape);\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css');\\\\n@import url('something.css');\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar');\\\\n@import url('something.css?foo=bar');\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar#hash');\\\\n@import url('something.css?foo=bar#hash');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar');\\\\n@import url('something.css?bar=foo');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar#one');\\\\n@import url('something.css?foo=bar#two');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=1&bar=2');\\\\n@import url('something.css?foo=2&bar=1');\\\\n\\\\n@import \\\\\\" ./test.css \\\\\\";\\\\n@import url(' ./test.css ');\\\\n@import url( ./test.css );\\\\n\\\\n@import \\\\\\"./my.scss\\\\\\";\\\\n\\\\n@import url(' https://fonts.googleapis.com/css?family=Roboto ');\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n@import url(' !!../../helpers/string-loader.js?esModule=false!~package/tilde.css ');\\\\n@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);\\\\n\\\\n/* Prefer relative */\\\\n@import url(package/first.css);\\\\n@import url(package/second.css);\\\\n\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer;\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default) supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"http://example.com/style.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\")layer(default)supports(display: flex)screen and (min-width:400px);\\\\n@import url(\\\\\\"./test.css\\\\\\")screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer( default ) supports( display : flex ) screen and ( min-width : 400px );\\\\n@import url(\\\\\\"./test.css\\\\\\") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX);\\\\n@import url(\\\\\\"./test.css\\\\\\") /* Comment */ layer(/* Comment */default/* Comment */) /* Comment */ supports(/* Comment */display/* Comment */:/* Comment */ flex/* Comment */)/* Comment */ screen/* Comment */ and/* Comment */ (/* Comment */min-width/* Comment */: /* Comment */400px/* Comment */);\\\\n@import url(test.css) /* Comment */;\\\\n@import /* Comment */ url(test.css) /* Comment */;\\\\n@import url(test.css) /* Comment */ print and (orientation:landscape);\\\\n@import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape);\\\\n\\\\n@import url(\\\\\\"./import-with-supports.css\\\\\\") supports(display: flex);\\\\n@import url(\\\\\\"./import-with-supports-and-media.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./import-with-layer.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./import-with-layer-unnamed.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./import-with-layer-and-supports.css\\\\\\") layer(default) supports(display: flex);\\\\n@import url(\\\\\\"./import-with-layer-and-supports-and-media.css\\\\\\") layer(default) supports(display: flex) screen and (min-width: 400px);\\\\n\\\\n/* TODO fix comments */\\\\n/* TODO check source maps generation */\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css');\\\\n@import url(test.css?foo=bar);\\\\n@import url(test.css?foo=bar#hash);\\\\n@import url(test.css?#hash);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex) screen and (orientation:landscape);\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css');\\\\n@import url('something.css');\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar');\\\\n@import url('something.css?foo=bar');\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar#hash');\\\\n@import url('something.css?foo=bar#hash');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar');\\\\n@import url('something.css?bar=foo');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=bar#one');\\\\n@import url('something.css?foo=bar#two');\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import url('something.css?foo=1&bar=2');\\\\n@import url('something.css?foo=2&bar=1');\\\\n\\\\n@import \\\\\\" ./test.css \\\\\\";\\\\n@import url(' ./test.css ');\\\\n@import url( ./test.css );\\\\n\\\\n@import \\\\\\"./my.scss\\\\\\";\\\\n\\\\n@import url(' https://fonts.googleapis.com/css?family=Roboto ');\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n@import url(' !!../../helpers/string-loader.js?esModule=false!~package/tilde.css ');\\\\n@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);\\\\n\\\\n/* Prefer relative */\\\\n@import url(package/first.css);\\\\n@import url(package/second.css);\\\\n\\\\n@import url(\\\\\\"./test.css\\\\\\") supports();\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(unknown);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex !important);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer;\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default) supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer() supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer();\\\\n@import url(\\\\\\"http://example.com/style.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\")layer(default)supports(display: flex)screen and (min-width:400px);\\\\n@import url(\\\\\\"./test.css\\\\\\")screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer( default ) supports( display : flex ) screen and ( min-width : 400px );\\\\n@import url(\\\\\\"./test.css\\\\\\") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX);\\\\n@import url(\\\\\\"./test.css\\\\\\") /* Comment */ layer(/* Comment */default/* Comment */) /* Comment */ supports(/* Comment */display/* Comment */:/* Comment */ flex/* Comment */)/* Comment */ screen/* Comment */ and/* Comment */ (/* Comment */min-width/* Comment */: /* Comment */400px/* Comment */);\\\\n@import url(test.css) /* Comment */;\\\\n@import /* Comment */ url(test.css) /* Comment */;\\\\n@import url(test.css) /* Comment */ print and (orientation:landscape);\\\\n@import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape);\\\\n\\\\n@import url(\\\\\\"./import-with-media.css\\\\\\") screen and (min-width: 400px);\\\\n@import url(\\\\\\"./deep-import-with-media.css\\\\\\") (prefers-color-scheme: dark);\\\\n@import url(\\\\\\"./import-with-supports.css\\\\\\") supports(display: flex);\\\\n@import url(\\\\\\"./import-with-supports.css\\\\\\") supports(((display: flex)));\\\\n@import url(\\\\\\"./deep-import-with-supports.css\\\\\\") supports(display: flex);\\\\n@import url('./test.css') supports(display: grid);\\\\n@import url(\\\\\\"./import-with-supports-and-media.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./import-deep-with-supports-and-media.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(framework);\\\\n@import url(\\\\\\"./import-with-layer.css\\\\\\") layer(framework);\\\\n@import url(\\\\\\"./deep-import-with-layer.css\\\\\\") layer(framework);\\\\n@import url(\\\\\\"./import-multiple-with-layer.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./import-with-layer-unnamed.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./import-unnamed-layer.css\\\\\\") layer(base);\\\\n@import url(\\\\\\"./import-multiple-unnamed-layer.css\\\\\\") layer(base);\\\\n@import url(\\\\\\"./import-with-layer-and-supports.css\\\\\\") layer(default) supports(display: flex);\\\\n@import url(\\\\\\"./import-with-layer-and-supports-and-media.css\\\\\\") layer(default) supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./deep-layer.css\\\\\\");\\\\n\\\\n@import url(\\\\\\"./test.css\\\\\\") unknown(default) unknown(display: flex) unknown;\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " `; exports[`"import" option should work with a value equal to "false": result 1`] = ` -Array [ - Array [ - "./import/import.css", - "@import url(test.css); +"@import url(test.css); @import url('test.css'); @import url(\\"test.css\\"); @IMPORT url(test.css); @@ -2593,7 +2266,7 @@ Array [ @import url( test.css); @import url( test.css ); @import url( -test.css + test.css ); @import url(); @import url(''); @@ -2639,7 +2312,7 @@ test.css } .foo { -@import 'path.css'; + @import 'path.css'; } @import url('./relative.css'); @@ -2745,11 +2418,17 @@ st.css'); @import url(package/first.css); @import url(package/second.css); +@import url(\\"./test.css\\") supports(); +@import url(\\"./test.css\\") supports(unknown); @import url(\\"./test.css\\") supports(display: flex); +@import url(\\"./test.css\\") supports(display: flex !important); @import url(\\"./test.css\\") supports(display: flex) screen and (min-width: 400px); @import url(\\"./test.css\\") layer; @import url(\\"./test.css\\") layer(default); @import url(\\"./test.css\\") layer(default) supports(display: flex) screen and (min-width: 400px); +@import url(\\"./test.css\\") layer supports(display: flex) screen and (min-width: 400px); +@import url(\\"./test.css\\") layer() supports(display: flex) screen and (min-width: 400px); +@import url(\\"./test.css\\") layer(); @import url(\\"http://example.com/style.css\\") supports(display: flex) screen and (min-width: 400px); @import url(\\"./test.css\\")layer(default)supports(display: flex)screen and (min-width:400px); @import url(\\"./test.css\\")screen and (min-width: 400px); @@ -2761,19 +2440,27 @@ st.css'); @import url(test.css) /* Comment */ print and (orientation:landscape); @import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape); +@import url(\\"./import-with-media.css\\") screen and (min-width: 400px); +@import url(\\"./deep-import-with-media.css\\") (prefers-color-scheme: dark); @import url(\\"./import-with-supports.css\\") supports(display: flex); +@import url(\\"./import-with-supports.css\\") supports(((display: flex))); +@import url(\\"./deep-import-with-supports.css\\") supports(display: flex); +@import url('./test.css') supports(display: grid); @import url(\\"./import-with-supports-and-media.css\\") supports(display: flex) screen and (min-width: 400px); -@import url(\\"./import-with-layer.css\\") layer(default); +@import url(\\"./import-deep-with-supports-and-media.css\\") supports(display: flex) screen and (min-width: 400px); +@import url(\\"./test.css\\") layer(framework); +@import url(\\"./import-with-layer.css\\") layer(framework); +@import url(\\"./deep-import-with-layer.css\\") layer(framework); +@import url(\\"./import-multiple-with-layer.css\\") layer(default); @import url(\\"./import-with-layer-unnamed.css\\") layer(default); +@import url(\\"./import-unnamed-layer.css\\") layer(base); +@import url(\\"./import-multiple-unnamed-layer.css\\") layer(base); @import url(\\"./import-with-layer-and-supports.css\\") layer(default) supports(display: flex); @import url(\\"./import-with-layer-and-supports-and-media.css\\") layer(default) supports(display: flex) screen and (min-width: 400px); +@import url(\\"./deep-layer.css\\"); -/* TODO fix comments */ -/* TODO check source maps generation */ -", - "", - ], -] +@import url(\\"./test.css\\") unknown(default) unknown(display: flex) unknown; +" `; exports[`"import" option should work with a value equal to "false": warnings 1`] = `Array []`; @@ -2812,12 +2499,21 @@ import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??ruleS import ___CSS_LOADER_AT_RULE_IMPORT_25___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./my.scss\\"; import ___CSS_LOADER_AT_RULE_IMPORT_26___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./package/first.css\\"; import ___CSS_LOADER_AT_RULE_IMPORT_27___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./node_modules/package/second.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_28___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_29___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_30___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_31___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_32___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_33___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_28___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_29___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_30___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_31___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_32___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_33___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-deep-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_34___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_35___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_36___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_37___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_38___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_39___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_40___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_41___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_42___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-layer.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); @@ -2888,8 +2584,8 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_13___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_14___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_15___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_16___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex) screen and (orientation:landscape)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (orientation:landscape)\\", false, \\"display: flex\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_17___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_17___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_18___); @@ -2911,898 +2607,443 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_13___); ___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);\\"]); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_26___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_27___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"supports(display: flex) screen and (min-width: 400px)\\"]); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default)supports(display: flex)screen and (min-width:400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"unknown\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: flex !important\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"\\"); +___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"]); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width:400px)\\", false, \\"display: flex\\", \\"default\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer( default ) supports( display : flex ) screen and ( min-width : 400px )\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ layer(/* comment */default/* comment */) /* comment */ supports(/* comment */display/* comment */:/* comment */ flex/* comment */)/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and ( min-width : 400px )\\", false, \\"display : flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)\\", false, \\"/* comment */ /* comment */display/* comment */:/* comment */ flex/* comment */\\", \\"/* comment */ /* comment */default/* comment */\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ print and (orientation:landscape)\\"); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"/* comment */ print and (orientation:landscape)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_28___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_29___, \\"supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_31___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_32___, \\"layer(default) supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_33___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_28___, \\"screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_29___, \\"(prefers-color-scheme: dark)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"\\", false, \\"((display: flex))\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_31___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, \\"display: grid\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_32___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_33___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_34___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_35___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_36___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_37___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_38___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_39___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_40___, \\"\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_41___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_42___); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"unknown(default) unknown(display: flex) unknown\\"); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\" \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\\\n/* TODO fix comments */\\\\n/* TODO check source maps generation */\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\n@import '';\\\\n@import \\\\\\"\\\\\\";\\\\n@import \\\\\\" \\\\\\";\\\\n@import \\\\\\"\\\\n\\\\\\";\\\\n@import url();\\\\n@import url('');\\\\n@import url(\\\\\\"\\\\\\");\\\\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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " `; exports[`"import" option should work with a value equal to "true": result 1`] = ` -Array [ - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +".test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +@media screen and (orientation:landscape) {.test { a: a; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@media screen and (orientation: landscape) {.test { a: a; } -", - "screen and (orientation: landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@media screen and (orientation:landscape) {.test { a: a; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@media screen and (orientation:landscape) {.test { a: a; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-nested-media.css", - "a { +}@media screen and (orientation:landscape) {@media (min-width: 100px) {a { b: b; } -", - "screen and (orientation:landscape) and (min-width: 100px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-media.css", - ".test { +}}@media screen and (orientation:landscape) {.test { c: c; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-other.css", - ".test { +}@media (min-width: 100px) {.test { d: d; } -", - "(min-width: 100px)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css?#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css?foo=bar#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/other-style.css);", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/other-style.css);", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(//example.com/style.css);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/test.css", - ".test { +}@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);@media screen and (orientation:landscape) {@import url(http://example.com/other-style.css);}@media screen and (orientation:landscape) {@import url(http://example.com/other-style.css);}@import url(//example.com/style.css);.test { d: d } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/query.css?foo=1&bar=1", - ".query { +.query { e: e; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/other-query.css?foo=1&bar=1#hash", - ".other-query { +.other-query { f: f; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/other-query.css?foo=1&bar=1#hash", - ".other-query { +@media screen and (orientation:landscape) {.other-query { f: f; } -", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Roboto);", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC);", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/relative.css", - ".relative { +}@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);.relative { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/top-relative.css", - ".top-relative { +.top-relative { color: black; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/tilde.css", - ".tilde { +.tilde { color: yellow; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/alias.css", - ".alias { +.alias { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/url.css", - ".background-imported { +.background-imported { background: url(replaced_file_protocol_/webpack/public/path/img.png); } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test test.css", - ".space { +.space { color: gray; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!../helpers/string-loader.js?esModule=false!./import/node_modules/package/tilde.css", - "a { color: red };", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css?foo=bar", - ".test { +a { color: red };.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css?foo=bar#hash", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css?#hash", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +@supports (display: flex) {.test { a: a; } -", - "supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (orientation:landscape) {.test { a: a; } -", - "supports(display: flex) screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css", - ".my-box { +}}.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#hash", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#hash", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?bar=foo", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#one", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#two", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=1&bar=2", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=2&bar=1", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/my.scss", - "a { +a { color: red; -}", - "", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Roboto);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!../helpers/string-loader.js?esModule=false!./import/node_modules/package/tilde.css", - "a { color: red };", - "", - ], - Array [ - "./import/import.css", - "@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/package/first.css", - ".first { +}@import url(https://fonts.googleapis.com/css?family=Roboto);a { color: red };@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);.first { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/second.css", - ".second { +.second { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { a: a; } -", - "supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +@supports (unknown) {.test { a: a; } -", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {.test { a: a; } -", - "layer", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex !important) {.test { a: a; } -", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (min-width: 400px) {.test { a: a; } -", - "layer(default) supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}@layer {.test { a: a; } -", - "layer(default)supports(display: flex)screen and (min-width:400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@layer default {.test { a: a; } -", - "screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {.test { a: a; } -", - "layer( default ) supports( display : flex ) screen and ( min-width : 400px )", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer {.test { a: a; } -", - "layer(default) supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer {.test { a: a; } -", - "/* comment */ layer(/* comment */default/* comment */) /* comment */ supports(/* comment */display/* comment */:/* comment */ flex/* comment */)/* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@layer {.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display: flex) {@media screen and (min-width: 400px) {@import url(http://example.com/style.css);}}@supports (display: flex) {@media screen and (min-width:400px) {@layer default {.test { a: a; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@media screen and (min-width: 400px) {.test { a: a; } -", - "/* comment */ print and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}@supports (display : flex) {@media screen and ( min-width : 400px ) {@layer default {.test { a: a; } -", - "/* comment */ print and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {.test { a: a; } -", - "supports(display: flex) and supports(display: grid)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-supports.css", - "", - "supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@supports (/* comment */ /* comment */display/* comment */:/* comment */ flex/* comment */) {@media /* comment */ screen/* comment */ and/* comment */ (/* comment */min-width/* comment */: /* comment */400px/* comment */) {@layer /* comment */ /* comment */default/* comment */ {.test { a: a; } -", - "supports(display: flex) screen and (min-width: 400px) and supports(display: grid) handheld and (max-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-supports-and-media.css", - "", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}.test { a: a; } -", - "layer(default) and layer(base) supports(display: grid)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer.css", - "", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +.test { + a: a; +} +@media /* comment */ print and (orientation:landscape) {.test { + a: a; +} +}@media /* comment */ print and (orientation:landscape) {.test { + a: a; +} +}@media screen and (min-width: 400px) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}@media screen and (min-width: 400px) { +}@media (prefers-color-scheme: dark) {@media screen and (min-width: 400px) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}@media (prefers-color-scheme: dark) {@media screen and (min-width: 400px) { +}}@media (prefers-color-scheme: dark) {}@supports (display: flex) {@supports (display: grid) {.test { + a: a; +} +}}@supports (display: flex) {}@supports (((display: flex))) {@supports (display: grid) {.test { + a: a; +} +}}@supports (((display: flex))) {}@supports (display: flex) {@supports (display: block) {@supports (display: grid) {.test { + a: a; +} +}}}@supports (display: flex) {@supports (display: block) {}}@supports (display: flex) {}@supports (display: grid) {.test { + a: a; +} +}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: grid) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}}@supports (display: flex) {@media screen and (min-width: 400px) {}}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: grid) {@media screen and (max-width: 1200px) {.test { + a: a; +} +}}}}}}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: flex) {@media screen and (min-width: 400px) {}}}}@supports (display: flex) {@media screen and (min-width: 400px) {}}@layer framework {.test { + a: a; +} +}@layer framework {@layer base {.test { + a: a; +} +}}@layer framework {@layer base { + .foo { + color: red; + } +} +}@layer framework {@layer form {@layer base {.test { + a: a; +} +}}}@layer framework {@layer form {@layer base { + .foo { + color: red; + } +} +}}@layer framework {@layer form { + .bar { + color: red; + } +} +}@layer default {@layer base {.test { + a: a; +} +}}@layer default {@layer base {.relative { + color: red; +} +}}@layer default {@layer base { + .foo { + color: red; + } +} +}@layer default {@layer {.test { + a: a; +} +}}@layer default {}@layer base {@layer {.test { + a: a; +} +}}@layer base {.foo { + color: red; +} +}@layer base {@layer {.test { + a: a; +} +}}@layer base {@layer {.relative { + color: red; +} +}}@layer base {.foo { + color: red; +} +}@supports (display: flex) {@layer default {@layer base {.test { + a: a; +} +}}}@supports (display: flex) {@layer default {}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {@supports (display: grid) {@media screen and (min-width: 900px) {@layer base {.test { + a: a; +} +}}}}}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {}}}@layer bootstrap {@layer base {@layer {.relative { + color: red; +} +}}}@layer bootstrap {@layer base {@layer {.test { a: a; } -", - "layer(default) and layer", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-unnamed.css", - "", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test.css", - ".test { +}}}@layer bootstrap {@layer base {/* unnamed wrapper layers around each sub-file */ +}}@layer bootstrap {/* the internal names are hidden from access, subsumed in \\"base\\" */}/* Adds additional styles to the bootstrap layer: */ +@layer bootstrap { + .test { + color: red; + } +}@media unknown(default) unknown(display: flex) unknown {.test { a: a; } -", - "layer(default) supports(display: flex) and layer(base)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-and-supports.css", - "", - "layer(default) supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-and-supports-and-media.css", - "", - "layer(default) supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "./import/import.css", - "@import url(); +}@import url(); @import url(''); @import url(\\"\\"); @import ''; @@ -3823,7 +3064,7 @@ Array [ } .foo { -@import 'path.css'; + @import 'path.css'; } .background { @@ -3849,13 +3090,7 @@ Array [ @import url('!!../../helpers/string-loader.js?esModule=false!'); /* Prefer relative */ - -/* TODO fix comments */ -/* TODO check source maps generation */ -", - "", - ], -] +" `; exports[`"import" option should work with a value equal to "true": warnings 1`] = ` @@ -3992,12 +3227,21 @@ import ___CSS_LOADER_AT_RULE_IMPORT_18___ from \\"-!../../../src/index.js??ruleS import ___CSS_LOADER_AT_RULE_IMPORT_19___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./my.scss\\"; import ___CSS_LOADER_AT_RULE_IMPORT_20___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./package/first.css\\"; import ___CSS_LOADER_AT_RULE_IMPORT_21___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./node_modules/package/second.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_22___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_23___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_25___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_26___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_27___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_22___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_23___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_24___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_25___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_26___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_27___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-deep-with-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_28___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_29___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-import-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_30___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-with-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_31___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-unnamed.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_32___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_33___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-multiple-unnamed-layer.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_34___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_35___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./import-with-layer-and-supports-and-media.css\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_36___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./deep-layer.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./img.png\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); @@ -4045,364 +3289,176 @@ ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_10___); ___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);\\"]); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_20___); ___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_21___); -___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"supports(display: flex) screen and (min-width: 400px)\\"]); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_22___, \\"supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_23___, \\"supports(display: flex) screen and (min-width: 400px)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_24___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_25___, \\"layer(default)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_26___, \\"layer(default) supports(display: flex)\\"); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_27___, \\"layer(default) supports(display: flex) screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.push([module.id, \\"@import url(http://example.com/style.css);\\", \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"]); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_22___, \\"screen and (min-width: 400px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_23___, \\"(prefers-color-scheme: dark)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_24___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_24___, \\"\\", false, \\"((display: flex))\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_25___, \\"\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_26___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_27___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_28___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_29___, \\"\\", false, undefined, \\"framework\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_30___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_31___, \\"\\", false, undefined, \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_32___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_33___, \\"\\", false, undefined, \\"base\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_34___, \\"\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_35___, \\"screen and (min-width: 400px)\\", false, \\"display: flex\\", \\"default\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_36___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); // Module -___CSS_LOADER_EXPORT___.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(\\\\ntest.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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n@import url(test.css?foo=bar);\\\\n@import url(test.css?foo=bar#hash);\\\\n@import url(test.css?#hash);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex) screen and (orientation:landscape);\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import \\\\\\" ./test.css \\\\\\";\\\\n@import url(' ./test.css ');\\\\n@import url( ./test.css );\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer;\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default) supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\")layer(default)supports(display: flex)screen and (min-width:400px);\\\\n@import url(\\\\\\"./test.css\\\\\\")screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer( default ) supports( display : flex ) screen and ( min-width : 400px );\\\\n@import url(\\\\\\"./test.css\\\\\\") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX);\\\\n@import url(\\\\\\"./test.css\\\\\\") /* Comment */ layer(/* Comment */default/* Comment */) /* Comment */ supports(/* Comment */display/* Comment */:/* Comment */ flex/* Comment */)/* Comment */ screen/* Comment */ and/* Comment */ (/* Comment */min-width/* Comment */: /* Comment */400px/* Comment */);\\\\n@import url(test.css) /* Comment */;\\\\n@import /* Comment */ url(test.css) /* Comment */;\\\\n@import url(test.css) /* Comment */ print and (orientation:landscape);\\\\n@import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape);\\\\n\\\\n/* TODO fix comments */\\\\n/* TODO check source maps generation */\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.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@import nourl(test.css);\\\\n@import '\\\\\\\\\\\\n\\\\\\\\\\\\n\\\\\\\\\\\\n';\\\\n@import url(test.css?foo=bar);\\\\n@import url(test.css?foo=bar#hash);\\\\n@import url(test.css?#hash);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex);\\\\n@import \\\\\\"test.css\\\\\\" supports(display: flex) screen and (orientation:landscape);\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be one import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n/* Should be two import and two css modules */\\\\n\\\\n@import \\\\\\" ./test.css \\\\\\";\\\\n@import url(' ./test.css ');\\\\n@import url( ./test.css );\\\\n@import url('!!../../helpers/string-loader.js?esModule=false!');\\\\n\\\\n/* Prefer relative */\\\\n\\\\n@import url(\\\\\\"./test.css\\\\\\") supports();\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(unknown);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex !important);\\\\n@import url(\\\\\\"./test.css\\\\\\") supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer;\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(default) supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer() supports(display: flex) screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer();\\\\n@import url(\\\\\\"./test.css\\\\\\")layer(default)supports(display: flex)screen and (min-width:400px);\\\\n@import url(\\\\\\"./test.css\\\\\\")screen and (min-width: 400px);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer( default ) supports( display : flex ) screen and ( min-width : 400px );\\\\n@import url(\\\\\\"./test.css\\\\\\") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX);\\\\n@import url(\\\\\\"./test.css\\\\\\") /* Comment */ layer(/* Comment */default/* Comment */) /* Comment */ supports(/* Comment */display/* Comment */:/* Comment */ flex/* Comment */)/* Comment */ screen/* Comment */ and/* Comment */ (/* Comment */min-width/* Comment */: /* Comment */400px/* Comment */);\\\\n@import url(test.css) /* Comment */;\\\\n@import /* Comment */ url(test.css) /* Comment */;\\\\n@import url(test.css) /* Comment */ print and (orientation:landscape);\\\\n@import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape);\\\\n@import url('./test.css') supports(display: grid);\\\\n@import url(\\\\\\"./test.css\\\\\\") layer(framework);\\\\n\\\\n@import url(\\\\\\"./test.css\\\\\\") unknown(default) unknown(display: flex) unknown;\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " `; exports[`"import" option should work with import.filter: result 1`] = ` -Array [ - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-nested-media.css", - "a { +"@media screen and (orientation:landscape) {@media (min-width: 100px) {a { b: b; } -", - "screen and (orientation:landscape) and (min-width: 100px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-media.css", - ".test { +}}@media screen and (orientation:landscape) {.test { c: c; } -", - "screen and (orientation:landscape)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/test-other.css", - ".test { +}@media (min-width: 100px) {.test { d: d; } -", - "(min-width: 100px)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css?#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css?foo=bar#hash);", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/other-style.css);", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/other-style.css);", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(//example.com/style.css);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/query.css?foo=1&bar=1", - ".query { +}@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);@media screen and (orientation:landscape) {@import url(http://example.com/other-style.css);}@media screen and (orientation:landscape) {@import url(http://example.com/other-style.css);}@import url(//example.com/style.css);.query { e: e; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/other-query.css?foo=1&bar=1#hash", - ".other-query { +.other-query { f: f; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/other-query.css?foo=1&bar=1#hash", - ".other-query { +@media screen and (orientation:landscape) {.other-query { f: f; } -", - "screen and (orientation:landscape)", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Roboto);", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC);", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/relative.css", - ".relative { +}@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);.relative { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/top-relative.css", - ".top-relative { +.top-relative { color: black; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/tilde.css", - ".tilde { +.tilde { color: yellow; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/alias.css", - ".alias { +.alias { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/url.css", - ".background-imported { +.background-imported { background: url(replaced_file_protocol_/webpack/public/path/img.png); } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/te'st.css", - ".strange { +.strange { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!../helpers/string-loader.js?esModule=false!./import/node_modules/package/tilde.css", - "a { color: red };", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css", - ".my-box { +a { color: red };.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#hash", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#hash", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?bar=foo", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#one", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=bar#two", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=1&bar=2", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/something.css?foo=2&bar=1", - ".my-box { +.my-box { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/my.scss", - "a { +a { color: red; -}", - "", - ], - Array [ - "./import/import.css", - "@import url(https://fonts.googleapis.com/css?family=Roboto);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!../helpers/string-loader.js?esModule=false!./import/node_modules/package/tilde.css", - "a { color: red };", - "", - ], - Array [ - "./import/import.css", - "@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/package/first.css", - ".first { +}@import url(https://fonts.googleapis.com/css?family=Roboto);a { color: red };@import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);.first { color: red; } -", - "", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/node_modules/package/second.css", - ".second { +.second { color: red; } -", - "", - ], - Array [ - "./import/import.css", - "@import url(http://example.com/style.css);", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-supports.css", - "@import url('./test.css') supports(display: grid);", - "supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-supports-and-media.css", - "@import url('./test.css') supports(display: grid) handheld and (max-width: 400px);", - "supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer.css", - "@import url('./test.css') layer(base) supports(display: grid);", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-unnamed.css", - "@import url('./test.css') layer;", - "layer(default)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-and-supports.css", - "@import url('./test.css') layer(base);", - "layer(default) supports(display: flex)", - ], - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./import/import-with-layer-and-supports-and-media.css", - "", - "layer(default) supports(display: flex) screen and (min-width: 400px)", - ], - Array [ - "./import/import.css", - "@import url(test.css); +@supports (display: flex) {@media screen and (min-width: 400px) {@import url(http://example.com/style.css);}}@media screen and (min-width: 400px) {@import url('./test.css') screen and (max-width: 1200px); +}@media (prefers-color-scheme: dark) {@media screen and (min-width: 400px) {@import url('./test.css') screen and (max-width: 1200px); +}}@media (prefers-color-scheme: dark) {}@supports (display: flex) {@import url('./test.css') supports(display: grid);}@supports (((display: flex))) {@import url('./test.css') supports(display: grid);}@supports (display: flex) {@supports (display: block) {@import url('./test.css') supports(display: grid);}}@supports (display: flex) {}@supports (display: flex) {@media screen and (min-width: 400px) {@import url('./test.css') supports(display: grid) screen and (max-width: 1200px);}}@supports (display: flex) {@media screen and (min-width: 400px) {@supports (display: flex) {@media screen and (min-width: 400px) {@import url('./test.css') supports(display: grid) screen and (max-width: 1200px);}}}}@supports (display: flex) {@media screen and (min-width: 400px) {}}@layer framework {@import url('./test.css') layer(base); + +@layer base { + .foo { + color: red; + } +} +}@layer framework {@layer form {@import url('./test.css') layer(base); + +@layer base { + .foo { + color: red; + } +} +}}@layer framework {@layer form { + .bar { + color: red; + } +} +}@layer default {@layer base {.relative { + color: red; +} +}}@layer default {@import url('./test.css') layer(base); + +@layer base { + .foo { + color: red; + } +} +}@layer default {@import url('./test.css') layer;}@layer base {@import url(\\"./test.css\\") layer; + +.foo { + color: red; +} +}@layer base {@layer {.relative { + color: red; +} +}}@layer base {@import url(\\"./test.css\\") layer; + +.foo { + color: red; +} +}@supports (display: flex) {@layer default {@import url('./test.css') layer(base);}}@supports (display: flex) {@media screen and (min-width: 400px) {@layer default {@import url(\\"./test.css\\") layer(base) supports(display: grid) screen and (min-width: 900px);}}}@layer bootstrap {@layer base {@layer {.relative { + color: red; +} +}}}@layer bootstrap {@layer base {/* unnamed wrapper layers around each sub-file */ +@import url(\\"./test.css\\") layer; +}}@layer bootstrap {/* the internal names are hidden from access, subsumed in \\"base\\" */}/* Adds additional styles to the bootstrap layer: */ +@layer bootstrap { + .test { + color: red; + } +}@import url(test.css); @import url('test.css'); @import url(\\"test.css\\"); @IMPORT url(test.css); @@ -4411,7 +3467,7 @@ Array [ @import url( test.css); @import url( test.css ); @import url( -test.css + test.css ); @import url(); @import url(''); @@ -4441,7 +3497,7 @@ test.css } .foo { -@import 'path.css'; + @import 'path.css'; } .background { @@ -4509,11 +3565,17 @@ st.css'); /* Prefer relative */ +@import url(\\"./test.css\\") supports(); +@import url(\\"./test.css\\") supports(unknown); @import url(\\"./test.css\\") supports(display: flex); +@import url(\\"./test.css\\") supports(display: flex !important); @import url(\\"./test.css\\") supports(display: flex) screen and (min-width: 400px); @import url(\\"./test.css\\") layer; @import url(\\"./test.css\\") layer(default); @import url(\\"./test.css\\") layer(default) supports(display: flex) screen and (min-width: 400px); +@import url(\\"./test.css\\") layer supports(display: flex) screen and (min-width: 400px); +@import url(\\"./test.css\\") layer() supports(display: flex) screen and (min-width: 400px); +@import url(\\"./test.css\\") layer(); @import url(\\"./test.css\\")layer(default)supports(display: flex)screen and (min-width:400px); @import url(\\"./test.css\\")screen and (min-width: 400px); @import url(\\"./test.css\\") layer( default ) supports( display : flex ) screen and ( min-width : 400px ); @@ -4523,13 +3585,11 @@ st.css'); @import /* Comment */ url(test.css) /* Comment */; @import url(test.css) /* Comment */ print and (orientation:landscape); @import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape); +@import url('./test.css') supports(display: grid); +@import url(\\"./test.css\\") layer(framework); -/* TODO fix comments */ -/* TODO check source maps generation */ -", - "", - ], -] +@import url(\\"./test.css\\") unknown(default) unknown(display: flex) unknown; +" `; exports[`"import" option should work with import.filter: warnings 1`] = ` diff --git a/test/__snapshots__/sourceMap-option.test.js.snap b/test/__snapshots__/sourceMap-option.test.js.snap index 914a454f..5f5d4191 100644 --- a/test/__snapshots__/sourceMap-option.test.js.snap +++ b/test/__snapshots__/sourceMap-option.test.js.snap @@ -182,7 +182,7 @@ exports[`"sourceMap" option true should generate source maps #2: errors 1`] = `A exports[`"sourceMap" option true should generate source maps #2: module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); // Module @@ -226,7 +226,7 @@ exports[`"sourceMap" option true should generate source maps and do not change " exports[`"sourceMap" option true should generate source maps and do not change "[contenthash]" on different platform: module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].rules[0]!./nested/nested.css\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); @@ -395,7 +395,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader does not generate source maps: module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./nested/nested.css\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); @@ -466,7 +466,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader generates different source in source maps: module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./nested/nested.css\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); @@ -537,7 +537,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader generates source maps ("less-loader"): module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); // Module @@ -586,7 +586,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader generates source maps ("postcss-loader"): module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./nested/nested.postcss.css\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); @@ -727,7 +727,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader generates source maps ("sass-loader"): module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); // Module @@ -775,7 +775,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader generates source maps ("stylus-loader"): module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); // Module @@ -825,7 +825,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader generates source maps with "sourceRoot": module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./nested/nested.css\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); @@ -896,7 +896,7 @@ exports[`"sourceMap" option true should generate source maps when previous loade exports[`"sourceMap" option true should generate source maps when previous loader generates source maps without "sourceRoot": module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./nested/nested.css\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); @@ -967,7 +967,7 @@ exports[`"sourceMap" option true should generate source maps: errors 1`] = `Arra exports[`"sourceMap" option true should generate source maps: module 1`] = ` "// Imports -import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_SOURCEMAP_IMPORT___ from \\"../../../src/runtime/sourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../../src/runtime/api.js\\"; import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../src/index.js??ruleSet[1].rules[0].use[0]!./nested/nested.css\\"; var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_SOURCEMAP_IMPORT___); diff --git a/test/fixtures/import/deep-import-with-layer.css b/test/fixtures/import/deep-import-with-layer.css new file mode 100644 index 00000000..b7f5bda3 --- /dev/null +++ b/test/fixtures/import/deep-import-with-layer.css @@ -0,0 +1,7 @@ +@import url("./import-with-layer.css") layer(form); + +@layer form { + .bar { + color: red; + } +} diff --git a/test/fixtures/import/deep-import-with-media.css b/test/fixtures/import/deep-import-with-media.css new file mode 100644 index 00000000..befb5cf6 --- /dev/null +++ b/test/fixtures/import/deep-import-with-media.css @@ -0,0 +1 @@ +@import url("./import-with-media.css") screen and (min-width: 400px); \ No newline at end of file diff --git a/test/fixtures/import/deep-import-with-supports.css b/test/fixtures/import/deep-import-with-supports.css new file mode 100644 index 00000000..6264f973 --- /dev/null +++ b/test/fixtures/import/deep-import-with-supports.css @@ -0,0 +1 @@ +@import url("./import-with-supports.css") supports(display: block); \ No newline at end of file diff --git a/test/fixtures/import/deep-layer-base.css b/test/fixtures/import/deep-layer-base.css new file mode 100644 index 00000000..550ec2a5 --- /dev/null +++ b/test/fixtures/import/deep-layer-base.css @@ -0,0 +1,3 @@ +/* unnamed wrapper layers around each sub-file */ +@import url("./relative.css") layer; +@import url("./test.css") layer; diff --git a/test/fixtures/import/deep-layer-first-level.css b/test/fixtures/import/deep-layer-first-level.css new file mode 100644 index 00000000..90a7710c --- /dev/null +++ b/test/fixtures/import/deep-layer-first-level.css @@ -0,0 +1,2 @@ +/* the internal names are hidden from access, subsumed in "base" */ +@import url("./deep-layer-base.css") layer(base); \ No newline at end of file diff --git a/test/fixtures/import/deep-layer.css b/test/fixtures/import/deep-layer.css new file mode 100644 index 00000000..2fe422a7 --- /dev/null +++ b/test/fixtures/import/deep-layer.css @@ -0,0 +1,8 @@ +@import url(./deep-layer-first-level.css) layer(bootstrap); + +/* Adds additional styles to the bootstrap layer: */ +@layer bootstrap { + .test { + color: red; + } +} \ No newline at end of file diff --git a/test/fixtures/import/import-deep-with-supports-and-media.css b/test/fixtures/import/import-deep-with-supports-and-media.css new file mode 100644 index 00000000..661f7a55 --- /dev/null +++ b/test/fixtures/import/import-deep-with-supports-and-media.css @@ -0,0 +1 @@ +@import url("./import-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px); \ No newline at end of file diff --git a/test/fixtures/import/import-multiple-unnamed-layer.css b/test/fixtures/import/import-multiple-unnamed-layer.css new file mode 100644 index 00000000..d701600b --- /dev/null +++ b/test/fixtures/import/import-multiple-unnamed-layer.css @@ -0,0 +1,6 @@ +@import url("./test.css") layer; +@import url("./relative.css") layer; + +.foo { + color: red; +} diff --git a/test/fixtures/import/import-multiple-with-layer.css b/test/fixtures/import/import-multiple-with-layer.css new file mode 100644 index 00000000..cc01fd45 --- /dev/null +++ b/test/fixtures/import/import-multiple-with-layer.css @@ -0,0 +1,8 @@ +@import url('./test.css') layer(base); +@import url('./relative.css') layer(base); + +@layer base { + .foo { + color: red; + } +} diff --git a/test/fixtures/import/import-unnamed-layer.css b/test/fixtures/import/import-unnamed-layer.css new file mode 100644 index 00000000..c3fbb53b --- /dev/null +++ b/test/fixtures/import/import-unnamed-layer.css @@ -0,0 +1,5 @@ +@import url("./test.css") layer; + +.foo { + color: red; +} diff --git a/test/fixtures/import/import-with-layer-and-supports-and-media.css b/test/fixtures/import/import-with-layer-and-supports-and-media.css index e039be65..6b946d23 100644 --- a/test/fixtures/import/import-with-layer-and-supports-and-media.css +++ b/test/fixtures/import/import-with-layer-and-supports-and-media.css @@ -1 +1 @@ -@import url("./import-with-layer-and-supports-and-media.css") layer(base) supports(display: grid) screen and (min-width: 900px); \ No newline at end of file +@import url("./test.css") layer(base) supports(display: grid) screen and (min-width: 900px); \ No newline at end of file diff --git a/test/fixtures/import/import-with-layer.css b/test/fixtures/import/import-with-layer.css index 1fbaaea2..218aa9c3 100644 --- a/test/fixtures/import/import-with-layer.css +++ b/test/fixtures/import/import-with-layer.css @@ -1 +1,7 @@ -@import url('./test.css') layer(base) supports(display: grid); \ No newline at end of file +@import url('./test.css') layer(base); + +@layer base { + .foo { + color: red; + } +} diff --git a/test/fixtures/import/import-with-media.css b/test/fixtures/import/import-with-media.css new file mode 100644 index 00000000..c0139dc3 --- /dev/null +++ b/test/fixtures/import/import-with-media.css @@ -0,0 +1 @@ +@import url('./test.css') screen and (max-width: 1200px); diff --git a/test/fixtures/import/import-with-supports-and-media.css b/test/fixtures/import/import-with-supports-and-media.css index d748edbe..5829b0b3 100644 --- a/test/fixtures/import/import-with-supports-and-media.css +++ b/test/fixtures/import/import-with-supports-and-media.css @@ -1 +1 @@ -@import url('./test.css') supports(display: grid) handheld and (max-width: 400px); \ No newline at end of file +@import url('./test.css') supports(display: grid) screen and (max-width: 1200px); \ No newline at end of file diff --git a/test/fixtures/import/import.css b/test/fixtures/import/import.css index 6083012e..0bac8222 100644 --- a/test/fixtures/import/import.css +++ b/test/fixtures/import/import.css @@ -7,7 +7,7 @@ @import url( test.css); @import url( test.css ); @import url( -test.css + test.css ); @import url(); @import url(''); @@ -53,7 +53,7 @@ test.css } .foo { -@import 'path.css'; + @import 'path.css'; } @import url('./relative.css'); @@ -159,11 +159,17 @@ st.css'); @import url(package/first.css); @import url(package/second.css); +@import url("./test.css") supports(); +@import url("./test.css") supports(unknown); @import url("./test.css") supports(display: flex); +@import url("./test.css") supports(display: flex !important); @import url("./test.css") supports(display: flex) screen and (min-width: 400px); @import url("./test.css") layer; @import url("./test.css") layer(default); @import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer() supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer(); @import url("http://example.com/style.css") supports(display: flex) screen and (min-width: 400px); @import url("./test.css")layer(default)supports(display: flex)screen and (min-width:400px); @import url("./test.css")screen and (min-width: 400px); @@ -175,12 +181,23 @@ st.css'); @import url(test.css) /* Comment */ print and (orientation:landscape); @import /* Comment */ url(test.css) /* Comment */ print and (orientation:landscape); +@import url("./import-with-media.css") screen and (min-width: 400px); +@import url("./deep-import-with-media.css") (prefers-color-scheme: dark); @import url("./import-with-supports.css") supports(display: flex); +@import url("./import-with-supports.css") supports(((display: flex))); +@import url("./deep-import-with-supports.css") supports(display: flex); +@import url('./test.css') supports(display: grid); @import url("./import-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px); -@import url("./import-with-layer.css") layer(default); +@import url("./import-deep-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px); +@import url("./test.css") layer(framework); +@import url("./import-with-layer.css") layer(framework); +@import url("./deep-import-with-layer.css") layer(framework); +@import url("./import-multiple-with-layer.css") layer(default); @import url("./import-with-layer-unnamed.css") layer(default); +@import url("./import-unnamed-layer.css") layer(base); +@import url("./import-multiple-unnamed-layer.css") layer(base); @import url("./import-with-layer-and-supports.css") layer(default) supports(display: flex); @import url("./import-with-layer-and-supports-and-media.css") layer(default) supports(display: flex) screen and (min-width: 400px); +@import url("./deep-layer.css"); -/* TODO fix comments */ -/* TODO check source maps generation */ +@import url("./test.css") unknown(default) unknown(display: flex) unknown; diff --git a/test/fixtures/import/import.js b/test/fixtures/import/import.js index 1d033ab2..0b5140a2 100644 --- a/test/fixtures/import/import.js +++ b/test/fixtures/import/import.js @@ -1,5 +1,5 @@ import css from './import.css'; -__export__ = css; +__export__ = css.toString(); export default css; diff --git a/test/import-option.test.js b/test/import-option.test.js index 69f82690..d48076c3 100644 --- a/test/import-option.test.js +++ b/test/import-option.test.js @@ -86,13 +86,18 @@ describe('"import" option', () => { it("should work with import.filter", async () => { const compiler = getCompiler("./import/import.js", { import: { - filter: (url, media, resourcePath) => { + filter: (url, media, resourcePath, supports, layer) => { expect(url).toBeDefined(); if (url === "test-nested-media.css") { expect(media).toBeDefined(); } + if (url === "./import-with-layer-and-supports-and-media.css") { + expect(supports).toBeDefined(); + expect(layer).toBeDefined(); + } + expect(resourcePath).toBeDefined(); // Don't handle `test.css` diff --git a/test/runtime/__snapshots__/api.test.js.snap b/test/runtime/__snapshots__/api.test.js.snap index 03a55291..ac100b91 100644 --- a/test/runtime/__snapshots__/api.test.js.snap +++ b/test/runtime/__snapshots__/api.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -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 and (orientation:landscape) {body { a: 1; }}@media (orientation:landscape) {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 {@media (orientation:landscape) {body { a: 1; }}}@media (orientation:landscape) {body { a: 1; }}"`; exports[`api should import modules when module string 1`] = `".button { b: 2; }"`; @@ -20,7 +20,11 @@ exports[`api should toString with a source map without "sourceRoot" 1`] = ` exports[`api should toString with a source map without map 1`] = `"@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');"`; -exports[`api should toString with media query 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 with layer 1`] = `"body { b: 2; }body { c: 3; }body { b: 2; }@media print {body { b: 2; }}@media print {body { d: 4; }}@layer default {body { a: 1; }}@layer {body { e: 5; }}@layer framework {@layer default {body { a: 1; }}}@layer framework {@layer {body { e: 5; }}}@layer framework {body { f: 6; }}"`; + +exports[`api should toString with media query list 1`] = `"body { b: 2; }body { c: 3; }body { b: 2; }@media print {body { b: 2; }}@media print {body { d: 4; }}@media (min-width: 900px) {body { a: 1; }}@media screen {@media (min-width: 900px) {body { a: 1; }}}@media screen and (min-width: 900px) {body { e: 5; }}"`; + +exports[`api should toString with media query list, layer and supports 1`] = `"body { b: 2; }body { c: 3; }body { b: 2; }@media print {body { b: 2; }}@media print {body { d: 4; }}@supports (display: grid) {@media screen {@layer default {body { a: 1; }}}}@supports (display: block) {@media screen and (mix-width: 100px) {@layer framework {@supports (display: grid) {@media screen {@layer default {body { a: 1; }}}}}}}"`; exports[`api should toString with source mapping 1`] = ` "body { a: 1; } @@ -28,4 +32,6 @@ exports[`api should toString with source mapping 1`] = ` /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJmaWxlIjoidGVzdC5zY3NzIiwic291cmNlcyI6WyIuL3BhdGgvdG8vdGVzdC5zY3NzIl0sIm1hcHBpbmdzIjoiQUFBQTsiLCJzb3VyY2VSb290Ijoid2VicGFjazovLyJ9 */" `; +exports[`api should toString with supports 1`] = `"body { b: 2; }body { c: 3; }body { b: 2; }@supports (display: flex) {body { b: 2; }}@supports (display: flex) {body { d: 4; }}@supports (display: flex) {body { a: 1; }}@supports (display: block) {@supports (display: flex) {body { a: 1; }}}@supports (display: block) {@supports (display: grid) {body { e: 5; }}}@supports (display: grid) {body { e: 5; }}"`; + exports[`api should toString without source mapping if btoa not available 1`] = `"body { a: 1; }"`; diff --git a/test/runtime/api.test.js b/test/runtime/api.test.js index 861e729f..3fe4f186 100644 --- a/test/runtime/api.test.js +++ b/test/runtime/api.test.js @@ -2,7 +2,7 @@ * @jest-environment jsdom */ -/* eslint-disable func-names */ +/* eslint-disable func-names, no-undefined */ const api = require("../../src/runtime/api"); const noSourceMaps = require("../../src/runtime/noSourceMaps"); @@ -30,7 +30,7 @@ describe("api", () => { it("should toString a single module", () => { const m = api(noSourceMaps); - m.push([1, "body { a: 1; }", ""]); + m.push([1, "body { a: 1; }"]); expect(m.toString()).toMatchSnapshot(); }); @@ -38,24 +38,119 @@ describe("api", () => { it("should toString multiple modules", () => { const m = api(noSourceMaps); - m.push([2, "body { b: 2; }", ""]); - m.push([1, "body { a: 1; }", ""]); + m.push([2, "body { b: 2; }"]); + m.push([1, "body { a: 1; }"]); expect(m.toString()).toMatchSnapshot(); }); - it("should toString with media query", () => { + it("should toString with media query list", () => { const m = api(noSourceMaps); - const m1 = [1, "body { a: 1; }", "screen"]; - const m2 = [2, "body { b: 2; }", ""]; - const m3 = [3, "body { c: 3; }", ""]; - const m4 = [4, "body { d: 4; }", ""]; + const m1 = [1, "body { a: 1; }", "(min-width: 900px)"]; + const m2 = [2, "body { b: 2; }", undefined]; + const m3 = [3, "body { c: 3; }", undefined]; + const m4 = [4, "body { d: 4; }", undefined]; + const m5 = [5, "body { e: 5; }", "screen and (min-width: 900px)"]; - m.i([m2, m3], ""); - m.i([m2], ""); + m.i([m2, m3]); + m.i([m2]); m.i([m2, m4], "print"); m.push(m1); + m.i([m1], "screen"); + m.i([m5]); + + expect(m.toString()).toMatchSnapshot(); + }); + + it("should toString with supports", () => { + const m = api(noSourceMaps); + + const m1 = [1, "body { a: 1; }", undefined, undefined, "display: flex"]; + const m2 = [2, "body { b: 2; }", undefined]; + const m3 = [3, "body { c: 3; }", undefined]; + const m4 = [4, "body { d: 4; }", undefined]; + const m5 = [5, "body { e: 5; }", undefined, undefined, "display: grid"]; + + m.i([m2, m3]); + m.i([m2]); + m.i([m2, m4], undefined, false, "display: flex"); + m.push(m1); + m.i([m1, m5], undefined, false, "display: block"); + m.i([m5]); + + expect(m.toString()).toMatchSnapshot(); + }); + + it("should toString with layer", () => { + const m = api(noSourceMaps); + + const m1 = [ + 1, + "body { a: 1; }", + undefined, + undefined, + undefined, + "default", + ]; + const m2 = [2, "body { b: 2; }", undefined]; + const m3 = [3, "body { c: 3; }", undefined]; + const m4 = [4, "body { d: 4; }", undefined]; + const m5 = [5, "body { e: 5; }", undefined, undefined, undefined, ""]; + const m6 = [ + 5, + "body { f: 6; }", + undefined, + undefined, + undefined, + undefined, + ]; + + m.i([m2, m3], undefined); + m.i([m2], undefined); + m.i([m2, m4], "print"); + m.push(m1); + m.i([m5]); + m.i([m1, m5], undefined, undefined, undefined, "framework"); + m.i([m6], undefined, undefined, undefined, "framework"); + + expect(m.toString()).toMatchSnapshot(); + }); + + it("should toString with media query list, layer and supports", () => { + const m = api(noSourceMaps); + + const m1 = [ + 1, + "body { a: 1; }", + "screen", + undefined, + "display: grid", + "default", + ]; + const m2 = [2, "body { b: 2; }", undefined]; + const m3 = [3, "body { c: 3; }", undefined]; + const m4 = [4, "body { d: 4; }", undefined]; + const m5 = [ + 5, + "body { a: 1; }", + "screen", + undefined, + "display: grid", + "default", + ]; + + m.i([m2, m3], undefined); + m.i([m2], undefined); + m.i([m2, m4], "print"); + m.push(m1); + m.i( + [m5], + "screen and (mix-width: 100px)", + false, + "display: block", + "framework" + ); expect(m.toString()).toMatchSnapshot(); }); @@ -63,12 +158,12 @@ describe("api", () => { it("should import modules", () => { const m = api(noSourceMaps); const m1 = [1, "body { a: 1; }", "(orientation:landscape)"]; - const m2 = [2, "body { b: 2; }", ""]; - const m3 = [3, "body { c: 3; }", ""]; - const m4 = [4, "body { d: 4; }", ""]; + const m2 = [2, "body { b: 2; }", undefined]; + const m3 = [3, "body { c: 3; }", undefined]; + const m4 = [4, "body { d: 4; }", undefined]; - m.i([m2, m3], ""); - m.i([m2], ""); + m.i([m2, m3], undefined); + m.i([m2], undefined); m.i([m2, m4], "print"); m.i([m1], "screen"); m.push(m1); @@ -79,12 +174,12 @@ describe("api", () => { it("should import named modules", () => { const m = api(noSourceMaps); const m1 = ["./module1", "body { a: 1; }", "screen"]; - const m2 = ["./module2", "body { b: 2; }", ""]; - const m3 = ["./module3", "body { c: 3; }", ""]; - const m4 = ["./module4", "body { d: 4; }", ""]; + const m2 = ["./module2", "body { b: 2; }", undefined]; + const m3 = ["./module3", "body { c: 3; }", undefined]; + const m4 = ["./module4", "body { d: 4; }", undefined]; - m.i([m2, m3], ""); - m.i([m2], ""); + m.i([m2, m3], undefined); + m.i([m2], undefined); m.i([m2, m4], "print"); m.push(m1); @@ -97,7 +192,7 @@ describe("api", () => { m.push([ 1, "body { a: 1; }", - "", + undefined, { file: "test.scss", sources: ["./path/to/test.scss"], @@ -134,7 +229,7 @@ describe("api", () => { m.push([ 1, "body { a: 1; }", - "", + undefined, { file: "test.scss", sources: ["./path/to/test.scss"], @@ -184,4 +279,3 @@ describe("api", () => { expect(m.toString()).toMatchSnapshot(); }); }); -/* eslint-enable func-names */ diff --git a/test/sourceMap-option.test.js b/test/sourceMap-option.test.js index 75d71408..c74f5fa3 100644 --- a/test/sourceMap-option.test.js +++ b/test/sourceMap-option.test.js @@ -498,7 +498,7 @@ describe('"sourceMap" option', () => { (assetName) => /\.js$/.test(assetName) ); - expect(chunkName).toBe("main.3d1970f1effd30ed73f3.bundle.js"); + expect(chunkName).toBe("main.37fd3b99e870aa818226.bundle.js"); expect( getModuleSource("fixtures/source-map/basic.css", stats) ).toMatchSnapshot("module");