Fix: get values even if they have some line breaks and whitespaces

JPeer264 · Nov 12, 2020 · 0537718 · 0537718
1 parent af50ba1
commit 0537718
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 6 deletions.
diff --git a/__tests__/replace.html.ts b/__tests__/replace.html.ts
@@ -274,3 +274,19 @@ it('should replace vue class bindings | issue gulp-rcs#14', () => {
     `,
   );
 });
+
+it('should replace line breaks | issue rename-css-selectors#70', () => {
+  replaceHtmlMacro(
+    '.container {} .text-center {} .d-flex {} .flex-column {} .justify-content-center {} .align-items-center {} .align-content-center {} .ct-fluid {}',
+    `
+      <div class="container text-center d-flex flex-column justify-content-center align-items-center
+          align-content-center ct-fluid">
+      </div>
+    `,
+    `
+      <div class="a b c d e f
+          g h">
+      </div>
+    `,
+  );
+});
diff --git a/__tests__/selectorsLibrary.ts b/__tests__/selectorsLibrary.ts
@@ -45,6 +45,21 @@ it('get | should not get any', () => {
   expect(selector).toBe('nothing-to-get');
 });
 
+it('get | should get a value with line breaks and whitespace', () => {
+  rcs.selectorsLibrary.set('.test');
+
+  expect(rcs.selectorsLibrary.get('.test\n')).toBe('a\n');
+  expect(rcs.selectorsLibrary.get('.test  ')).toBe('a  ');
+  expect(rcs.selectorsLibrary.get('   .test\n')).toBe('   a\n');
+  expect(rcs.selectorsLibrary.get(`
+    .test
+
+  `)).toBe(`
+    a
+
+  `);
+});
+
 it('get | should not get any excludeList selector', () => {
   rcs.selectorsLibrary.set('.test');
   rcs.selectorsLibrary.set('.header');

diff --git a/lib/selectorsLibrary.ts b/lib/selectorsLibrary.ts
@@ -127,19 +127,31 @@ export class SelectorsLibrary extends BaseLibrary {
   }
 
   get(value: string, opts: BaseLibraryOptions = {}): string {
-    const hasType = AttributeLibrary.isSelector(value);
+    const stringifyLineBreaks = value.replace(/\n/g, '\\n');
+    const [beginningWhitespace] = stringifyLineBreaks.match(/^(\\.| )+/) || [''];
+    const [endWhitespace] = stringifyLineBreaks.match(/(\\.| )+$/) || [''];
+    const modifiedValue = stringifyLineBreaks.replace(beginningWhitespace, '').replace(endWhitespace, '');
+    const hasType = AttributeLibrary.isSelector(modifiedValue);
+
+    const reconstructValue = (v: string): string => (
+      (beginningWhitespace + v + endWhitespace).replace(/\\n/g, '\n')
+    );
 
     if (!hasType) {
-      const ret = this.selectors[0].get(value, opts);
+      const ret = this.selectors[0].get(modifiedValue, opts);
 
-      return ret === value ? this.selectors[1].get(value, opts) : ret;
+      return reconstructValue((
+        ret === modifiedValue
+          ? this.selectors[1].get(modifiedValue, opts)
+          : ret
+      ));
     }
 
-    if (this.selectors[0].isValidSelector(value)) {
-      return this.selectors[0].get(value, opts);
+    if (this.selectors[0].isValidSelector(modifiedValue)) {
+      return reconstructValue(this.selectors[0].get(modifiedValue, opts));
     }
 
-    return this.selectors[1].get(value, opts);
+    return reconstructValue(this.selectors[1].get(modifiedValue, opts));
   }
 
   // If it's reserved in any case, consider it reserved everywhere