Support curried HOCs in customHOCs option

src/only-export-components.test.ts

@@ -201,6 +201,21 @@ const valid = [
     code: "const MyComponent = () => {}; export default observer(MyComponent);",
     options: [{ customHOCs: ["observer"] }],
   },
+  {
+    name: "Curried HOC with styled (object form)",
+    code: "export const Flex = styled('div')({display: 'flex'});",
+    options: [{ customHOCs: ["styled"] }],
+  },
+  {
+    name: "Curried HOC with styled (template literal form)",
+    code: "export const Flex = styled('div')`display: flex;`;",
+    options: [{ customHOCs: ["styled"] }],
+  },
+  {
+    name: "Curried HOC only first call",
+    code: "export const Flex = styled('div');",
+    options: [{ customHOCs: ["styled"] }],
+  },
   {
     name: "Local constant with component casing and non component function",
     code: "const SomeConstant = 42; export function someUtility() { return SomeConstant }",

src/only-export-components.ts

@@ -82,11 +82,18 @@ export const onlyExportComponents: TSESLint.RuleModule<
       if (!init) return false;
       const jsInit = skipTSWrapper(init);
       if (jsInit.type === "ArrowFunctionExpression") return true;
-      if (
-        jsInit.type === "CallExpression"
-        && jsInit.callee.type === "Identifier"
-      ) {
-        return reactHOCs.includes(jsInit.callee.name);
+      if (jsInit.type === "CallExpression") {
+        // memo(...)
+        if (jsInit.callee.type === "Identifier") {
+          return reactHOCs.includes(jsInit.callee.name);
+        }
+        // Curried HOC: styled('div')({...})
+        if (
+          jsInit.callee.type === "CallExpression"
+          && jsInit.callee.callee.type === "Identifier"
+        ) {
+          return reactHOCs.includes(jsInit.callee.callee.name);
+        }
       }
       return false;
     };