From 48f9234cb2c6eaa82b57201ea15bd852b12c7d4c Mon Sep 17 00:00:00 2001
From: Nicholas Boll <nicholas.boll@gmail.com>
Date: Tue, 21 May 2024 14:11:06 -0600
Subject: [PATCH] fix: Support shorthand properties in Stencils (#2752)

Support shorthand properties in Stencils for variables.

[category:Styling]
---
 .../lib/utils/parseObjectToStaticValue.ts     |  9 +++++
 .../spec/utils/handleCreateStencil.spec.ts    | 40 +++++++++++++++++++
 .../utils/parseObjectToStaticValue.spec.ts    | 20 ++++++++++
 3 files changed, 69 insertions(+)

diff --git a/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts b/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
index 99cf64dba2..af4ed5fb28 100644
--- a/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
+++ b/modules/styling-transform/lib/utils/parseObjectToStaticValue.ts
@@ -105,6 +105,15 @@ function parsePropertyToStaticValue(node: ts.Node, context: TransformerContext):
     }
   }
 
+  // { name }
+  if (ts.isShorthandPropertyAssignment(node)) {
+    const key = node.name.text;
+
+    styleObj[key] = parseNodeToStaticValue(node.name, context).toString() || '';
+
+    return styleObj;
+  }
+
   // { ...value }
   if (ts.isSpreadAssignment(node)) {
     // Spread assignments are a bit complicated to use the AST to figure out, so we'll ask the
diff --git a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts b/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
index 985a2f9a4a..3d71e360f2 100644
--- a/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
+++ b/modules/styling-transform/spec/utils/handleCreateStencil.spec.ts
@@ -353,6 +353,46 @@ describe('handleCreateStencil', () => {
       );
     });
 
+    it('should handle parsing variables in base styles via a MethodDeclaration with a ShorthandPropertyAssignment', () => {
+      const program = createProgramFromSource(`
+        import {createStencil} from '@workday/canvas-kit-styling';
+
+        const buttonStencil = createStencil({
+          vars: {
+            color: 'red'
+          },
+          base({color}) {
+            return {
+              color,
+              padding: 12
+            }
+          }
+        })
+      `);
+
+      const names = {};
+      const styles = {};
+
+      const result = transform(
+        program,
+        'test.ts',
+        withDefaultContext(program.getTypeChecker(), {styles, names})
+      );
+
+      expect(result).toContain(
+        `${names['buttonStencil.vars.color']}:red;box-sizing:border-box;color:var(${names['buttonStencil.vars.color']});padding:12px;`
+      );
+
+      expect(styles['test.css']).toContainEqual(
+        compileCSS(`.css-button {
+          --css-button-color: red;
+          box-sizing: border-box;
+          color: var(--css-button-color);
+          padding: 12px;
+        }`)
+      );
+    });
+
     it('should handle parsing modifiers with ObjectLiteralExpressions', () => {
       const program = createProgramFromSource(`
         import {createStencil, parentModifier} from '@workday/canvas-kit-styling';
diff --git a/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts b/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
index 50157febcf..7327180d06 100644
--- a/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
+++ b/modules/styling-transform/spec/utils/parseObjectToStaticValue.spec.ts
@@ -161,6 +161,26 @@ describe('parseObjectToStaticValue', () => {
     });
   });
 
+  it('should handle a ShorthandPropertyAssignment when the Identifier is a known name', () => {
+    const program = createProgramFromSource(`
+      const foo = {
+        margin,
+      }
+    `);
+
+    const sourceFile = program.getSourceFile('test.ts')!;
+    const node = findNodes(sourceFile, '', ts.isObjectLiteralExpression)![0];
+
+    expect(
+      parseObjectToStaticValue(
+        node,
+        withDefaultContext(program.getTypeChecker(), {names: {margin: '12px'}})
+      )
+    ).toEqual({
+      margin: '12px',
+    });
+  });
+
   it('should return the result of the spread operator with a call expression that can return a statically analyzed return', () => {
     const program = createProgramFromSource(`
       const makeFontSize = <T extends string>(input: T): { fontSize: T} => {