Fix angular expression parsing with concat statements

Author: thecrypticace

src/index.ts

@@ -109,30 +109,23 @@ function transformDynamicAngularAttribute(attr: any, env: TransformerEnv) {
     StringLiteral(node, path) {
       if (!node.value) return
 
-      let concat = path.find((entry) => {
-        return entry.parent && entry.parent.type === 'BinaryExpression' && entry.parent.operator === '+'
-      })
+      let collapseWhitespace = canCollapseWhitespaceIn(path)
 
       changes.push({
         start: node.start + 1,
         end: node.end - 1,
         before: node.value,
         after: sortClasses(node.value, {
           env,
-          collapseWhitespace: {
-            start: concat?.key !== 'right',
-            end: concat?.key !== 'left',
-          },
+          collapseWhitespace,
         }),
       })
     },
 
     TemplateLiteral(node, path) {
       if (!node.quasis.length) return
 
-      let concat = path.find((entry) => {
-        return entry.parent && entry.parent.type === 'BinaryExpression' && entry.parent.operator === '+'
-      })
+      let collapseWhitespace = canCollapseWhitespaceIn(path)
 
       for (let i = 0; i < node.quasis.length; i++) {
         let quasi = node.quasis[i]
@@ -720,16 +713,11 @@ function transformJavaScript(ast: import('@babel/types').Node, { env }: Transfor
         return
       }
 
-      let concat = path.find((entry) => {
-        return entry.parent && entry.parent.type === 'BinaryExpression' && entry.parent.operator === '+'
-      })
+      let collapseWhitespace = canCollapseWhitespaceIn(path)
 
       sortTemplateLiteral(node.quasi, {
         env,
-        collapseWhitespace: {
-          start: concat?.key !== 'right',
-          end: concat?.key !== 'left',
-        },
+        collapseWhitespace,
       })
     },
   })

tests/format.test.ts

@@ -66,6 +66,14 @@ describe('whitespace', () => {
     expect(result).toEqual(";<div className={a + ' p-4 ' + b}></div>")
   })
 
+  test('whitespace is not trimmed inside concat expressions (angular)', async ({ expect }) => {
+    let result = await format(`<ul [class]="'pagination' + (size ? ' pagination-' + size : '')"></ul>`, {
+      parser: 'angular',
+    })
+
+    expect(result).toEqual(`<ul [class]="'pagination' + (size ? ' pagination-' + size : '')"></ul>`)
+  })
+
   test('whitespace is not trimmed inside adjacent-before/after template expressions', async ({ expect }) => {
     let result = await format(";<div className={`header${isExtendable ? ' header-extendable' : ''}`} />", {
       parser: 'babel',

tests/tests.ts

@@ -208,7 +208,7 @@ export let tests: Record<string, TestEntry[]> = {
 
     [
       `<div [ngClass]="' flex ' + ' underline ' + ' block '"></div>`,
-      `<div [ngClass]="'flex ' + ' underline' + ' block'"></div>`,
+      `<div [ngClass]="'flex ' + ' underline ' + ' block'"></div>`,
     ],
 
     // TODO: Enable this test — it causes console noise but not a failure
@@ -238,7 +238,7 @@ export let tests: Record<string, TestEntry[]> = {
     ...css,
     t`@apply ${yes} !important;`,
     t`@apply ~"${yes}";`,
-    t`@apply ~'${yes}';`
+    t`@apply ~'${yes}';`,
   ],
   babel: javascript,
   typescript: javascript,