Skip to content

Commit

Permalink
fix: don't generate an invalid code for locals (#1072)
Browse files Browse the repository at this point in the history
  • Loading branch information
@evilebottnawi
evilebottnawi committed Apr 7, 2020
1 parent aeeacb8 commit 866b84a
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 27 deletions.
28 changes: 13 additions & 15 deletions src/utils.js
View file
Expand Up @@ -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;
}
}
Expand Down
54 changes: 42 additions & 12 deletions test/__snapshots__/localsConvention-option.test.js.snap
View file
Expand Up @@ -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;
"
Expand All @@ -39,6 +40,10 @@ Array [
a {
color: yellow;
}
.jHKqWGMvMrGp5RVPtApZ8 {
color: red;
}
",
"",
],
Expand All @@ -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;
"
Expand All @@ -86,6 +92,10 @@ Array [
a {
color: yellow;
}
.jHKqWGMvMrGp5RVPtApZ8 {
color: red;
}
",
"",
],
Expand All @@ -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\\",
Expand All @@ -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;
"
Expand All @@ -136,6 +148,10 @@ Array [
a {
color: yellow;
}
.jHKqWGMvMrGp5RVPtApZ8 {
color: red;
}
",
"",
],
Expand All @@ -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;
"
Expand All @@ -183,6 +200,10 @@ Array [
a {
color: yellow;
}
.jHKqWGMvMrGp5RVPtApZ8 {
color: red;
}
",
"",
],
Expand All @@ -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\\",
Expand All @@ -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;
"
Expand All @@ -234,6 +255,10 @@ Array [
a {
color: yellow;
}
.jHKqWGMvMrGp5RVPtApZ8 {
color: red;
}
",
"",
],
Expand All @@ -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;
"
Expand All @@ -281,6 +307,10 @@ Array [
a {
color: yellow;
}
.jHKqWGMvMrGp5RVPtApZ8 {
color: red;
}
",
"",
],
Expand Down
4 changes: 4 additions & 0 deletions test/fixtures/modules/localsConvention/localsConvention.css
View file
Expand Up @@ -18,3 +18,7 @@ a {
foo: bar;
my-btn-info_is-disabled: value;
}

.foo_bar {
color: red;
}

0 comments on commit 866b84a

Please sign in to comment.