diff --git a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts b/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts index a137246a03..dcb949701d 100644 --- a/modules/styling-transform/lib/utils/parseNodeToStaticValue.ts +++ b/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); } } } diff --git a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts b/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts index 22e63462a9..98b5fca86b 100644 --- a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts +++ b/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 = {};