diff --git a/src/index.js b/src/index.js index 3b69316a..e9fe4f02 100644 --- a/src/index.js +++ b/src/index.js @@ -111,7 +111,9 @@ export default async function loader(content, map, meta) { const icssPluginImports = []; const icssPluginApi = []; - if (shouldUseIcssPlugin(options)) { + const needToUseIcssPlugin = shouldUseIcssPlugin(options); + + if (needToUseIcssPlugin) { const icssResolver = this.getResolve({ conditionNames: ["style"], extensions: [], @@ -211,7 +213,12 @@ export default async function loader(content, map, meta) { const importCode = getImportCode(imports, options); const moduleCode = getModuleCode(result, api, replacements, options, this); - const exportCode = getExportCode(exports, replacements, options); + const exportCode = getExportCode( + exports, + replacements, + needToUseIcssPlugin, + options + ); callback(null, `${importCode}${moduleCode}${exportCode}`); } diff --git a/src/utils.js b/src/utils.js index 7de84f3e..883ae857 100644 --- a/src/utils.js +++ b/src/utils.js @@ -770,8 +770,17 @@ function dashesCamelCase(str) { ); } -function getExportCode(exports, replacements, options) { +function getExportCode(exports, replacements, needToUseIcssPlugin, options) { let code = "// Exports\n"; + + if (!needToUseIcssPlugin) { + code += `${ + options.esModule ? "export default" : "module.exports =" + } ___CSS_LOADER_EXPORT___;\n`; + + return code; + } + let localsCode = ""; const addExportToLocalsCode = (name, value) => { @@ -858,11 +867,11 @@ function getExportCode(exports, replacements, options) { return code; } - if (localsCode) { - code += options.modules.namedExport - ? localsCode - : `___CSS_LOADER_EXPORT___.locals = {\n${localsCode}\n};\n`; - } + code += options.modules.namedExport + ? localsCode + : `___CSS_LOADER_EXPORT___.locals = {${ + localsCode ? `\n${localsCode}\n` : "" + }};\n`; code += `${ options.esModule ? "export default" : "module.exports =" diff --git a/test/__snapshots__/esModule-option.test.js.snap b/test/__snapshots__/esModule-option.test.js.snap index f97d461f..4a9f4d18 100644 --- a/test/__snapshots__/esModule-option.test.js.snap +++ b/test/__snapshots__/esModule-option.test.js.snap @@ -106,6 +106,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // 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\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; diff --git a/test/__snapshots__/loader.test.js.snap b/test/__snapshots__/loader.test.js.snap index e869ca17..697c67b7 100644 --- a/test/__snapshots__/loader.test.js.snap +++ b/test/__snapshots__/loader.test.js.snap @@ -9,6 +9,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; diff --git a/test/__snapshots__/modules-option.test.js.snap b/test/__snapshots__/modules-option.test.js.snap index 2f4d93c6..e747055d 100644 --- a/test/__snapshots__/modules-option.test.js.snap +++ b/test/__snapshots__/modules-option.test.js.snap @@ -556,6 +556,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".classNameLocalFile {\\\\n color: green;\\\\n}\\\\n\\\\n:global(.otherClassLocalFile) {\\\\n color: blue;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -567,6 +568,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".classNameGlobalFile {\\\\n color: black;\\\\n}\\\\n\\\\n:local(.otherClassGlobalFile) {\\\\n color: coral;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -4602,6 +4604,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"a {\\\\n animation: slide-right 300ms forwards ease-out, fade-in 300ms forwards ease-out;\\\\n\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -4664,6 +4667,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"a {\\\\n animation: slide-right 300ms forwards ease-out, fade-in 300ms forwards ease-out;\\\\n\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -4787,6 +4791,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".class-1, .class-10 .bar-1 {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -4848,6 +4853,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".class-1, .class-10 .bar-1 {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -5160,6 +5166,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"/*\\\\n * a ' above\\\\n */\\\\n\\\\n.bg {\\\\n background-image: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n/*\\\\n * a ' below\\\\n */\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -5241,6 +5248,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"/*\\\\n * a ' above\\\\n */\\\\n\\\\n.bg {\\\\n background-image: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\\\n/*\\\\n * a ' below\\\\n */\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -6839,6 +6847,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"body:before {\\\\n content: '';\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -6871,6 +6880,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"body:before {\\\\n content: '';\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -6903,6 +6913,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"body:before {\\\\n content: '';\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -6935,6 +6946,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"body:before {\\\\n content: '';\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -6967,6 +6979,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"body:before {\\\\n content: '';\\\\n background: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -7069,6 +7082,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -7223,6 +7237,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\\\n@keyframes bounce {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n@-webkit-keyframes bounce2 {\\\\n\\\\t0% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n\\\\t5% {\\\\n\\\\t\\\\ttransform: translateY(-100%);\\\\n\\\\t\\\\topacity: 0;\\\\n\\\\t}\\\\n}\\\\n\\\\n.bounce {\\\\n\\\\tanimation-name: bounce;\\\\n\\\\tanimation: bounce2 1s ease;\\\\n}\\\\n\\\\n.bounce2 {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: bounce 1s ease;\\\\n\\\\tanimation-name: bounce2;\\\\n}\\\\n\\\\n.bounce3 {\\\\n\\\\tanimation: bounce 1s ease, bounce2\\\\n}\\\\n\\\\n.bounce4 {\\\\n\\\\tanimation: bounce 1s ease, bounce2;\\\\n}\\\\n\\\\n.b {\\\\n\\\\tcolor: green;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -7520,6 +7535,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: a;\\\\n}\\\\n\\\\n@keyframes b {\\\\n\\\\t0% { left: 10px; }\\\\n\\\\t100% { left: 20px; }\\\\n}\\\\n\\\\n.b {\\\\n\\\\tanimation: b;\\\\n}\\\\n\\\\n@keyframes c {\\\\n\\\\t0% { left: 10px; }\\\\n\\\\t100% { left: 20px; }\\\\n}\\\\n\\\\n.c {\\\\n\\\\tanimation: c1;\\\\n\\\\tanimation: c2, c3, c4;\\\\n}\\\\n\\\\n@keyframes d {\\\\n\\\\t0% { left: 10px; }\\\\n\\\\t100% { left: 20px; }\\\\n}\\\\n\\\\n.d1 {\\\\n\\\\tanimation: d1;\\\\n\\\\tanimation: d2, d3, d4;\\\\n}\\\\n\\\\n.d2 {\\\\n\\\\tanimation: d2;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -7654,6 +7670,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tcolor: green;\\\\n\\\\tanimation: a;\\\\n}\\\\n\\\\n@keyframes b {\\\\n\\\\t0% { left: 10px; }\\\\n\\\\t100% { left: 20px; }\\\\n}\\\\n\\\\n.b {\\\\n\\\\tanimation: b;\\\\n}\\\\n\\\\n@keyframes c {\\\\n\\\\t0% { left: 10px; }\\\\n\\\\t100% { left: 20px; }\\\\n}\\\\n\\\\n.c {\\\\n\\\\tanimation: c1;\\\\n\\\\tanimation: c2, c3, c4;\\\\n}\\\\n\\\\n@keyframes d {\\\\n\\\\t0% { left: 10px; }\\\\n\\\\t100% { left: 20px; }\\\\n}\\\\n\\\\n.d1 {\\\\n\\\\tanimation: d1;\\\\n\\\\tanimation: d2, d3, d4;\\\\n}\\\\n\\\\n.d2 {\\\\n\\\\tanimation: d2;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -9355,6 +9372,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a .b, .c .d, #id {\\\\n\\\\tcolor: green;\\\\n\\\\tfont-size: 1.5pt;\\\\n}\\\\na[href=\\\\\\"#b.c\\\\\\"].x.y {\\\\n\\\\tcolor: green;\\\\n\\\\tfont-size: 1.5pt;\\\\n}\\\\n@keyframes z {\\\\n 2.5% {color: green;}\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -9437,6 +9455,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a .b, .c .d, #id {\\\\n\\\\tcolor: green;\\\\n\\\\tfont-size: 1.5pt;\\\\n}\\\\na[href=\\\\\\"#b.c\\\\\\"].x.y {\\\\n\\\\tcolor: green;\\\\n\\\\tfont-size: 1.5pt;\\\\n}\\\\n@keyframes z {\\\\n 2.5% {color: green;}\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -9616,6 +9635,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_2___ + \\");\\\\n\\\\tbackground: url(\\\\\\"#hash\\\\\\");\\\\n\\\\tbackground: url(\\\\\\"#\\\\\\");\\\\n\\\\tbackground: url(data:image/png;base64,AAA);\\\\n\\\\tbackground: url(http://example.com/image.jpg);\\\\n\\\\tbackground: url(//example.com/image.png);\\\\n\\\\tbackground: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\") url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\") xyz;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -9709,6 +9729,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_ // Module ___CSS_LOADER_EXPORT___.push([module.id, \\".a {\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\");\\\\n\\\\tbackground: url(\\" + ___CSS_LOADER_URL_REPLACEMENT_2___ + \\");\\\\n\\\\tbackground: url(\\\\\\"#hash\\\\\\");\\\\n\\\\tbackground: url(\\\\\\"#\\\\\\");\\\\n\\\\tbackground: url(data:image/png;base64,AAA);\\\\n\\\\tbackground: url(http://example.com/image.jpg);\\\\n\\\\tbackground: url(//example.com/image.png);\\\\n\\\\tbackground: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) url(\\" + ___CSS_LOADER_URL_REPLACEMENT_0___ + \\") url(\\" + ___CSS_LOADER_URL_REPLACEMENT_1___ + \\") xyz;\\\\n}\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -13426,6 +13447,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `; @@ -13452,6 +13474,7 @@ var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1 // Module ___CSS_LOADER_EXPORT___.push([module.id, \\"\\\\n\\", \\"\\"]); // Exports +___CSS_LOADER_EXPORT___.locals = {}; export default ___CSS_LOADER_EXPORT___; " `;