diff --git a/src/index.js b/src/index.js index 9d4ca847..f31a93c3 100644 --- a/src/index.js +++ b/src/index.js @@ -39,7 +39,10 @@ export default async function loader(content, map, meta) { this._compiler.options.experiments && this._compiler.options.experiments.css && this._module && - this._module.type === "css" + (this._module.type === "css" || + this._module.type === "css/auto" || + this._module.type === "css/global" || + this._module.type === "css/module") ) { this.emitWarning( new Error( diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index 05e32b92..d5172ce1 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -292,43 +292,23 @@ exports[`loader should throws error when no loader(s) for assets: errors 1`] = ` exports[`loader should throws error when no loader(s) for assets: warnings 1`] = `Array []`; -exports[`loader should work and nothing to do with built-in CSS support: errors 1`] = ` -Array [ - "ModuleNotFoundError: Module not found: Error: Can't resolve '\${___CSS_LOADER_URL_REPLACEMENT_0___}' in '/test/fixtures'", - "ModuleNotFoundError: Module not found: Error: Can't resolve '\${___CSS_LOADER_URL_REPLACEMENT_1___}' in '/test/fixtures'", -] -`; +exports[`loader should work and nothing to do with built-in CSS support: errors 1`] = `Array []`; -exports[`loader should work and nothing to do with built-in CSS support: errors 2`] = ` -Array [ - "ModuleNotFoundError: Module not found: Error: Can't resolve '\${___CSS_LOADER_URL_REPLACEMENT_0___}' in '/test/fixtures'", - "ModuleNotFoundError: Module not found: Error: Can't resolve '\${___CSS_LOADER_URL_REPLACEMENT_1___}' in '/test/fixtures'", -] -`; +exports[`loader should work and nothing to do with built-in CSS support: errors 2`] = `Array []`; exports[`loader should work and nothing to do 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_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\\"; +"@charset \\"UTF-8\\"; /* Comment */ .class { color: red; - background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); + background: url(\\"./url/img.png\\"); } .class-duplicate-url { - background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); + background: url(\\"./url/img.png\\"); } :root { @@ -340,9 +320,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\"; .two {} -.u-m\\\\\\\\+ { a: b c d; } +.u-m\\\\+ { a: b c d; } -.class { content: \\"\\\\\\\\F10C\\" } +.class { content: \\"\\\\F10C\\" } @media only screen and (max-width: 600px) { body { @@ -351,74 +331,74 @@ ___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\"; } .class { - content: \\"\\\\\\\\2193\\"; - content: \\"\\\\\\\\2193\\\\\\\\2193\\"; - content: \\"\\\\\\\\2193 \\\\\\\\2193\\"; - content: \\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\"; - content: \\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\"; + content: \\"\\\\2193\\"; + content: \\"\\\\2193\\\\2193\\"; + content: \\"\\\\2193 \\\\2193\\"; + content: \\"\\\\2193\\\\2193\\\\2193\\"; + content: \\"\\\\2193 \\\\2193 \\\\2193\\"; } .-top {} -.\\\\\\\\-top {} +.\\\\-top {} -#\\\\\\\\#test {} +#\\\\#test {} .grid { display: flex; flex-wrap: wrap; } -.grid.\\\\\\\\-top { +.grid.\\\\-top { align-items: flex-start; } .grid.-top { align-items: flex-start; } -.grid.\\\\\\\\-middle { +.grid.\\\\-middle { align-items: center; } -.grid.\\\\\\\\-bottom { +.grid.\\\\-bottom { align-items: flex-end; } -.u-m\\\\\\\\00002b {} +.u-m\\\\00002b {} .u-m00002b {} -#u-m\\\\\\\\+ {} +#u-m\\\\+ {} body { font-family: '微软雅黑'; /* some chinese font name */ } .myStyle { - content: '\\\\\\\\e901'; + content: '\\\\e901'; } .myStyle { - content: '\\\\\\\\E901'; + content: '\\\\E901'; } .♫ {} -.\\\\\\\\3A \\\\\\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\":\\\\\`(\\" */ -.\\\\\\\\31 a2b3c {} /* matches elements with class=\\"1a2b3c\\" */ -#\\\\\\\\#fake-id {} /* matches the element with id=\\"#fake-id\\" */ +.\\\\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\\\\\\\\} { +\\\\.\\\\$\\\\{foo\\\\} { color: aliceblue; } -/* \\\\\` */ -/* \\\\\`\\\\\` */ -/* \\\\\`\\\\\`\\\\\` */ -/* \\\\\${} */ -/* \\\\\\\\\\\\\\\\\\\\\` */ +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ :root { --title-align: center; @@ -436,12 +416,12 @@ body { } .test { - content: \\"\\\\\\\\2014\\\\\\\\A0\\"; - content: \\"\\\\\\\\2014 \\\\\\\\A0\\"; - content: \\"\\\\\\\\A0 \\\\\\\\2014\\"; - content: \\"\\\\\\\\A0\\\\\\\\2014\\"; - margin-top: 1px\\\\\\\\9; - background-color: #000\\\\\\\\9; + content: \\"\\\\2014\\\\A0\\"; + content: \\"\\\\2014 \\\\A0\\"; + content: \\"\\\\A0 \\\\2014\\"; + content: \\"\\\\A0\\\\2014\\"; + margin-top: 1px\\\\9; + background-color: #000\\\\9; } .light.on .bulb:before{ @@ -449,7 +429,7 @@ body { } .base64 { - background: url(\${___CSS_LOADER_URL_REPLACEMENT_1___}); + 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=''] { @@ -467,35 +447,22 @@ a[href=\\"\\"] { a[href=\\"\\" i] { color: blue; } -\`, \\"\\"]); -// Exports -export default ___CSS_LOADER_EXPORT___; " `; exports[`loader should work and nothing to do with built-in CSS support: module 2`] = ` -"// 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\\"; +"@charset \\"UTF-8\\"; /* Comment */ .class { color: red; - background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); + background: url(\\"./url/img.png\\"); } .class-duplicate-url { - background: url(\${___CSS_LOADER_URL_REPLACEMENT_0___}); + background: url(\\"./url/img.png\\"); } :root { @@ -507,9 +474,9 @@ ___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\"; .two {} -.u-m\\\\\\\\+ { a: b c d; } +.u-m\\\\+ { a: b c d; } -.class { content: \\"\\\\\\\\F10C\\" } +.class { content: \\"\\\\F10C\\" } @media only screen and (max-width: 600px) { body { @@ -518,74 +485,74 @@ ___CSS_LOADER_EXPORT___.push([module.id, \`@charset \\"UTF-8\\"; } .class { - content: \\"\\\\\\\\2193\\"; - content: \\"\\\\\\\\2193\\\\\\\\2193\\"; - content: \\"\\\\\\\\2193 \\\\\\\\2193\\"; - content: \\"\\\\\\\\2193\\\\\\\\2193\\\\\\\\2193\\"; - content: \\"\\\\\\\\2193 \\\\\\\\2193 \\\\\\\\2193\\"; + content: \\"\\\\2193\\"; + content: \\"\\\\2193\\\\2193\\"; + content: \\"\\\\2193 \\\\2193\\"; + content: \\"\\\\2193\\\\2193\\\\2193\\"; + content: \\"\\\\2193 \\\\2193 \\\\2193\\"; } .-top {} -.\\\\\\\\-top {} +.\\\\-top {} -#\\\\\\\\#test {} +#\\\\#test {} .grid { display: flex; flex-wrap: wrap; } -.grid.\\\\\\\\-top { +.grid.\\\\-top { align-items: flex-start; } .grid.-top { align-items: flex-start; } -.grid.\\\\\\\\-middle { +.grid.\\\\-middle { align-items: center; } -.grid.\\\\\\\\-bottom { +.grid.\\\\-bottom { align-items: flex-end; } -.u-m\\\\\\\\00002b {} +.u-m\\\\00002b {} .u-m00002b {} -#u-m\\\\\\\\+ {} +#u-m\\\\+ {} body { font-family: '微软雅黑'; /* some chinese font name */ } .myStyle { - content: '\\\\\\\\e901'; + content: '\\\\e901'; } .myStyle { - content: '\\\\\\\\E901'; + content: '\\\\E901'; } .♫ {} -.\\\\\\\\3A \\\\\\\\\\\\\`\\\\\\\\( {} /* matches elements with class=\\":\\\\\`(\\" */ -.\\\\\\\\31 a2b3c {} /* matches elements with class=\\"1a2b3c\\" */ -#\\\\\\\\#fake-id {} /* matches the element with id=\\"#fake-id\\" */ +.\\\\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\\\\\\\\} { +\\\\.\\\\$\\\\{foo\\\\} { color: aliceblue; } -/* \\\\\` */ -/* \\\\\`\\\\\` */ -/* \\\\\`\\\\\`\\\\\` */ -/* \\\\\${} */ -/* \\\\\\\\\\\\\\\\\\\\\` */ +/* \` */ +/* \`\` */ +/* \`\`\` */ +/* \${} */ +/* \\\\\\\\\` */ :root { --title-align: center; @@ -603,12 +570,12 @@ body { } .test { - content: \\"\\\\\\\\2014\\\\\\\\A0\\"; - content: \\"\\\\\\\\2014 \\\\\\\\A0\\"; - content: \\"\\\\\\\\A0 \\\\\\\\2014\\"; - content: \\"\\\\\\\\A0\\\\\\\\2014\\"; - margin-top: 1px\\\\\\\\9; - background-color: #000\\\\\\\\9; + content: \\"\\\\2014\\\\A0\\"; + content: \\"\\\\2014 \\\\A0\\"; + content: \\"\\\\A0 \\\\2014\\"; + content: \\"\\\\A0\\\\2014\\"; + margin-top: 1px\\\\9; + background-color: #000\\\\9; } .light.on .bulb:before{ @@ -616,7 +583,7 @@ body { } .base64 { - background: url(\${___CSS_LOADER_URL_REPLACEMENT_1___}); + 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=''] { @@ -634,15 +601,22 @@ a[href=\\"\\"] { a[href=\\"\\" i] { color: blue; } -\`, \\"\\"]); -// Exports -export default ___CSS_LOADER_EXPORT___; " `; -exports[`loader should work and nothing to do with built-in CSS support: warnings 1`] = `Array []`; +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).", +] +`; -exports[`loader should work and nothing to do with built-in CSS support: warnings 2`] = `Array []`; +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).", +] +`; exports[`loader should work in 'production' mode: errors 1`] = `Array []`;