diff --git a/src/utils.js b/src/utils.js index d39ffcb8..45e8f7a9 100644 --- a/src/utils.js +++ b/src/utils.js @@ -348,49 +348,47 @@ function getExportCode( let code = ''; let localsCode = ''; - const addExportToLocalsCode = (name, value, index) => { - const isLastItem = index === exports.length - 1; + const addExportToLocalsCode = (name, value) => { + if (localsCode) { + localsCode += `,\n`; + } - localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}${ - isLastItem ? '' : ',\n' - }`; + localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`; }; - for (const [index, item] of exports.entries()) { - const { name, value } = item; - + for (const { name, value } of exports) { switch (localsConvention) { case 'camelCase': { - addExportToLocalsCode(name, value, index); + addExportToLocalsCode(name, value); const modifiedName = camelCase(name); if (modifiedName !== name) { - addExportToLocalsCode(modifiedName, value, index); + addExportToLocalsCode(modifiedName, value); } break; } case 'camelCaseOnly': { - addExportToLocalsCode(camelCase(name), value, index); + addExportToLocalsCode(camelCase(name), value); break; } case 'dashes': { addExportToLocalsCode(name, value); - const modifiedName = dashesCamelCase(name, index); + const modifiedName = dashesCamelCase(name); if (modifiedName !== name) { - addExportToLocalsCode(modifiedName, value, index); + addExportToLocalsCode(modifiedName, value); } break; } case 'dashesOnly': { - addExportToLocalsCode(dashesCamelCase(name), value, index); + addExportToLocalsCode(dashesCamelCase(name), value); break; } case 'asIs': default: - addExportToLocalsCode(name, value, index); + addExportToLocalsCode(name, value); break; } } diff --git a/test/__snapshots__/localsConvention-option.test.js.snap b/test/__snapshots__/localsConvention-option.test.js.snap index 4dd156e1..6bfefac5 100644 --- a/test/__snapshots__/localsConvention-option.test.js.snap +++ b/test/__snapshots__/localsConvention-option.test.js.snap @@ -7,14 +7,15 @@ exports[`"localsConvention" option should work when not specified: module 1`] = var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\\\n.jHKqWGMvMrGp5RVPtApZ8 {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"foo\\": \\"bar\\", \\"my-btn-info_is-disabled\\": \\"value\\", \\"btn-info_is-disabled\\": \\"erBXHZCN_thRYfCnk-aH8\\", \\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", - \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\" + \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\", + \\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\" }; module.exports = exports; " @@ -39,6 +40,10 @@ Array [ a { color: yellow; } + +.jHKqWGMvMrGp5RVPtApZ8 { + color: red; +} ", "", ], @@ -54,14 +59,15 @@ exports[`"localsConvention" option should work with a value equal to "asIs": mod var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\\\n.jHKqWGMvMrGp5RVPtApZ8 {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"foo\\": \\"bar\\", \\"my-btn-info_is-disabled\\": \\"value\\", \\"btn-info_is-disabled\\": \\"erBXHZCN_thRYfCnk-aH8\\", \\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", - \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\" + \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\", + \\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\" }; module.exports = exports; " @@ -86,6 +92,10 @@ Array [ a { color: yellow; } + +.jHKqWGMvMrGp5RVPtApZ8 { + color: red; +} ", "", ], @@ -101,7 +111,7 @@ exports[`"localsConvention" option should work with a value equal to "camelCase" var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\\\n.jHKqWGMvMrGp5RVPtApZ8 {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"foo\\": \\"bar\\", @@ -111,7 +121,9 @@ exports.locals = { \\"btnInfoIsDisabled\\": \\"erBXHZCN_thRYfCnk-aH8\\", \\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", \\"btnInfoIsDisabled1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", - \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\" + \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\", + \\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\", + \\"fooBar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\" }; module.exports = exports; " @@ -136,6 +148,10 @@ Array [ a { color: yellow; } + +.jHKqWGMvMrGp5RVPtApZ8 { + color: red; +} ", "", ], @@ -151,14 +167,15 @@ exports[`"localsConvention" option should work with a value equal to "camelCaseO var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\\\n.jHKqWGMvMrGp5RVPtApZ8 {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"foo\\": \\"bar\\", \\"myBtnInfoIsDisabled\\": \\"value\\", \\"btnInfoIsDisabled\\": \\"erBXHZCN_thRYfCnk-aH8\\", \\"btnInfoIsDisabled1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", - \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\" + \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\", + \\"fooBar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\" }; module.exports = exports; " @@ -183,6 +200,10 @@ Array [ a { color: yellow; } + +.jHKqWGMvMrGp5RVPtApZ8 { + color: red; +} ", "", ], @@ -198,7 +219,7 @@ exports[`"localsConvention" option should work with a value equal to "dashes": m var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\\\n.jHKqWGMvMrGp5RVPtApZ8 {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"foo\\": \\"bar\\", @@ -209,7 +230,7 @@ exports.locals = { \\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", \\"btnInfo_isDisabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\", - + \\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\" }; module.exports = exports; " @@ -234,6 +255,10 @@ Array [ a { color: yellow; } + +.jHKqWGMvMrGp5RVPtApZ8 { + color: red; +} ", "", ], @@ -249,14 +274,15 @@ exports[`"localsConvention" option should work with a value equal to "dashesOnly var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\"); exports = ___CSS_LOADER_API_IMPORT___(false); // Module -exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\", \\"\\"]); +exports.push([module.id, \\".erBXHZCN_thRYfCnk-aH8 {\\\\n color: blue;\\\\n}\\\\n\\\\n._2YsQE-S0o0NRXfC6XNApz2 {\\\\n color: blue;\\\\n}\\\\n\\\\n._3gGBcJHZU3seQVP5aq7Ksq {\\\\n color: red;\\\\n}\\\\n\\\\na {\\\\n color: yellow;\\\\n}\\\\n\\\\n.jHKqWGMvMrGp5RVPtApZ8 {\\\\n color: red;\\\\n}\\\\n\\", \\"\\"]); // Exports exports.locals = { \\"foo\\": \\"bar\\", \\"myBtnInfo_isDisabled\\": \\"value\\", \\"btnInfo_isDisabled\\": \\"erBXHZCN_thRYfCnk-aH8\\", \\"btnInfo_isDisabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\", - \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\" + \\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\", + \\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\" }; module.exports = exports; " @@ -281,6 +307,10 @@ Array [ a { color: yellow; } + +.jHKqWGMvMrGp5RVPtApZ8 { + color: red; +} ", "", ], diff --git a/test/fixtures/modules/localsConvention/localsConvention.css b/test/fixtures/modules/localsConvention/localsConvention.css index a0c46e20..894f64b1 100644 --- a/test/fixtures/modules/localsConvention/localsConvention.css +++ b/test/fixtures/modules/localsConvention/localsConvention.css @@ -18,3 +18,7 @@ a { foo: bar; my-btn-info_is-disabled: value; } + +.foo_bar { + color: red; +}