diff --git a/__tests__/replace.html.ts b/__tests__/replace.html.ts index b61ada7..873cf00 100644 --- 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 {}', + ` +
+
+ `, + ` +
+
+ `, + ); +}); diff --git a/__tests__/selectorsLibrary.ts b/__tests__/selectorsLibrary.ts index 86df0c6..d9ebce1 100644 --- 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 index 2f29fc1..583c626 100644 --- 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