From 6eb56618185e974abf339c952c263cc7b8a9a066 Mon Sep 17 00:00:00 2001 From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com> Date: Sun, 28 May 2023 01:33:11 +0300 Subject: [PATCH] feat: use template literal when it possible to prevent `Maximum call stack size exceeded` (#1525) --- .cspell.json | 3 +- .gitignore | 1 + src/index.js | 29 +- src/utils.js | 114 +++- test/__snapshots__/exportType.test.js.snap | 105 ++-- test/__snapshots__/loader.test.js.snap | 500 +++++++++++++++--- .../__snapshots__/modules-option.test.js.snap | 473 +++++++++++++++++ test/__snapshots__/url-option.test.js.snap | 4 + test/fixtures/basic.css | 15 +- test/fixtures/url/many-urls.js | 5 + test/loader.test.js | 33 +- test/modules-option.test.js | 100 ++++ test/url-option.test.js | 38 ++ 13 files changed, 1286 insertions(+), 134 deletions(-) create mode 100644 test/fixtures/url/many-urls.js diff --git a/.cspell.json b/.cspell.json index 090ac11f..9d6eabcd 100644 --- a/.cspell.json +++ b/.cspell.json @@ -36,7 +36,8 @@ "Brotli", "Contex", "vspace", - "commitlint" + "commitlint", + "eslintcache" ], "ignorePaths": [ diff --git a/.gitignore b/.gitignore index 1375a222..13b77490 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ npm-debug.log* /test/fixtures/modules/composes/composes-absolute.css /test/fixtures/import/import-file-protocol.css /test/fixtures/url/url-file-protocol.css +/test/fixtures/url/many-urls.css .DS_Store Thumbs.db diff --git a/src/index.js b/src/index.js index 1e0bddf0..9d4ca847 100644 --- a/src/index.js +++ b/src/index.js @@ -227,12 +227,36 @@ export default async function loader(content, map, meta) { } } + let isTemplateLiteralSupported = false; + + if ( + // eslint-disable-next-line no-underscore-dangle + this._compilation && + // eslint-disable-next-line no-underscore-dangle + this._compilation.options && + // eslint-disable-next-line no-underscore-dangle + this._compilation.options.output && + // eslint-disable-next-line no-underscore-dangle + this._compilation.options.output.environment && + // eslint-disable-next-line no-underscore-dangle + this._compilation.options.output.environment.templateLiteral + ) { + isTemplateLiteralSupported = true; + } + const importCode = getImportCode(imports, options); let moduleCode; try { - moduleCode = getModuleCode(result, api, replacements, options, this); + moduleCode = getModuleCode( + result, + api, + replacements, + options, + isTemplateLiteralSupported, + this + ); } catch (error) { callback(error); @@ -243,7 +267,8 @@ export default async function loader(content, map, meta) { exports, replacements, needToUseIcssPlugin, - options + options, + isTemplateLiteralSupported ); callback(null, `${importCode}${moduleCode}${exportCode}`); diff --git a/src/utils.js b/src/utils.js index 02d3ef21..678304ac 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1018,7 +1018,14 @@ function printParams(media, dedupe, supports, layer) { return result; } -function getModuleCode(result, api, replacements, options, loaderContext) { +function getModuleCode( + result, + api, + replacements, + options, + isTemplateLiteralSupported, + loaderContext +) { if (options.modules.exportOnlyLocals === true) { return ""; } @@ -1034,7 +1041,9 @@ function getModuleCode(result, api, replacements, options, loaderContext) { )}`; } - let code = JSON.stringify(result.css); + let code = isTemplateLiteralSupported + ? convertToTemplateLiteral(result.css) + : JSON.stringify(result.css); let beforeCode = `var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(${ options.sourceMap @@ -1067,12 +1076,21 @@ function getModuleCode(result, api, replacements, options, loaderContext) { if (localName) { code = code.replace(new RegExp(replacementName, "g"), () => options.modules.namedExport - ? `" + ${importName}_NAMED___[${JSON.stringify( - getValidLocalName( - localName, - options.modules.exportLocalsConvention - ) - )}] + "` + ? isTemplateLiteralSupported + ? `\${ ${importName}_NAMED___[${JSON.stringify( + getValidLocalName( + localName, + options.modules.exportLocalsConvention + ) + )}] }` + : `" + ${importName}_NAMED___[${JSON.stringify( + getValidLocalName( + localName, + options.modules.exportLocalsConvention + ) + )}] + "` + : isTemplateLiteralSupported + ? `\${${importName}.locals[${JSON.stringify(localName)}]}` : `" + ${importName}.locals[${JSON.stringify(localName)}] + "` ); } else { @@ -1084,9 +1102,10 @@ function getModuleCode(result, api, replacements, options, loaderContext) { getUrlOptions.length > 0 ? `, { ${getUrlOptions.join(", ")} }` : ""; beforeCode += `var ${replacementName} = ___CSS_LOADER_GET_URL_IMPORT___(${importName}${preparedOptions});\n`; - code = code.replace( - new RegExp(replacementName, "g"), - () => `" + ${replacementName} + "` + code = code.replace(new RegExp(replacementName, "g"), () => + isTemplateLiteralSupported + ? `\${${replacementName}}` + : `" + ${replacementName} + "` ); } } @@ -1101,13 +1120,38 @@ function getModuleCode(result, api, replacements, options, loaderContext) { return `${beforeCode}// Module\n___CSS_LOADER_EXPORT___.push([module.id, ${code}, ""${sourceMapValue}]);\n`; } +const SLASH = "\\".charCodeAt(0); +const BACKTICK = "`".charCodeAt(0); +const DOLLAR = "$".charCodeAt(0); + +function convertToTemplateLiteral(str) { + let escapedString = ""; + + for (let i = 0; i < str.length; i++) { + const code = str.charCodeAt(i); + + escapedString += + code === SLASH || code === BACKTICK || code === DOLLAR + ? `\\${str[i]}` + : str[i]; + } + + return `\`${escapedString}\``; +} + function dashesCamelCase(str) { return str.replace(/-+(\w)/g, (match, firstLetter) => firstLetter.toUpperCase() ); } -function getExportCode(exports, replacements, icssPluginUsed, options) { +function getExportCode( + exports, + replacements, + icssPluginUsed, + options, + isTemplateLiteralSupported +) { let code = "// Exports\n"; if (icssPluginUsed) { @@ -1120,13 +1164,21 @@ function getExportCode(exports, replacements, icssPluginUsed, options) { for (const name of normalizedNames) { if (options.modules.namedExport) { - localsCode += `export var ${name} = ${JSON.stringify(value)};\n`; + localsCode += `export var ${name} = ${ + isTemplateLiteralSupported + ? convertToTemplateLiteral(value) + : JSON.stringify(value) + };\n`; } else { if (localsCode) { localsCode += `,\n`; } - localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`; + localsCode += `\t${JSON.stringify(name)}: ${ + isTemplateLiteralSupported + ? convertToTemplateLiteral(value) + : JSON.stringify(value) + }`; } } }; @@ -1148,23 +1200,35 @@ function getExportCode(exports, replacements, icssPluginUsed, options) { new RegExp(replacementName, "g"), () => { if (options.modules.namedExport) { - return `" + ${importName}_NAMED___[${JSON.stringify( - getValidLocalName( - localName, - options.modules.exportLocalsConvention - ) - )}] + "`; + return isTemplateLiteralSupported + ? `\${${importName}_NAMED___[${JSON.stringify( + getValidLocalName( + localName, + options.modules.exportLocalsConvention + ) + )}]}` + : `" + ${importName}_NAMED___[${JSON.stringify( + getValidLocalName( + localName, + options.modules.exportLocalsConvention + ) + )}] + "`; } else if (options.modules.exportOnlyLocals) { - return `" + ${importName}[${JSON.stringify(localName)}] + "`; + return isTemplateLiteralSupported + ? `\${${importName}[${JSON.stringify(localName)}]}` + : `" + ${importName}[${JSON.stringify(localName)}] + "`; } - return `" + ${importName}.locals[${JSON.stringify(localName)}] + "`; + return isTemplateLiteralSupported + ? `\${${importName}.locals[${JSON.stringify(localName)}]}` + : `" + ${importName}.locals[${JSON.stringify(localName)}] + "`; } ); } else { - localsCode = localsCode.replace( - new RegExp(replacementName, "g"), - () => `" + ${replacementName} + "` + localsCode = localsCode.replace(new RegExp(replacementName, "g"), () => + isTemplateLiteralSupported + ? `\${${replacementName}}` + : `" + ${replacementName} + "` ); } } diff --git a/test/__snapshots__/exportType.test.js.snap b/test/__snapshots__/exportType.test.js.snap index 60b6608b..203c4cb9 100644 --- a/test/__snapshots__/exportType.test.js.snap +++ b/test/__snapshots__/exportType.test.js.snap @@ -33,16 +33,14 @@ exports[`'exportType' option should work and export 'array' by default: module 1 "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.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]!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -50,18 +48,11 @@ export default ___CSS_LOADER_EXPORT___; exports[`'exportType' option should work and export 'array' by default: result 1`] = ` Array [ - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css", - ".foo { - color: red; -} -", - "", - ], Array [ "./basic.css", "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -148,6 +139,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -209,16 +214,14 @@ exports[`'exportType' option should work with 'array' value: module 1`] = ` "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.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]!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -226,18 +229,11 @@ export default ___CSS_LOADER_EXPORT___; exports[`'exportType' option should work with 'array' value: result 1`] = ` Array [ - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css", - ".foo { - color: red; -} -", - "", - ], Array [ "./basic.css", "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -324,6 +320,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -404,16 +414,14 @@ exports[`'exportType' option should work with 'css-style-sheet' and 'array' valu "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../src/index.js!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -560,18 +568,11 @@ a[href=\\"\\" i] { ", }, Array [ - Array [ - "../../src/index.js!./imported.css", - ".foo { - color: red; -} -", - "", - ], Array [ "./basic.css?foo=1", "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -658,6 +659,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -1470,12 +1485,7 @@ a[href=\\"\\" i] { exports[`'exportType' option should work with 'css-style-sheet' value and generate source maps: warnings 1`] = `Array []`; -exports[`'exportType' option should work with 'css-style-sheet' value and keep import and emit errors on \`@import\` at-rules: errors 1`] = ` -Array [ - "ModuleError: Module Error (from \`replaced original path\`): -/test/fixtures/basic.css:3:1: '@import' rules are not allowed here and will not be processed", -] -`; +exports[`'exportType' option should work with 'css-style-sheet' value and keep import and emit errors on \`@import\` at-rules: errors 1`] = `Array []`; exports[`'exportType' option should work with 'css-style-sheet' value and keep import and emit errors on \`@import\` at-rules: module 1`] = ` "// Imports @@ -1488,7 +1498,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_S var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n@import 'imported.css';\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports var ___CSS_LOADER_STYLE_SHEET___ = new CSSStyleSheet(); ___CSS_LOADER_STYLE_SHEET___.replaceSync(___CSS_LOADER_EXPORT___.toString()); @@ -1500,7 +1510,6 @@ exports[`'exportType' option should work with 'css-style-sheet' value and keep i CSSStyleSheet { "text": "@charset \\"UTF-8\\"; -@import 'imported.css'; /* Comment */ @@ -1588,6 +1597,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 53db7461..bbfcebab 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -236,7 +236,6 @@ exports[`loader should work and nothing to do with built-in CSS support: errors exports[`loader should work and nothing to do with built-in CSS support: module 1`] = ` "@charset \\"UTF-8\\"; -@import 'imported.css'; /* Comment */ @@ -324,6 +323,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -377,7 +390,6 @@ a[href=\\"\\" i] { exports[`loader should work and nothing to do with built-in CSS support: module 2`] = ` "@charset \\"UTF-8\\"; -@import 'imported.css'; /* Comment */ @@ -465,6 +477,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -518,8 +544,6 @@ a[href=\\"\\" i] { exports[`loader should work and nothing to do with built-in CSS support: warnings 1`] = ` Array [ "ModuleWarning: Module Warning (from \`replaced original path\`): -You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`css-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`css-loader\` in your webpack config (now css-loader does nothing).", - "ModuleWarning: Module Warning (from \`replaced original path\`): You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`css-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`css-loader\` in your webpack config (now css-loader does nothing).", ] `; @@ -527,8 +551,6 @@ You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-i exports[`loader should work and nothing to do with built-in CSS support: warnings 2`] = ` Array [ "ModuleWarning: Module Warning (from \`replaced original path\`): -You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`css-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`css-loader\` in your webpack config (now css-loader does nothing).", - "ModuleWarning: Module Warning (from \`replaced original path\`): You can't use \`experiments.css\` (\`experiments.futureDefaults\` enable built-in CSS support by default) and \`css-loader\` together, please set \`experiments.css\` to \`false\` or set \`{ type: \\"javascript/auto\\" }\` for rules with \`css-loader\` in your webpack config (now css-loader does nothing).", ] `; @@ -539,16 +561,14 @@ exports[`loader should work in 'production' mode: module 1`] = ` "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.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]!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -556,18 +576,11 @@ export default ___CSS_LOADER_EXPORT___; exports[`loader should work in 'production' mode: result 1`] = ` Array [ - Array [ - 250, - ".foo { - color: red; -} -", - "", - ], Array [ 967, "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -654,6 +667,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -715,16 +742,14 @@ exports[`loader should work with "asset" module type: module 1`] = ` "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../src/index.js!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -732,18 +757,11 @@ export default ___CSS_LOADER_EXPORT___; exports[`loader should work with "asset" module type: result 1`] = ` Array [ - Array [ - "../../src/index.js!./imported.css", - ".foo { - color: red; -} -", - "", - ], Array [ "./basic.css", "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -830,6 +848,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -914,6 +946,337 @@ Array [ exports[`loader should work with "sass-loader": warnings 1`] = `Array []`; +exports[`loader should work with \`templateLiteral\` support: errors 1`] = `Array []`; + +exports[`loader should work with \`templateLiteral\` support: module 1`] = ` +"// Imports +import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\"; +import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; +var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); +var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", 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___); +var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\"; + + +/* Comment */ + +.class { + color: red; + background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); +} + +.class-duplicate-url { + background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); +} + +:root { + --foo: 1px; + --bar: 2px; +} + +.class { a: b c d; } + +.two {} + +.u-m\\\\\\\\+ { a: b c d; } + +.class { content: \\"\\\\\\\\F10C\\" } + +@media only screen and (max-width: 600px) { + body { + background-color: lightblue; + } +} + +.class { + content: \\"\\\\\\\\2193\\"; + content: \\"\\\\\\\\2193\\\\\\\\2193\\"; + content: \\"\\\\\\\\2193 \\\\\\\\2193\\"; + content: \\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\"; + content: \\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\"; +} + +.-top {} +.\\\\\\\\-top {} + +#\\\\\\\\#test {} + +.grid { + display: flex; + flex-wrap: wrap; +} +.grid.\\\\\\\\-top { + align-items: flex-start; +} +.grid.-top { + align-items: flex-start; +} +.grid.\\\\\\\\-middle { + align-items: center; +} +.grid.\\\\\\\\-bottom { + align-items: flex-end; +} + +.u-m\\\\\\\\00002b {} + +.u-m00002b {} + +#u-m\\\\\\\\+ {} + +body { + font-family: '微软雅黑'; /* some chinese font name */ +} + +.myStyle { + content: '\\\\\\\\e901'; +} + +.myStyle { + content: '\\\\\\\\E901'; +} + +.♫ {} + +.\\\\\\\\3A \\\\\\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\":\\\\\`(\\" */ +.\\\\\\\\31 a2b3c {} /* matches elements with class=\\"1a2b3c\\" */ +#\\\\\\\\#fake-id {} /* matches the element with id=\\"#fake-id\\" */ +#-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ +#© {} /* matches the element with id=\\"©\\" */ + +\\\\\\\\.\\\\\\\\\\\\\` { + color: aliceblue; +} + +\\\\\\\\.\\\\\\\\\\\\$\\\\\\\\{foo\\\\\\\\} { + color: aliceblue; +} + +/* \\\\\` */ +/* \\\\\`\\\\\` */ +/* \\\\\`\\\\\`\\\\\` */ +/* \\\\\${} */ +/* \\\\\\\\\\\\\\\\\\\\\` */ + +:root { + --title-align: center; + --sr-only: { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + clip-path: inset(50%); + border: 0; + }; +} + +.test { + content: \\"\\\\\\\\2014\\\\\\\\A0\\"; + content: \\"\\\\\\\\2014 \\\\\\\\A0\\"; + content: \\"\\\\\\\\A0 \\\\\\\\2014\\"; + content: \\"\\\\\\\\A0\\\\\\\\2014\\"; + margin-top: 1px\\\\\\\\9; + background-color: #000\\\\\\\\9; +} + +.light.on .bulb:before{ + content: '💡'; +} + +.base64 { + background: url(\${___CSS_LOADER_URL_REPLACEMENT_1___}); +} + +a[href=''] { + color: red; +} + +a[href='' i] { + color: red; +} + +a[href=\\"\\"] { + color: blue; +} + +a[href=\\"\\" i] { + color: blue; +} +\`, \\"\\"]); +// Exports +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`loader should work with \`templateLiteral\` support: result 1`] = ` +Array [ + Array [ + "./basic.css", + "@charset \\"UTF-8\\"; + + +/* Comment */ + +.class { + color: red; + background: url(replaced_file_protocol_/webpack/public/path/img.png); +} + +.class-duplicate-url { + background: url(replaced_file_protocol_/webpack/public/path/img.png); +} + +:root { + --foo: 1px; + --bar: 2px; +} + +.class { a: b c d; } + +.two {} + +.u-m\\\\+ { a: b c d; } + +.class { content: \\"\\\\F10C\\" } + +@media only screen and (max-width: 600px) { + body { + background-color: lightblue; + } +} + +.class { + content: \\"\\\\2193\\"; + content: \\"\\\\2193\\\\2193\\"; + content: \\"\\\\2193 \\\\2193\\"; + content: \\"\\\\2193\\\\2193\\\\2193\\"; + content: \\"\\\\2193 \\\\2193 \\\\2193\\"; +} + +.-top {} +.\\\\-top {} + +#\\\\#test {} + +.grid { + display: flex; + flex-wrap: wrap; +} +.grid.\\\\-top { + align-items: flex-start; +} +.grid.-top { + align-items: flex-start; +} +.grid.\\\\-middle { + align-items: center; +} +.grid.\\\\-bottom { + align-items: flex-end; +} + +.u-m\\\\00002b {} + +.u-m00002b {} + +#u-m\\\\+ {} + +body { + font-family: '微软雅黑'; /* some chinese font name */ +} + +.myStyle { + content: '\\\\e901'; +} + +.myStyle { + content: '\\\\E901'; +} + +.♫ {} + +.\\\\3A \\\\\`\\\\( {} /* matches elements with class=\\":\`(\\" */ +.\\\\31 a2b3c {} /* matches elements with class=\\"1a2b3c\\" */ +#\\\\#fake-id {} /* matches the element with id=\\"#fake-id\\" */ +#-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ +#© {} /* matches the element with id=\\"©\\" */ + +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + +:root { + --title-align: center; + --sr-only: { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + clip-path: inset(50%); + border: 0; + }; +} + +.test { + content: \\"\\\\2014\\\\A0\\"; + content: \\"\\\\2014 \\\\A0\\"; + content: \\"\\\\A0 \\\\2014\\"; + content: \\"\\\\A0\\\\2014\\"; + margin-top: 1px\\\\9; + background-color: #000\\\\9; +} + +.light.on .bulb:before{ + content: '💡'; +} + +.base64 { + background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==); +} + +a[href=''] { + color: red; +} + +a[href='' i] { + color: red; +} + +a[href=\\"\\"] { + color: blue; +} + +a[href=\\"\\" i] { + color: blue; +} +", + "", + ], +] +`; + +exports[`loader should work with \`templateLiteral\` support: warnings 1`] = `Array []`; + exports[`loader should work with ModuleConcatenationPlugin (file-loader): errors 1`] = `Array []`; exports[`loader should work with ModuleConcatenationPlugin (file-loader): warnings 1`] = `Array []`; @@ -932,16 +1295,14 @@ exports[`loader should work with built-in CSS support: module 1`] = ` "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.js\\"; import ___CSS_LOADER_API_IMPORT___ from \\"../../src/runtime/api.js\\"; -import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../src/index.js!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -949,18 +1310,11 @@ export default ___CSS_LOADER_EXPORT___; exports[`loader should work with built-in CSS support: result 1`] = ` Array [ - Array [ - "../../src/index.js!./imported.css", - ".foo { - color: red; -} -", - "", - ], Array [ "./basic.css", "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -1047,6 +1401,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -1134,16 +1502,14 @@ exports[`loader should work with empty options: module 1`] = ` "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.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]!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -1151,18 +1517,11 @@ export default ___CSS_LOADER_EXPORT___; exports[`loader should work with empty options: result 1`] = ` Array [ - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css", - ".foo { - color: red; -} -", - "", - ], Array [ "./basic.css", "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -1249,6 +1608,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { @@ -1853,16 +2226,14 @@ exports[`loader should work: module 1`] = ` "// Imports import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../src/runtime/noSourceMaps.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]!./imported.css\\"; import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../src/runtime/getUrl.js\\"; var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"./url/img.png\\", import.meta.url); var ___CSS_LOADER_URL_IMPORT_1___ = new URL(\\"data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==\\", import.meta.url); var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); -___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___); // Module -___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); +___CSS_LOADER_EXPORT___.push([module.id, \\"@charset \\\\\\"UTF-8\\\\\\";\\\\n\\\\n\\\\n/* Comment */\\\\n\\\\n.class {\\\\n color: red;\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n.class-duplicate-url {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n:root {\\\\n --foo: 1px;\\\\n --bar: 2px;\\\\n}\\\\n\\\\n.class { a: b c d; }\\\\n\\\\n.two {}\\\\n\\\\n.u-m\\\\\\\\+ { a: b c d; }\\\\n\\\\n.class { content: \\\\\\"\\\\\\\\F10C\\\\\\" }\\\\n\\\\n@media only screen and (max-width: 600px) {\\\\n body {\\\\n background-color: lightblue;\\\\n }\\\\n}\\\\n\\\\n.class {\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\\\\\";\\\\n}\\\\n\\\\n.-top {}\\\\n.\\\\\\\\-top {}\\\\n\\\\n#\\\\\\\\#test {}\\\\n\\\\n.grid {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n}\\\\n.grid.\\\\\\\\-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.-top {\\\\n align-items: flex-start;\\\\n}\\\\n.grid.\\\\\\\\-middle {\\\\n align-items: center;\\\\n}\\\\n.grid.\\\\\\\\-bottom {\\\\n align-items: flex-end;\\\\n}\\\\n\\\\n.u-m\\\\\\\\00002b {}\\\\n\\\\n.u-m00002b {}\\\\n\\\\n#u-m\\\\\\\\+ {}\\\\n\\\\nbody {\\\\n font-family: '微软雅黑'; /* some chinese font name */\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\e901';\\\\n}\\\\n\\\\n.myStyle {\\\\n content: '\\\\\\\\E901';\\\\n}\\\\n\\\\n.♫ {}\\\\n\\\\n.\\\\\\\\3A \\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\\\\\":\`(\\\\\\" */\\\\n.\\\\\\\\31 a2b3c {} /* matches elements with class=\\\\\\"1a2b3c\\\\\\" */\\\\n#\\\\\\\\#fake-id {} /* matches the element with id=\\\\\\"#fake-id\\\\\\" */\\\\n#-a-b-c- {} /* matches the element with id=\\\\\\"-a-b-c-\\\\\\" */\\\\n#© {} /* matches the element with id=\\\\\\"©\\\\\\" */\\\\n\\\\n\\\\\\\\.\\\\\\\\\` {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n\\\\\\\\.\\\\\\\\$\\\\\\\\{foo\\\\\\\\} {\\\\n color: aliceblue;\\\\n}\\\\n\\\\n/* \` */\\\\n/* \`\` */\\\\n/* \`\`\` */\\\\n/* \${} */\\\\n/* \\\\\\\\\\\\\\\\\` */\\\\n\\\\n:root {\\\\n --title-align: center;\\\\n --sr-only: {\\\\n position: absolute;\\\\n width: 1px;\\\\n height: 1px;\\\\n padding: 0;\\\\n overflow: hidden;\\\\n clip: rect(0,0,0,0);\\\\n white-space: nowrap;\\\\n clip-path: inset(50%);\\\\n border: 0;\\\\n };\\\\n}\\\\n\\\\n.test {\\\\n content: \\\\\\"\\\\\\\\2014\\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\2014 \\\\\\\\A0\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0 \\\\\\\\2014\\\\\\";\\\\n content: \\\\\\"\\\\\\\\A0\\\\\\\\2014\\\\\\";\\\\n margin-top: 1px\\\\\\\\9;\\\\n background-color: #000\\\\\\\\9;\\\\n}\\\\n\\\\n.light.on .bulb:before{\\\\n content: '💡';\\\\n}\\\\n\\\\n.base64 {\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n}\\\\n\\\\na[href=''] {\\\\n color: red;\\\\n}\\\\n\\\\na[href='' i] {\\\\n color: red;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\"] {\\\\n color: blue;\\\\n}\\\\n\\\\na[href=\\\\\\"\\\\\\" i] {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports export default ___CSS_LOADER_EXPORT___; " @@ -1870,18 +2241,11 @@ export default ___CSS_LOADER_EXPORT___; exports[`loader should work: result 1`] = ` Array [ - Array [ - "../../src/index.js??ruleSet[1].rules[0].use[0]!./imported.css", - ".foo { - color: red; -} -", - "", - ], Array [ "./basic.css", "@charset \\"UTF-8\\"; + /* Comment */ .class { @@ -1968,6 +2332,20 @@ body { #-a-b-c- {} /* matches the element with id=\\"-a-b-c-\\" */ #© {} /* matches the element with id=\\"©\\" */ +\\\\.\\\\\` { + color: aliceblue; +} + +\\\\.\\\\$\\\\{foo\\\\} { + color: aliceblue; +} + +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ + :root { --title-align: center; --sr-only: { diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 9e17b13f..3a5d275c 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -6534,6 +6534,59 @@ body { exports[`"modules" option should work with "url" and "namedExport": warnings 1`] = `Array []`; +exports[`"modules" option should work with "url", "namedExport" and "templateLiteral" support: errors 1`] = `Array []`; + +exports[`"modules" option should work with "url", "namedExport" and "templateLiteral" support: module 1`] = ` +"// Imports +import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; +import ___CSS_LOADER_ICSS_IMPORT_0___, * as ___CSS_LOADER_ICSS_IMPORT_0____NAMED___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./shared.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___); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_0___, \\"\\", true); +var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \`a { + background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); +} + +body { + background: \${ ___CSS_LOADER_ICSS_IMPORT_0____NAMED___[\\"vUrlOther\\"] }; +} +\`, \\"\\"]); +// Exports +export var vUrl = \`url(\${___CSS_LOADER_URL_REPLACEMENT_0___})\`; +export var vUrlOther = \`\${___CSS_LOADER_ICSS_IMPORT_0____NAMED___[\\"vUrlOther\\"]}\`; +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`"modules" option should work with "url", "namedExport" and "templateLiteral" support: result 1`] = ` +Array [ + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/url/shared.css", + " +", + "", + ], + Array [ + "./modules/url/source.css", + "a { + background: url(replaced_file_protocol_/webpack/public/path/img.png); +} + +body { + background: url(replaced_file_protocol_/webpack/public/path/img.png); +} +", + "", + ], +] +`; + +exports[`"modules" option should work with "url", "namedExport" and "templateLiteral" support: warnings 1`] = `Array []`; + exports[`"modules" option should work with "url": errors 1`] = `Array []`; exports[`"modules" option should work with "url": module 1`] = ` @@ -17155,6 +17208,406 @@ Array [ exports[`"modules" option show work when the "modules" option is "icss", case "multiple-keys-values-in-export": warnings 1`] = `Array []`; +exports[`"modules" option show work with the "mode" option using the "local" value and "templateLiteral" support: errors 1`] = `Array []`; + +exports[`"modules" option show work with the "mode" option using the "local" value and "templateLiteral" support: module 1`] = ` +"// Imports +import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from \\"../../../../src/runtime/noSourceMaps.js\\"; +import ___CSS_LOADER_API_IMPORT___ from \\"../../../../src/runtime/api.js\\"; +import ___CSS_LOADER_ICSS_IMPORT_0___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./values.css\\"; +import ___CSS_LOADER_ICSS_IMPORT_1___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./something.css\\"; +import ___CSS_LOADER_ICSS_IMPORT_2___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./imported-simple.css\\"; +import ___CSS_LOADER_ICSS_IMPORT_3___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./relative.css\\"; +import ___CSS_LOADER_ICSS_IMPORT_4___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./top-relative.css\\"; +import ___CSS_LOADER_ICSS_IMPORT_5___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!../issue-861/node_modules/package/style.css\\"; +import ___CSS_LOADER_ICSS_IMPORT_6___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./alias.css\\"; +import ___CSS_LOADER_ICSS_IMPORT_7___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!sass-loader!./scss-file.scss\\"; +import ___CSS_LOADER_AT_RULE_IMPORT_0___ from \\"-!../../../../src/index.js??ruleSet[1].rules[0].use[0]!./test-other.css\\"; +import ___CSS_LOADER_GET_URL_IMPORT___ from \\"../../../../src/runtime/getUrl.js\\"; +var ___CSS_LOADER_URL_IMPORT_0___ = new URL(\\"../../url/img.png\\", import.meta.url); +var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_AT_RULE_IMPORT_0___, \\"(min-width: 100px)\\"); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_0___, \\"\\", true); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_1___, \\"\\", true); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_2___, \\"\\", true); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_3___, \\"\\", true); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_4___, \\"\\", true); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_5___, \\"\\", true); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_6___, \\"\\", true); +___CSS_LOADER_EXPORT___.i(___CSS_LOADER_ICSS_IMPORT_7___, \\"\\", true); +var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_0___); +// Module +___CSS_LOADER_EXPORT___.push([module.id, \`.ozGmfTedr1GnFJDWqNUH { + color: \${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"]}; +} + +.zchqshjqLbPAHaRvIBET { + color: blue; +} + +.WZBxXqS2GytaA3IBhhnd { + display: block; +} + +.W51zcAMuJMsNFi1CXgWr { + width: \${___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"]}; +} + +.KEl5ZxzNkpjfWorrBglC { + color: \${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"]}; +} + +.ecAEWh2vww9pNEdyj9Jn { + prop: \${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"]}; + duplicate: \${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"]}; +} + +.CBlowYk8qiAgWWzFeXRA { + color: red; +} + +.c_NHnDcX1bd_kuxgsuYi { + color: yellow; +} + +.S0Kwou8pVmsENtBP3hYm { + color: gray; +} + +.rq663Pq_zV0CjpwttvK4 { + color: gray; +} + +.fadRMHArJofp7sWEbPVR { + color: gainsboro; +} + +.sg1HlXqlWy6l6_Wm5iA7 { + color: gainsboro; +} + +.bnRUswvicYag6u0SPnvI { + color: #BF4040; +} + +.kEJRwpukB2OtmkGTknbU { + color: black; +} + +@media (min-width: 960px) { + .hY2PI5vC9ABuJY1nkWnf { + padding: 0 20px; + } +} + +.\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"]} { + color: white; +} + +@media \${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"]} { + .hY2PI5vC9ABuJY1nkWnf { + padding: 20px 20px; + } +} + +.q8mv0HutzqdsVWjl8mAz { + v-ident: validIdent; + v-pre-defined-ident: left; + v-string: 'content'; + v-string-1: ''; + v-url: url(https://www.exammple.com/images/my-background.png); + v-url-1: url('https://www.exammple.com/images/my-background.png'); + v-url-2: url(\\"https://www.exammple.com/images/my-background.png\\"); + v-integer: 100; + v-integer-1: -100; + v-integer-2: +100; + v-number: .60; + v-number-1: -456.8; + v-number-2: -3.4e-2; + v-dimension: 12px; + v-percentage: 100%; + v-hex: #fff; + v-comment: /* comment */ 10px /* comment */; + v-function: rgb(0,0,0); + v-unicode-range: U+0025-00FF; + mutliple: #fff .60 100%; +} + + +a { + content: 'content'; +} + +@supports (content: 'content') { + a { + content: 'content'; + } +} + +[class~='content'] { + color:green; +} + +.xajoqP1d3SwrjJ4WEM8g { + background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); +} + +.Ix5nEHiVOsWuWxdx0twz { + background: red; +} +\`, \\"\\"]); +// Exports +___CSS_LOADER_EXPORT___.locals = { + \\"v-def\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-def\\"]}\`, + \\"v-other\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"v-other\\"]}\`, + \\"s-white\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"s-white\\"]}\`, + \\"m-small\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___.locals[\\"m-small\\"]}\`, + \\"v-something\\": \`\${___CSS_LOADER_ICSS_IMPORT_1___.locals[\\"v-something\\"]}\`, + \\"v-foo\\": \`blue\`, + \\"v-bar\\": \`block\`, + \\"v-primary\\": \`#BF4040\`, + \\"s-black\\": \`black-selector\`, + \\"m-large\\": \`(min-width: 960px)\`, + \\"v-ident\\": \`validIdent\`, + \\"v-pre-defined-ident\\": \`left\`, + \\"v-string\\": \`'content'\`, + \\"v-string-1\\": \`''\`, + \\"v-url\\": \`url(https://www.exammple.com/images/my-background.png)\`, + \\"v-url-1\\": \`url('https://www.exammple.com/images/my-background.png')\`, + \\"v-url-2\\": \`url(\\"https://www.exammple.com/images/my-background.png\\")\`, + \\"v-integer\\": \`100\`, + \\"v-integer-1\\": \`-100\`, + \\"v-integer-2\\": \`+100\`, + \\"v-number\\": \`.60\`, + \\"v-number-1\\": \`-456.8\`, + \\"v-number-2\\": \`-3.4e-2\`, + \\"v-dimension\\": \`12px\`, + \\"v-percentage\\": \`100%\`, + \\"v-hex\\": \`#fff\`, + \\"v-comment\\": \` /* comment */\`, + \\"v-function\\": \`rgb(0,0,0)\`, + \\"v-unicode-range\\": \`U+0025-00FF\`, + \\"ghi\\": \`ozGmfTedr1GnFJDWqNUH\`, + \\"my-class\\": \`zchqshjqLbPAHaRvIBET\`, + \\"other\\": \`WZBxXqS2GytaA3IBhhnd\`, + \\"other-other\\": \`W51zcAMuJMsNFi1CXgWr\`, + \\"green\\": \`KEl5ZxzNkpjfWorrBglC\`, + \\"foo\\": \`ecAEWh2vww9pNEdyj9Jn\`, + \\"simple\\": \`CBlowYk8qiAgWWzFeXRA \${___CSS_LOADER_ICSS_IMPORT_2___.locals[\\"imported-simple\\"]}\`, + \\"relative\\": \`c_NHnDcX1bd_kuxgsuYi \${___CSS_LOADER_ICSS_IMPORT_3___.locals[\\"imported-relative\\"]}\`, + \\"top-relative\\": \`S0Kwou8pVmsENtBP3hYm \${___CSS_LOADER_ICSS_IMPORT_4___.locals[\\"imported-relative\\"]}\`, + \\"my-module\\": \`rq663Pq_zV0CjpwttvK4 \${___CSS_LOADER_ICSS_IMPORT_5___.locals[\\"imported-module\\"]}\`, + \\"alias\\": \`fadRMHArJofp7sWEbPVR \${___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"]}\`, + \\"alias-duplicate\\": \`sg1HlXqlWy6l6_Wm5iA7 \${___CSS_LOADER_ICSS_IMPORT_6___.locals[\\"imported-alias\\"]}\`, + \\"primary-selector\\": \`bnRUswvicYag6u0SPnvI\`, + \\"black-selector\\": \`kEJRwpukB2OtmkGTknbU\`, + \\"header\\": \`hY2PI5vC9ABuJY1nkWnf\`, + \\"foobarbaz\\": \`q8mv0HutzqdsVWjl8mAz\`, + \\"url\\": \`xajoqP1d3SwrjJ4WEM8g\`, + \\"main\\": \`Ix5nEHiVOsWuWxdx0twz \${___CSS_LOADER_ICSS_IMPORT_7___.locals[\\"scssClass\\"]}\` +}; +export default ___CSS_LOADER_EXPORT___; +" +`; + +exports[`"modules" option show work with the "mode" option using the "local" value and "templateLiteral" support: result 1`] = ` +Array [ + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/test-other.css", + ".s4X7wVQcTygYUV4ttKyQ { + d: d; +} +", + "(min-width: 100px)", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/values.css", + " +", + "", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/something.css", + " +", + "", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/imported-simple.css", + ".pCAAqHK9Lcplw9QM7Rj0 { + display: block; +} +", + "", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/relative.css", + ".o0pMg4suYQOIzdBIQJv1 { + display: inline; +} +", + "", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/top-relative.css", + ".l9CmW32NEl99tuNLdbzp { + display: flex; +} +", + "", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/issue-861/node_modules/package/style.css", + ".q49Ogfvno__tAgAiYJcD { + display: inline-block; +} +", + "", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!./modules/composes/alias.css", + ".dnhKs1AYKq4KodZdfzcx { + display: table; +} +", + "", + ], + Array [ + "../../src/index.js??ruleSet[1].rules[0].use[0]!../../node_modules/sass-loader/dist/cjs.js!./modules/composes/scss-file.scss", + ".oNU7JF6MtPAFrlrthaOD { + color: red; + padding: 15px; +}", + "", + ], + Array [ + "./modules/composes/composes.css", + ".ozGmfTedr1GnFJDWqNUH { + color: red; +} + +.zchqshjqLbPAHaRvIBET { + color: blue; +} + +.WZBxXqS2GytaA3IBhhnd { + display: block; +} + +.W51zcAMuJMsNFi1CXgWr { + width: 2112moon; +} + +.KEl5ZxzNkpjfWorrBglC { + color: green; +} + +.ecAEWh2vww9pNEdyj9Jn { + prop: red; + duplicate: green; +} + +.CBlowYk8qiAgWWzFeXRA { + color: red; +} + +.c_NHnDcX1bd_kuxgsuYi { + color: yellow; +} + +.S0Kwou8pVmsENtBP3hYm { + color: gray; +} + +.rq663Pq_zV0CjpwttvK4 { + color: gray; +} + +.fadRMHArJofp7sWEbPVR { + color: gainsboro; +} + +.sg1HlXqlWy6l6_Wm5iA7 { + color: gainsboro; +} + +.bnRUswvicYag6u0SPnvI { + color: #BF4040; +} + +.kEJRwpukB2OtmkGTknbU { + color: black; +} + +@media (min-width: 960px) { + .hY2PI5vC9ABuJY1nkWnf { + padding: 0 20px; + } +} + +.white { + color: white; +} + +@media (min-width: 320px) { + .hY2PI5vC9ABuJY1nkWnf { + padding: 20px 20px; + } +} + +.q8mv0HutzqdsVWjl8mAz { + v-ident: validIdent; + v-pre-defined-ident: left; + v-string: 'content'; + v-string-1: ''; + v-url: url(https://www.exammple.com/images/my-background.png); + v-url-1: url('https://www.exammple.com/images/my-background.png'); + v-url-2: url(\\"https://www.exammple.com/images/my-background.png\\"); + v-integer: 100; + v-integer-1: -100; + v-integer-2: +100; + v-number: .60; + v-number-1: -456.8; + v-number-2: -3.4e-2; + v-dimension: 12px; + v-percentage: 100%; + v-hex: #fff; + v-comment: /* comment */ 10px /* comment */; + v-function: rgb(0,0,0); + v-unicode-range: U+0025-00FF; + mutliple: #fff .60 100%; +} + + +a { + content: 'content'; +} + +@supports (content: 'content') { + a { + content: 'content'; + } +} + +[class~='content'] { + color:green; +} + +.xajoqP1d3SwrjJ4WEM8g { + background: url(replaced_file_protocol_/webpack/public/path/img.png); +} + +.Ix5nEHiVOsWuWxdx0twz { + background: red; +} +", + "", + ], +] +`; + +exports[`"modules" option show work with the "mode" option using the "local" value and "templateLiteral" support: warnings 1`] = `Array []`; + exports[`"modules" option show work with the "mode" option using the "local" value: errors 1`] = `Array []`; exports[`"modules" option show work with the "mode" option using the "local" value: module 1`] = ` @@ -17818,3 +18271,23 @@ Array [ `; exports[`"modules" option show work with the "mode: icss" option, case "multiple-keys-values-in-export": warnings 1`] = `Array []`; + +exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: errors 1`] = `Array []`; + +exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: module 1`] = ` +"// Imports +import ___CSS_LOADER_ICSS_IMPORT_0___ from \\"-!../../../../../../src/index.js??ruleSet[1].rules[0].use[0]!./vars.css\\"; +// Exports +export default { + \\"primary-color\\": \`\${___CSS_LOADER_ICSS_IMPORT_0___[\\"primary-color\\"]}\` +}; +" +`; + +exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: result 1`] = ` +Object { + "primary-color": "red", +} +`; + +exports[`"modules" option show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support: warnings 1`] = `Array []`; diff --git a/test/__snapshots__/url-option.test.js.snap b/test/__snapshots__/url-option.test.js.snap index 2220b6ba..6dc086e1 100644 --- a/test/__snapshots__/url-option.test.js.snap +++ b/test/__snapshots__/url-option.test.js.snap @@ -1529,6 +1529,10 @@ Code: ] `; +exports[`"url" option should work with a lot of urls when template syntax enabled: errors 1`] = `Array []`; + +exports[`"url" option should work with a lot of urls when template syntax enabled: warnings 1`] = `Array []`; + exports[`"url" option should work with a value equal to "false": errors 1`] = `Array []`; exports[`"url" option should work with a value equal to "false": module 1`] = ` diff --git a/test/fixtures/basic.css b/test/fixtures/basic.css index be9ee34e..5a29b485 100644 --- a/test/fixtures/basic.css +++ b/test/fixtures/basic.css @@ -1,6 +1,5 @@ @charset "UTF-8"; -@import 'imported.css'; /* Comment */ @@ -88,6 +87,20 @@ body { #-a-b-c- {} /* matches the element with id="-a-b-c-" */ #© {} /* matches the element with id="©" */ +\.\` { + color: aliceblue; +} + +\.\$\{foo\} { + color: aliceblue; +} + +/* ` */ +/* `` */ +/* ``` */ +/* ${} */ +/* \\` */ + :root { --title-align: center; --sr-only: { diff --git a/test/fixtures/url/many-urls.js b/test/fixtures/url/many-urls.js new file mode 100644 index 00000000..279092f1 --- /dev/null +++ b/test/fixtures/url/many-urls.js @@ -0,0 +1,5 @@ +import css from './many-urls.css'; + +__export__ = css; + +export default css; diff --git a/test/loader.test.js b/test/loader.test.js index 632951e5..5a3c1fdd 100644 --- a/test/loader.test.js +++ b/test/loader.test.js @@ -26,6 +26,33 @@ describe("loader", () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); + it("should work with `templateLiteral` support", async () => { + const compiler = getCompiler( + "./basic.js", + {}, + { + output: { + path: path.resolve(__dirname, "./outputs"), + filename: "[name].bundle.js", + chunkFilename: "[name].chunk.js", + publicPath: "/webpack/public/path/", + assetModuleFilename: "[name][ext]", + environment: { + templateLiteral: true, + }, + }, + } + ); + const stats = await compile(compiler); + + expect(getModuleSource("./basic.css", stats)).toMatchSnapshot("module"); + expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot( + "result" + ); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + it("should work in 'production' mode", async () => { const compiler = getCompiler( "./basic.js", @@ -245,7 +272,7 @@ describe("loader", () => { ); const stats = await compile(compiler); - expect(stats.compilation.modules.size).toBe(14); + expect(stats.compilation.modules.size).toBe(13); expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); @@ -274,7 +301,7 @@ describe("loader", () => { ); const stats = await compile(compiler); - expect(stats.compilation.modules.size).toBe(14); + expect(stats.compilation.modules.size).toBe(13); expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); @@ -303,7 +330,7 @@ describe("loader", () => { ); const stats = await compile(compiler); - expect(stats.compilation.modules.size).toBe(13); + expect(stats.compilation.modules.size).toBe(12); expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); diff --git a/test/modules-option.test.js b/test/modules-option.test.js index 588f4355..ceefd042 100644 --- a/test/modules-option.test.js +++ b/test/modules-option.test.js @@ -1854,6 +1854,39 @@ describe('"modules" option', () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); + it('should work with "url", "namedExport" and "templateLiteral" support', async () => { + const compiler = getCompiler( + "./modules/url/source.js", + { + modules: { + namedExport: true, + }, + }, + { + output: { + path: path.resolve(__dirname, "./outputs"), + filename: "[name].bundle.js", + chunkFilename: "[name].chunk.js", + publicPath: "/webpack/public/path/", + assetModuleFilename: "[name][ext]", + environment: { + templateLiteral: true, + }, + }, + } + ); + const stats = await compile(compiler); + + expect(getModuleSource("./modules/url/source.css", stats)).toMatchSnapshot( + "module" + ); + expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot( + "result" + ); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + it('should work with "url"', async () => { const compiler = getCompiler("./modules/url/source.js", { modules: true, @@ -1961,6 +1994,40 @@ describe('"modules" option', () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); + it('show work with the "mode: icss", "exportOnlyLocals" options and "templateLiteral" support', async () => { + const compiler = getCompiler( + "./modules/icss/tests-cases/import/source.js", + { + modules: { + mode: "icss", + exportOnlyLocals: true, + }, + }, + { + output: { + path: path.resolve(__dirname, "./outputs"), + filename: "[name].bundle.js", + chunkFilename: "[name].chunk.js", + publicPath: "/webpack/public/path/", + assetModuleFilename: "[name][ext]", + environment: { + templateLiteral: true, + }, + }, + } + ); + const stats = await compile(compiler); + + expect( + getModuleSource("./modules/icss/tests-cases/import/source.css", stats) + ).toMatchSnapshot("module"); + expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot( + "result" + ); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + it('show work with the "mode: icss" and "namedExport" options', async () => { const compiler = getCompiler( "./modules/icss/tests-cases/import/source.js", @@ -2001,6 +2068,39 @@ describe('"modules" option', () => { expect(getErrors(stats)).toMatchSnapshot("errors"); }); + it('show work with the "mode" option using the "local" value and "templateLiteral" support', async () => { + const compiler = getCompiler( + "./modules/composes/composes.js", + { + modules: { + mode: "local", + }, + }, + { + output: { + path: path.resolve(__dirname, "./outputs"), + filename: "[name].bundle.js", + chunkFilename: "[name].chunk.js", + publicPath: "/webpack/public/path/", + assetModuleFilename: "[name][ext]", + environment: { + templateLiteral: true, + }, + }, + } + ); + const stats = await compile(compiler); + + expect( + getModuleSource("./modules/composes/composes.css", stats) + ).toMatchSnapshot("module"); + expect(getExecutedCode("main.bundle.js", compiler, stats)).toMatchSnapshot( + "result" + ); + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); + it("should emit warning when localIdentName is emoji", async () => { const compiler = getCompiler("./modules/pure/pure.js", { modules: { diff --git a/test/url-option.test.js b/test/url-option.test.js index 8868ff80..f116e07d 100644 --- a/test/url-option.test.js +++ b/test/url-option.test.js @@ -1,5 +1,6 @@ import fs from "fs"; import path from "path"; +import url from "url"; import webpack from "webpack"; @@ -591,4 +592,41 @@ describe('"url" option', () => { expect(getWarnings(stats)).toMatchSnapshot("warnings"); expect(getErrors(stats)).toMatchSnapshot("errors"); }); + + it("should work with a lot of urls when template syntax enabled", async () => { + // Create the file with absolute path + const fileDirectory = path.resolve(__dirname, "fixtures", "url"); + const file = path.resolve(fileDirectory, "many-urls.css"); + const imgUrl = url.pathToFileURL(path.resolve(fileDirectory, "img.png")); + const code = Array(10000) + .fill(`.background { background: url("${imgUrl}"); }`) + .join("\n"); + + fs.writeFileSync(file, code); + + const compiler = getCompiler( + "./url/many-urls.js", + {}, + { + output: { + path: path.resolve(__dirname, "./outputs"), + filename: "[name].bundle.js", + chunkFilename: "[name].chunk.js", + publicPath: "/webpack/public/path/", + assetModuleFilename: "[name][ext]", + environment: { + templateLiteral: true, + }, + }, + } + ); + const stats = await compile(compiler); + + // Just execute to check that it works + getModuleSource("./url/many-urls.css", stats); + getExecutedCode("main.bundle.js", compiler, stats); + + expect(getWarnings(stats)).toMatchSnapshot("warnings"); + expect(getErrors(stats)).toMatchSnapshot("errors"); + }); });