fix: avoid all escaped characters replaced

Author: alreadyExisted

src/utils.js

@@ -88,10 +88,7 @@ function getLocalIdent(loaderContext, localIdentName, localName, options) {
     options
   );
 
-  return hash
-    .replace(/\\@/g, '@')
-    .replace(new RegExp('[^a-zA-Z0-9@\\-_\u00A0-\uFFFF]', 'g'), '-')
-    .replace(/^((-?[0-9])|--)/, '_$1');
+  return normalizeIdentifier(hash);
 }
 
 function getFilter(filter, resourcePath, defaultFilter = null) {
@@ -108,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,

test/__snapshots__/localIdentName-option.test.js.snap

@@ -39,6 +39,11 @@ Array [
 :local(.m_x_\\\\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\\\\&W\\\\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }",
     "",
   ],
@@ -86,6 +91,11 @@ Array [
 :local(.m_x_\\\\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\\\\&W\\\\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }",
     "",
   ],
@@ -133,6 +143,11 @@ Array [
 :local(.m_x_\\\\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\\\\&W\\\\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }",
     "",
   ],
@@ -180,6 +195,11 @@ Array [
 :local(.m_x_\\\\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\\\\&W\\\\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }",
     "",
   ],
@@ -227,6 +247,11 @@ Array [
 :local(.m_x_\\\\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\\\\&W\\\\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }",
     "",
   ],
@@ -274,6 +299,11 @@ Array [
 :local(.m_x_\\\\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\\\\&W\\\\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }",
     "",
   ],
@@ -321,6 +351,11 @@ Array [
 :local(.m_x_\\\\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\\\\&W\\\\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }",
     "",
   ],
@@ -329,11 +364,75 @@ Array [
 
 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 []`;
+
 exports[`localIdentName option should сorrectly replace symbol @ in selector: errors 1`] = `Array []`;
 
 exports[`localIdentName option should сorrectly replace symbol @ 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",
@@ -375,7 +474,12 @@ Array [
   color: red;
 }
 
-.m_x_@--2G3b {
+.m_x_\\\\@--2G3b {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.B\\\\&W\\\\?--1s8i {
   margin-left: auto !important;
   margin-right: auto !important;
 }",

test/fixtures/modules/localIdentName.css

@@ -29,4 +29,9 @@
 :local(.m_x_\@) {
   margin-left: auto !important;
   margin-right: auto !important;
+}
+
+:local(.B\&W\?) {
+  margin-left: auto !important;
+  margin-right: auto !important;
 }

test/localIdentName-option.test.js

@@ -118,7 +118,7 @@ describe('localIdentName option', () => {
     expect(stats.compilation.errors).toMatchSnapshot('errors');
   });
 
-  it('should сorrectly replace symbol @ in selector', async () => {
+  it('should сorrectly replace escaped symbols in selector', async () => {
     const config = {
       loader: {
         options: {
@@ -134,8 +134,6 @@ describe('localIdentName option', () => {
     const module = modules.find((m) => m.id === testId);
     const evaluatedModule = evaluated(module.source, modules);
 
-    expect(evaluatedModule.locals['m_x_@']).toContain('m_x_@');
-
     expect(evaluatedModule).toMatchSnapshot('module (evaluated)');
     expect(evaluatedModule.locals).toMatchSnapshot('locals');
     expect(stats.compilation.warnings).toMatchSnapshot('warnings');