Skip to content

Commit

Permalink
fix: properly export locals with escaped characters (#917)
Browse files Browse the repository at this point in the history
  • Loading branch information
alreadyExisted authored and evilebottnawi committed Apr 10, 2019
1 parent edb3ffa commit a0efcda
Show file tree
Hide file tree
Showing 4 changed files with 213 additions and 3 deletions.
50 changes: 47 additions & 3 deletions src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,7 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
options
);

return hash
.replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-')
.replace(/^((-?[0-9])|--)/, '_$1');
return normalizeIdentifier(hash);
}

function getFilter(filter, resourcePath, defaultFilter = null) {
Expand All @@ -107,6 +105,52 @@ function getFilter(filter, resourcePath, defaultFilter = null) {
};
}

function normalizeIdentifier(value) {
const escapedSymbols = [
'~',
'!',
'@',
'#',
'$',
'%',
'&',
'^',
'*',
'(',
')',
'{',
'}',
'[',
']',
'`',
'/',
'=',
'?',
'+',
'\\',
'|',
'-',
'_',
':',
';',
"'",
'"',
',',
'<',
'.',
'>',
];

const identifiersRegExp = new RegExp(
`[^a-zA-Z0-9${escapedSymbols.join('\\')}\\-_\u00A0-\uFFFF]`,
'g'
);

return value
.replace(identifiersRegExp, '-')
.replace(/^((-?[0-9])|--)/, '_$1');
}

export {
getImportPrefix,
getLocalIdent,
Expand Down
134 changes: 134 additions & 0 deletions test/__snapshots__/localIdentName-option.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@ Array [
:local(.-a0-34a___f) {
color: red;
}
:local(.m_x_\\\\@) {
margin-left: auto !important;
margin-right: auto !important;
}
:local(.B\\\\&W\\\\?) {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
Expand Down Expand Up @@ -78,6 +88,16 @@ Array [
:local(.-a0-34a___f) {
color: red;
}
:local(.m_x_\\\\@) {
margin-left: auto !important;
margin-right: auto !important;
}
:local(.B\\\\&W\\\\?) {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
Expand Down Expand Up @@ -121,6 +141,16 @@ Array [
:local(.-a0-34a___f) {
color: red;
}
:local(.m_x_\\\\@) {
margin-left: auto !important;
margin-right: auto !important;
}
:local(.B\\\\&W\\\\?) {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
Expand Down Expand Up @@ -164,6 +194,16 @@ Array [
:local(.-a0-34a___f) {
color: red;
}
:local(.m_x_\\\\@) {
margin-left: auto !important;
margin-right: auto !important;
}
:local(.B\\\\&W\\\\?) {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
Expand Down Expand Up @@ -207,6 +247,16 @@ Array [
:local(.-a0-34a___f) {
color: red;
}
:local(.m_x_\\\\@) {
margin-left: auto !important;
margin-right: auto !important;
}
:local(.B\\\\&W\\\\?) {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
Expand Down Expand Up @@ -250,6 +300,16 @@ Array [
:local(.-a0-34a___f) {
color: red;
}
:local(.m_x_\\\\@) {
margin-left: auto !important;
margin-right: auto !important;
}
:local(.B\\\\&W\\\\?) {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
Expand Down Expand Up @@ -293,10 +353,84 @@ Array [
:local(.-a0-34a___f) {
color: red;
}
:local(.m_x_\\\\@) {
margin-left: auto !important;
margin-right: auto !important;
}
:local(.B\\\\&W\\\\?) {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
]
`;

exports[`localIdentName option should use hash prefix: warnings 1`] = `Array []`;

exports[`localIdentName option should сorrectly replace escaped symbols in selector: errors 1`] = `Array []`;

exports[`localIdentName option should сorrectly replace escaped symbols in selector: locals 1`] = `
Object {
"-a0-34a___f": "-a0-34a___f--2nJ5",
"B&W?": "B&W?--1s8i",
"_test": "_test--23te",
"className": "className--1E8H",
"m_x_@": "m_x_@--2G3b",
"someId": "someId--3w7J",
"subClass": "subClass--3lo0",
"test": "test--NW9Y",
}
`;

exports[`localIdentName option should сorrectly replace escaped symbols in selector: module (evaluated) 1`] = `
Array [
Array [
1,
".test--NW9Y {
background: red;
}
._test--23te {
background: blue;
}
.className--1E8H {
background: red;
}
#someId--3w7J {
background: green;
}
.className--1E8H .subClass--3lo0 {
color: green;
}
#someId--3w7J .subClass--3lo0 {
color: blue;
}
.-a0-34a___f--2nJ5 {
color: red;
}
.m_x_\\\\@--2G3b {
margin-left: auto !important;
margin-right: auto !important;
}
.B\\\\&W\\\\?--1s8i {
margin-left: auto !important;
margin-right: auto !important;
}
",
"",
],
]
`;

exports[`localIdentName option should сorrectly replace escaped symbols in selector: warnings 1`] = `Array []`;
10 changes: 10 additions & 0 deletions test/fixtures/modules/localIdentName.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,13 @@
:local(.-a0-34a___f) {
color: red;
}

:local(.m_x_\@) {
margin-left: auto !important;
margin-right: auto !important;
}

:local(.B\&W\?) {
margin-left: auto !important;
margin-right: auto !important;
}
22 changes: 22 additions & 0 deletions test/localIdentName-option.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,4 +117,26 @@ describe('localIdentName option', () => {
expect(stats.compilation.warnings).toMatchSnapshot('warnings');
expect(stats.compilation.errors).toMatchSnapshot('errors');
});

it('should сorrectly replace escaped symbols in selector', async () => {
const config = {
loader: {
options: {
importLoaders: 2,
localIdentName: '[local]--[hash:base64:4]',
modules: true,
},
},
};
const testId = './modules/localIdentName.css';
const stats = await webpack(testId, config);
const { modules } = stats.toJson();
const module = modules.find((m) => m.id === testId);
const evaluatedModule = evaluated(module.source, modules);

expect(evaluatedModule).toMatchSnapshot('module (evaluated)');
expect(evaluatedModule.locals).toMatchSnapshot('locals');
expect(stats.compilation.warnings).toMatchSnapshot('warnings');
expect(stats.compilation.errors).toMatchSnapshot('errors');
});
});

0 comments on commit a0efcda

Please sign in to comment.