Merge branch 'add-custom-styles-stories' of https://github.com/RayRed…

…Goose/canvas-kit into add-custom-styles-stories
Workday · May 21, 2024 · b387369 · b387369
2 parents c686975 + cb6488b
commit b387369
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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} => {