Match tagged template literals with tag expressions

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Don't move partial classes inside Liquid script attributes ([#164](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/164))
 - Do not split classes by non-ASCII whitespace ([#166](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/166))
+- Match tagged template literals with tag expressions ([#169](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/pull/169))
 
 ## [0.3.0] - 2023-05-15
 

src/index.js

@@ -168,10 +168,7 @@ function transformDynamicJsAttribute(attr, env) {
     },
 
     visitTaggedTemplateExpression(path) {
-      if (
-        path.node.tag.type === 'Identifier' &&
-        functions.has(path.node.tag.name)
-      ) {
+      if (isSortableTemplateExpression(path.node, functions)) {
         if (sortTemplateLiteral(path.node.quasi, { env })) {
           didChange = true
         }
@@ -445,6 +442,33 @@ function sortTemplateLiteral(node, { env }) {
   return didChange
 }
 
+/**
+ *
+ * @param {import('@babel/types').TaggedTemplateExpression | import('ast-types').namedTypes.TaggedTemplateExpression} node
+ * @param {Set<string>} functions
+ * @returns {boolean}
+ */
+function isSortableTemplateExpression(node, functions) {
+  if (node.tag.type === 'Identifier') {
+    return functions.has(node.tag.name)
+  }
+
+  if (node.tag.type === 'MemberExpression') {
+    let expr = node.tag.object
+
+    // If the tag is a MemberExpression we should traverse all MemberExpression's until we find the leading Identifier
+    while (expr.type === 'MemberExpression') {
+      expr = expr.object
+    }
+
+    if (expr.type === 'Identifier') {
+      return functions.has(expr.name)
+    }
+  }
+
+  return false
+}
+
 /**
  * @param {import('@babel/types').Node} ast
  * @param {TransformerContext} param1
@@ -460,7 +484,7 @@ function transformJavaScript(ast, { env }) {
       } else if (node.type === 'TemplateLiteral') {
         sortTemplateLiteral(node, { env })
       } else if (node.type === 'TaggedTemplateExpression') {
-        if (node.tag.type === 'Identifier' && functions.has(node.tag.name)) {
+        if (isSortableTemplateExpression(node, functions)) {
           sortTemplateLiteral(node.quasi, { env })
         }
       }
@@ -500,7 +524,7 @@ function transformJavaScript(ast, { env }) {
 
     /** @param {import('@babel/types').TaggedTemplateExpression} node */
     TaggedTemplateExpression(node) {
-      if (node.tag.type !== 'Identifier' || !functions.has(node.tag.name)) {
+      if (!isSortableTemplateExpression(node, functions)) {
         return
       }
 

tests/fixtures/custom-jsx/index.jsx

@@ -6,6 +6,10 @@ const b = sortMeFn({
 const c = dontSortFn("sm:p-1 p-2");
 const d = sortMeTemplate`sm:p-1 p-2`;
 const e = dontSortMeTemplate`sm:p-1 p-2`;
+const f = tw.foo`sm:p-1 p-2`;
+const g = tw.foo.bar`sm:p-1 p-2`;
+const h = no.foo`sm:p-1 p-2`;
+const i = no.tw`sm:p-1 p-2`;
 
 const A = (props) => <div className={props.sortMe} />;
 const B = () => <A sortMe="sm:p-1 p-2" dontSort="sm:p-1 p-2" />;

tests/fixtures/custom-jsx/prettier.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  tailwindFunctions: ['sortMeFn', 'sortMeTemplate'],
+  tailwindFunctions: ['sortMeFn', 'sortMeTemplate', 'tw'],
   tailwindAttributes: ['sortMe'],
 };

tests/test.js

@@ -348,6 +348,10 @@ const b = sortMeFn({
 const c = dontSortFn("sm:p-1 p-2");
 const d = sortMeTemplate\`p-2 sm:p-1\`;
 const e = dontSortMeTemplate\`sm:p-1 p-2\`;
+const f = tw.foo\`p-2 sm:p-1\`;
+const g = tw.foo.bar\`p-2 sm:p-1\`;
+const h = no.foo\`sm:p-1 p-2\`;
+const i = no.tw\`sm:p-1 p-2\`;
 
 const A = (props) => <div className={props.sortMe} />;
 const B = () => <A sortMe="p-2 sm:p-1" dontSort="sm:p-1 p-2" />;`,