Fix error when using Angular pipes (#86)

tailwindlabs · Jul 25, 2022 · d6c2229 · d6c2229
1 parent 287d55b
commit d6c2229
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 5 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,6 @@
 import prettier from 'prettier'
 import prettierParserHTML from 'prettier/parser-html'
+import prettierParserAngular from 'prettier/parser-angular'
 import prettierParserPostCSS from 'prettier/parser-postcss'
 import prettierParserBabel from 'prettier/parser-babel'
 import prettierParserEspree from 'prettier/parser-espree'
@@ -177,13 +178,13 @@ function createParser(original, transform) {
         contextMap.set(tailwindConfigPath, { context, hash })
       }
 
-      transform(ast, { env: { context, generateRules } })
+      transform(ast, { env: { context, generateRules, parsers, options } })
       return ast
     },
   }
 }
 
-function transformHtml(attributes, computedAttributes = []) {
+function transformHtml(attributes, computedAttributes = [], computedType = 'js') {
   let transform = (ast, { env }) => {
     for (let attr of ast.attrs ?? []) {
       if (attributes.includes(attr.name)) {
@@ -193,6 +194,24 @@ function transformHtml(attributes, computedAttributes = []) {
           continue
         }
 
+        if (computedType === 'angular') {
+          let directiveAst = prettierParserAngular.parsers.__ng_directive.parse(
+            attr.value,
+            env.parsers,
+            env.options
+          )
+          visit(directiveAst, {
+            StringLiteral(node) {
+              if (!node.value) return
+              attr.value =
+                attr.value.slice(0, node.start + 1) +
+                sortClasses(node.value, { env }) +
+                attr.value.slice(node.end - 1)
+            },
+          })
+          continue
+        }
+
         let ast = recast.parse(`let __prettier_temp__ = ${attr.value}`, {
           parser: prettierParserBabel.parsers['babel-ts'],
         })
@@ -409,7 +428,7 @@ export const parsers = {
   lwc: createParser(prettierParserHTML.parsers.lwc, transformHtml(['class'])),
   angular: createParser(
     prettierParserHTML.parsers.angular,
-    transformHtml(['class'], ['[ngClass]'])
+    transformHtml(['class'], ['[ngClass]'], 'angular')
   ),
   vue: createParser(prettierParserHTML.parsers.vue, transformHtml(['class'], [':class'])),
   css: createParser(prettierParserPostCSS.parsers.css, transformCss),

diff --git a/tests/test.js b/tests/test.js
@@ -158,8 +158,18 @@ let tests = {
   lwc: html,
   vue: [...vue, t`<div :class="\`${yes} \${someVar} ${yes} \${'${yes}'}\`"></div>`],
   angular: [
-    ...vue.map((test) => test.map((t) => t.replace(/:class=/g, '[ngClass]='))),
-    t`<div [ngClass]='\`${yes} \${someVar} ${yes} \${"${yes}"}\`'></div>`,
+    ...html,
+    t`<div [ngClass]="'${yes}'"></div>`,
+    t`<!-- <div [ngClass]="'${no}'"></div> -->`,
+    t`<div [ngClass]></div>`,
+    t`<div [ngClass]=""></div>`,
+    t`<div [ngClass]="'${yes}' + '${yes}'"></div>`,
+    t`<div [ngClass]="['${yes}', '${yes}']"></div>`,
+    t`<div [ngClass]="[cond ? '${yes}' : '${yes}']"></div>`,
+    t`<div [ngClass]="[someVar ?? '${yes}']"></div>`,
+    t`<div [ngClass]="{ '${yes}': true }"></div>`,
+    t`<div [ngClass]="clsx('${yes}')"></div>`,
+    t`<div [ngClass]="{ '${yes}': (some.thing | urlPipe: { option: true } | async), '${yes}': true }"></div>`,
   ],
   css: [...css, t`@apply ${yes} !important;`],
   scss: [...css, t`@apply ${yes} #{!important};`],