Add support for callable template literals

Author: dimitribarbot

src/index.ts

@@ -596,6 +596,19 @@ function isSortableTemplateExpression(
     }
   }
 
+  if (node.tag.type === 'CallExpression') {
+    let expr = node.tag.callee
+
+    // If the tag is a CallExpression we should traverse all CallExpression's until we find the leading Identifier
+    while (expr.type === 'CallExpression') {
+      expr = expr.callee
+    }
+
+    if (expr.type === 'Identifier') {
+      return functions.has(expr.name)
+    }
+  }
+
   return false
 }
 
@@ -626,6 +639,19 @@ function isSortableCallExpression(
     }
   }
 
+  if (node.callee.type === 'CallExpression') {
+    let expr = node.callee.callee
+
+    // If the tag is a CallExpression we should traverse all CallExpression's until we find the leading Identifier
+    while (expr.type === 'CallExpression') {
+      expr = expr.callee
+    }
+
+    if (expr.type === 'Identifier') {
+      return functions.has(expr.name)
+    }
+  }
+
   return false
 }
 

tests/fixtures/custom-jsx/index.jsx

@@ -14,6 +14,14 @@ const k = tw.foo('sm:p-1 p-2');
 const l = tw.foo.bar('sm:p-1 p-2');
 const m = no.foo('sm:p-1 p-2');
 const n = no.tw('sm:p-1 p-2');
+const o = tw(Foo)`sm:p-1 p-2`;
+const p = tw(Foo)(Bar)`sm:p-1 p-2`;
+const q = no(Foo)`sm:p-1 p-2`;
+const r = no.tw(Foo)`sm:p-1 p-2`;
+const s = tw(Foo)('sm:p-1 p-2');
+const t = tw(Foo)(Bar)('sm:p-1 p-2');
+const u = no(Foo)('sm:p-1 p-2');
+const v = no.tw(Foo)('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/output.jsx

@@ -14,6 +14,14 @@ const k = tw.foo("p-2 sm:p-1");
 const l = tw.foo.bar("p-2 sm:p-1");
 const m = no.foo("sm:p-1 p-2");
 const n = no.tw("sm:p-1 p-2");
+const o = tw(Foo)`p-2 sm:p-1`;
+const p = tw(Foo)(Bar)`p-2 sm:p-1`;
+const q = no(Foo)`sm:p-1 p-2`;
+const r = no.tw(Foo)`sm:p-1 p-2`;
+const s = tw(Foo)("p-2 sm:p-1");
+const t = tw(Foo)(Bar)("p-2 sm:p-1");
+const u = no(Foo)("sm:p-1 p-2");
+const v = no.tw(Foo)("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" />;