fix: always write locals export when css modules/icss enabled (#1315)

Author: cap-Bernardito

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}`);
 }

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 ="

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___;
 "
 `;

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___;
 "
 `;

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___;
 "
 `;