Skip to content

Commit 866b84a

Browse files
evilebottnawievilebottnawi
authored
fix: don't generate an invalid code for locals (#1072)
1 parent aeeacb8 commit 866b84a

File tree

3 files changed

+59
-27
lines changed

3 files changed

+59
-27
lines changed

‎src/utils.js‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -348,49 +348,47 @@ function getExportCode(
348348
let code = '';
349349
let localsCode = '';
350350

351-
const addExportToLocalsCode = (name, value, index) => {
352-
const isLastItem = index === exports.length - 1;
351+
const addExportToLocalsCode = (name, value) => {
352+
if (localsCode) {
353+
localsCode += `,\n`;
354+
}
353355

354-
localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}${
355-
isLastItem ? '' : ',\n'
356-
}`;
356+
localsCode += `\t${JSON.stringify(name)}: ${JSON.stringify(value)}`;
357357
};
358358

359-
for (const [index, item] of exports.entries()) {
360-
const { name, value } = item;
361-
359+
for (const { name, value } of exports) {
362360
switch (localsConvention) {
363361
case 'camelCase': {
364-
addExportToLocalsCode(name, value, index);
362+
addExportToLocalsCode(name, value);
365363

366364
const modifiedName = camelCase(name);
367365

368366
if (modifiedName !== name) {
369-
addExportToLocalsCode(modifiedName, value, index);
367+
addExportToLocalsCode(modifiedName, value);
370368
}
371369
break;
372370
}
373371
case 'camelCaseOnly': {
374-
addExportToLocalsCode(camelCase(name), value, index);
372+
addExportToLocalsCode(camelCase(name), value);
375373
break;
376374
}
377375
case 'dashes': {
378376
addExportToLocalsCode(name, value);
379377

380-
const modifiedName = dashesCamelCase(name, index);
378+
const modifiedName = dashesCamelCase(name);
381379

382380
if (modifiedName !== name) {
383-
addExportToLocalsCode(modifiedName, value, index);
381+
addExportToLocalsCode(modifiedName, value);
384382
}
385383
break;
386384
}
387385
case 'dashesOnly': {
388-
addExportToLocalsCode(dashesCamelCase(name), value, index);
386+
addExportToLocalsCode(dashesCamelCase(name), value);
389387
break;
390388
}
391389
case 'asIs':
392390
default:
393-
addExportToLocalsCode(name, value, index);
391+
addExportToLocalsCode(name, value);
394392
break;
395393
}
396394
}

‎test/__snapshots__/localsConvention-option.test.js.snap‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@ exports[`"localsConvention" option should work when not specified: module 1`] =
77
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
88
exports = ___CSS_LOADER_API_IMPORT___(false);
99
// Module
10-
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\\", \\"\\"]);
10+
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\\", \\"\\"]);
1111
// Exports
1212
exports.locals = {
1313
\\"foo\\": \\"bar\\",
1414
\\"my-btn-info_is-disabled\\": \\"value\\",
1515
\\"btn-info_is-disabled\\": \\"erBXHZCN_thRYfCnk-aH8\\",
1616
\\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
17-
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\"
17+
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\",
18+
\\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\"
1819
};
1920
module.exports = exports;
2021
"
@@ -39,6 +40,10 @@ Array [
3940
a {
4041
color: yellow;
4142
}
43+
44+
.jHKqWGMvMrGp5RVPtApZ8 {
45+
color: red;
46+
}
4247
",
4348
"",
4449
],
@@ -54,14 +59,15 @@ exports[`"localsConvention" option should work with a value equal to "asIs": mod
5459
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
5560
exports = ___CSS_LOADER_API_IMPORT___(false);
5661
// Module
57-
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\\", \\"\\"]);
62+
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\\", \\"\\"]);
5863
// Exports
5964
exports.locals = {
6065
\\"foo\\": \\"bar\\",
6166
\\"my-btn-info_is-disabled\\": \\"value\\",
6267
\\"btn-info_is-disabled\\": \\"erBXHZCN_thRYfCnk-aH8\\",
6368
\\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
64-
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\"
69+
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\",
70+
\\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\"
6571
};
6672
module.exports = exports;
6773
"
@@ -86,6 +92,10 @@ Array [
8692
a {
8793
color: yellow;
8894
}
95+
96+
.jHKqWGMvMrGp5RVPtApZ8 {
97+
color: red;
98+
}
8999
",
90100
"",
91101
],
@@ -101,7 +111,7 @@ exports[`"localsConvention" option should work with a value equal to "camelCase"
101111
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
102112
exports = ___CSS_LOADER_API_IMPORT___(false);
103113
// Module
104-
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\\", \\"\\"]);
114+
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\\", \\"\\"]);
105115
// Exports
106116
exports.locals = {
107117
\\"foo\\": \\"bar\\",
@@ -111,7 +121,9 @@ exports.locals = {
111121
\\"btnInfoIsDisabled\\": \\"erBXHZCN_thRYfCnk-aH8\\",
112122
\\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
113123
\\"btnInfoIsDisabled1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
114-
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\"
124+
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\",
125+
\\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\",
126+
\\"fooBar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\"
115127
};
116128
module.exports = exports;
117129
"
@@ -136,6 +148,10 @@ Array [
136148
a {
137149
color: yellow;
138150
}
151+
152+
.jHKqWGMvMrGp5RVPtApZ8 {
153+
color: red;
154+
}
139155
",
140156
"",
141157
],
@@ -151,14 +167,15 @@ exports[`"localsConvention" option should work with a value equal to "camelCaseO
151167
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
152168
exports = ___CSS_LOADER_API_IMPORT___(false);
153169
// Module
154-
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\\", \\"\\"]);
170+
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\\", \\"\\"]);
155171
// Exports
156172
exports.locals = {
157173
\\"foo\\": \\"bar\\",
158174
\\"myBtnInfoIsDisabled\\": \\"value\\",
159175
\\"btnInfoIsDisabled\\": \\"erBXHZCN_thRYfCnk-aH8\\",
160176
\\"btnInfoIsDisabled1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
161-
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\"
177+
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\",
178+
\\"fooBar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\"
162179
};
163180
module.exports = exports;
164181
"
@@ -183,6 +200,10 @@ Array [
183200
a {
184201
color: yellow;
185202
}
203+
204+
.jHKqWGMvMrGp5RVPtApZ8 {
205+
color: red;
206+
}
186207
",
187208
"",
188209
],
@@ -198,7 +219,7 @@ exports[`"localsConvention" option should work with a value equal to "dashes": m
198219
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
199220
exports = ___CSS_LOADER_API_IMPORT___(false);
200221
// Module
201-
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\\", \\"\\"]);
222+
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\\", \\"\\"]);
202223
// Exports
203224
exports.locals = {
204225
\\"foo\\": \\"bar\\",
@@ -209,7 +230,7 @@ exports.locals = {
209230
\\"btn--info_is-disabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
210231
\\"btnInfo_isDisabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
211232
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\",
212-
233+
\\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\"
213234
};
214235
module.exports = exports;
215236
"
@@ -234,6 +255,10 @@ Array [
234255
a {
235256
color: yellow;
236257
}
258+
259+
.jHKqWGMvMrGp5RVPtApZ8 {
260+
color: red;
261+
}
237262
",
238263
"",
239264
],
@@ -249,14 +274,15 @@ exports[`"localsConvention" option should work with a value equal to "dashesOnly
249274
var ___CSS_LOADER_API_IMPORT___ = require(\\"../../../../src/runtime/api.js\\");
250275
exports = ___CSS_LOADER_API_IMPORT___(false);
251276
// Module
252-
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\\", \\"\\"]);
277+
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\\", \\"\\"]);
253278
// Exports
254279
exports.locals = {
255280
\\"foo\\": \\"bar\\",
256281
\\"myBtnInfo_isDisabled\\": \\"value\\",
257282
\\"btnInfo_isDisabled\\": \\"erBXHZCN_thRYfCnk-aH8\\",
258283
\\"btnInfo_isDisabled_1\\": \\"_2YsQE-S0o0NRXfC6XNApz2\\",
259-
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\"
284+
\\"simple\\": \\"_3gGBcJHZU3seQVP5aq7Ksq\\",
285+
\\"foo_bar\\": \\"jHKqWGMvMrGp5RVPtApZ8\\"
260286
};
261287
module.exports = exports;
262288
"
@@ -281,6 +307,10 @@ Array [
281307
a {
282308
color: yellow;
283309
}
310+
311+
.jHKqWGMvMrGp5RVPtApZ8 {
312+
color: red;
313+
}
284314
",
285315
"",
286316
],

‎test/fixtures/modules/localsConvention/localsConvention.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,7 @@ a {
1818
foo: bar;
1919
my-btn-info_is-disabled: value;
2020
}
21+
22+
.foo_bar {
23+
color: red;
24+
}

0 commit comments

Comments
 (0)