Improve local styled factory parsing

Author: anubra266

plugin/src/utils/helpers.ts

@@ -1,5 +1,6 @@
 import type { RuleContext } from '@typescript-eslint/utils/ts-eslint'
 import type { TSESTree } from '@typescript-eslint/utils'
+import { analyze } from '@typescript-eslint/scope-manager'
 import { type ImportResult, syncAction } from '.'
 import {
   isCallExpression,
@@ -12,7 +13,7 @@ import {
   isJSXMemberExpression,
   isJSXOpeningElement,
   isMemberExpression,
-  isVariableDeclaration,
+  isVariableDeclarator,
   type Node,
 } from './nodes'
 
@@ -74,12 +75,13 @@ const isPandaIsh = (name: string, context: RuleContext<any, any>) => {
 }
 
 const findDeclaration = (name: string, context: RuleContext<any, any>) => {
-  let decl: TSESTree.VariableDeclarator | undefined
-  context.sourceCode.ast.body.forEach((node) => {
-    if (!isVariableDeclaration(node)) return
-    decl = node.declarations.find((decl) => isIdentifier(decl.id) && decl.id.name === name)
+  const scope = analyze(context.sourceCode.ast, {
+    sourceType: 'module',
   })
-  return decl
+  const decl = scope.variables
+    .find((v) => v.name === name)
+    ?.defs.find((d) => isIdentifier(d.name) && d.name.name === name)?.node
+  if (isVariableDeclarator(decl)) return decl
 }
 
 const isLocalStyledFactory = (node: TSESTree.JSXOpeningElement, context: RuleContext<any, any>) => {

plugin/src/utils/nodes.ts

@@ -13,6 +13,8 @@ export const isTemplateLiteral = isNodeOfType(AST_NODE_TYPES.TemplateLiteral)
 
 export const isMemberExpression = isNodeOfType(AST_NODE_TYPES.MemberExpression)
 
+export const isVariableDeclarator = isNodeOfType(AST_NODE_TYPES.VariableDeclarator)
+
 export const isVariableDeclaration = isNodeOfType(AST_NODE_TYPES.VariableDeclaration)
 
 export const isJSXMemberExpression = isNodeOfType(AST_NODE_TYPES.JSXMemberExpression)

plugin/test/no-debug.test.ts

@@ -11,7 +11,7 @@ const valids = [
   'const randomFunc = f({ debug: true })',
   '<NonPandaComponent debug={true} />',
   '<NonPandaComponent debug={true}>content</NonPandaComponent>',
-  `const a = 1; const PandaComp = styled(div); <PandaComp someProp={{ debug: true }} />`,
+  `const PandaComp = styled(div); function App(){ const a = 1;  return (<PandaComp someProp={{ debug: true }} />)}`,
 ]
 
 const invalids = [
@@ -37,6 +37,10 @@ const invalids = [
     code: `const PandaComp = styled(div); <PandaComp css={{ debug: true }} />`,
     output: 'const PandaComp = styled(div); <PandaComp css={{ }} />',
   },
+  {
+    code: `function App(){ const PandaComp = styled(div); return (<PandaComp css={{ debug: true }} />)}`,
+    output: `function App(){ const PandaComp = styled(div); return (<PandaComp css={{ }} />)}`,
+  },
 ]
 
 tester.run(RULE_NAME, rule as any, {