From 6cf5850e58edf2678b2d28034216ff856e085998 Mon Sep 17 00:00:00 2001
From: Nicholas Boll <nicholas.boll@gmail.com>
Date: Wed, 6 Nov 2024 15:11:20 -0700
Subject: [PATCH] fix: Fix Style transform stencil variable lookup (#3038)

Fix variable lookups in Stencils during static style transformation.

[category:Infrastructure]
---
 .../styling-transform/lib/utils/handleCreateStencil.ts    | 6 +++---
 .../styling-transform/lib/utils/parseNodeToStaticValue.ts | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/modules/styling-transform/lib/utils/handleCreateStencil.ts b/modules/styling-transform/lib/utils/handleCreateStencil.ts
index 7b7ed4f558..89fc302d71 100644
--- a/modules/styling-transform/lib/utils/handleCreateStencil.ts
+++ b/modules/styling-transform/lib/utils/handleCreateStencil.ts
@@ -341,7 +341,7 @@ function parseStyleBlock(
     if (ts.isObjectLiteralExpression(property.initializer)) {
       styleObj = parseObjectToStaticValue(property.initializer, {
         ...context,
-        nameScope: `${stencilName}.`,
+        nameScope: `${stencilName}.vars.`,
       });
     }
 
@@ -350,7 +350,7 @@ function parseStyleBlock(
       if (returnNode) {
         styleObj = parseObjectToStaticValue(returnNode, {
           ...context,
-          nameScope: `${stencilName}.`,
+          nameScope: `${stencilName}.vars.`,
         });
       }
     }
@@ -361,7 +361,7 @@ function parseStyleBlock(
     if (returnNode) {
       styleObj = parseObjectToStaticValue(returnNode, {
         ...context,
-        nameScope: `${stencilName}.`,
+        nameScope: `${stencilName}.vars.`,
       });
     }
   }
diff --git a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts b/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
index e4bc76aaf3..1c9bd8b276 100644
--- a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
+++ b/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts
@@ -274,13 +274,13 @@ export function getValueFromAliasedSymbol(
 function getValueFromProcessedNodes(varName: string, context: TransformerContext): string | void {
   const {names} = context;
 
-  if (names[varName]) {
-    return names[varName];
-  }
-
   if (context.nameScope && names[`${context.nameScope}${varName}`]) {
     return names[`${context.nameScope}${varName}`];
   }
+
+  if (names[varName]) {
+    return names[varName];
+  }
 }
 
 function hasExpression(node: ts.Node): node is ts.Node & {initializer: ts.Expression} {