fix(styling-transform): Stencils use the correct variable prefix (#2733)

Fixes the style transform where a Stencil is extending a base Stencil from another package. The wrong prefix was being chosen.

[category:Styling]

modules/styling-transform/lib/utils/parseNodeToStaticValue.ts

@@ -257,10 +257,14 @@ export function getValueFromAliasedSymbol(
     // If there is an aliased symbol and it is a variable declaration, try to resolve the
     if (declaration && hasExpression(declaration)) {
       if (declaration.initializer) {
-        declaration.initializer.getText(); //?
-        transform(declaration.initializer, context);
-
-        return getValueFromProcessedNodes(varName, context);
+        // Update the `prefix` to the alias declaration's source file.
+        const aliasFileContext = {
+          ...context,
+          prefix: context.getPrefix(declaration.getSourceFile().fileName),
+        };
+        transform(declaration.initializer, aliasFileContext);
+
+        return getValueFromProcessedNodes(varName, aliasFileContext);
       }
     }
   }

modules/styling-transform/spec/utils/handleCreateStencil.spec.ts

@@ -662,6 +662,73 @@ describe('handleCreateStencil', () => {
     );
   });
 
+  it('should use the correct prefix in extended stencils when the base stencil is from another prefix', () => {
+    _reset();
+    const styles = {};
+    const program = createProgramFromSource([
+      {
+        filename: 'test.ts',
+        source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
+
+          import {baseStencil} from './base';
+
+          export const extendedStencil = createStencil({
+            extends: baseStencil,
+            vars: {
+              extendedColor: 'blue'
+            },
+            base({color}) {
+              return {
+                [color]: 'blue'
+              }
+            }
+          })
+        `,
+      },
+      {
+        filename: 'base.ts',
+        source: `
+          import {createStencil} from '@workday/canvas-kit-styling';
+
+          export const baseStencil = createStencil({
+            vars: {
+              color: 'red',
+            },
+            base: {
+              padding: 5
+            },
+          });
+
+          const test = createStencil({
+            vars: {
+              foo: 'bar'
+            }
+          }, 'base-base')
+        `,
+      },
+    ]);
+
+    const result = transform(
+      program,
+      'test.ts',
+      withDefaultContext(program.getTypeChecker(), {
+        styles,
+        getPrefix: p => (p.includes('base') ? 'base' : 'css'),
+      })
+    );
+
+    expect(result).toContain(
+      'styles: "--css-extended-extendedColor:blue;box-sizing:border-box;--base-base-color:blue;"'
+    );
+
+    expect(getFile(styles, 'test.css')).toContainEqual(
+      compileCSS(
+        '.css-extended {--css-extended-extendedColor:blue;box-sizing:border-box;--base-base-color:blue;}'
+      )
+    );
+  });
+
   describe('extended stencil', () => {
     let program: ts.Program;
     const styles = {};