Handle memberExpression as css property (#1538)

* Handle memberExpression as css property * Fix prettier * Fix formatting of module-traversal.test.ts * Add changeset --------- Co-authored-by: Grant Wong <[email protected]>
atlassian-labs · Oct 24, 2023 · 4a11c5f · 4a11c5f
1 parent f8d01fa
commit 4a11c5f
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 3 deletions.
diff --git a/.changeset/violet-spiders-help.md b/.changeset/violet-spiders-help.md
@@ -0,0 +1,5 @@
+---
+'@compiled/babel-plugin': patch
+---
+
+Bugfix: handle memberExpression as CSS object property
diff --git a/packages/babel-plugin/src/__fixtures__/mixins/objects.js b/packages/babel-plugin/src/__fixtures__/mixins/objects.js
@@ -67,3 +67,9 @@ export const cssCallExpressionMixin = {
     color: 'red',
   }),
 };
+
+export const cssPropertyNames = {
+  level1: {
+    level2: 'color',
+  },
+};
diff --git a/packages/babel-plugin/src/__tests__/module-traversal.test.ts b/packages/babel-plugin/src/__tests__/module-traversal.test.ts
@@ -634,5 +634,16 @@ describe('module traversal', () => {
 
       expect(actual).toIncludeMultiple(['{color:red}', '{display:flex}', '{flex-direction:row}']);
     });
+
+    it('should resolve member expression if used as CSS property', () => {
+      const actual = transform(`
+        import '@compiled/react';
+        import { cssPropertyNames } from '../__fixtures__/mixins/objects';
+
+        <div css={{ [cssPropertyNames.level1.level2]: 'blue' }} />
+      `);
+
+      expect(actual).toInclude('{color:blue}');
+    });
   });
 });
diff --git a/packages/babel-plugin/src/utils/object-property-to-string.ts b/packages/babel-plugin/src/utils/object-property-to-string.ts
@@ -53,11 +53,15 @@ const expressionToString: ExpressionToString = (expression, meta) => {
   if (t.isStringLiteral(expression) || t.isNumericLiteral(expression)) {
     return String(expression.value);
   }
-  // handles {[key]: 'value'}
-  if (t.isIdentifier(expression)) {
+  // handles {[key]: 'value'} and {[key.key]: 'value'}]}
+  if (t.isIdentifier(expression) || t.isMemberExpression(expression)) {
     const evaluatedExpression = evaluateExpression(expression, meta);
     if (evaluatedExpression.value === expression) {
-      throw new Error(`Cannot statically evaluate the value of "${expression.name}".`);
+      throw new Error(
+        `Cannot statically evaluate the value of "${
+          t.isIdentifier(expression) ? expression.name : expression.type
+        }`
+      );
     }
 
     return expressionToString(evaluatedExpression.value, evaluatedExpression.meta);