fix(babel): support for dynamic keys in objects with css as values

packages/babel/__fixtures__/ts-data.ts

@@ -0,0 +1,4 @@
+export enum TestEnum {
+  FirstValue,
+  SecondValue,
+}

packages/babel/__tests__/__snapshots__/babel.test.ts.snap

@@ -187,6 +187,26 @@ Dependencies: NA
 
 `;
 
+exports[`handles objects with enums as keys 1`] = `
+"import { css } from '@linaria/core';
+import { TestEnum } from './ts-data.ts';
+export const object = {
+  [TestEnum.FirstValue]: \\"t17gu1mi\\",
+  [TestEnum.SecondValue]: \\"tccybe9\\"
+};"
+`;
+
+exports[`handles objects with enums as keys 2`] = `
+
+CSS:
+
+.t17gu1mi {}
+.tccybe9 {}
+
+Dependencies: NA
+
+`;
+
 exports[`handles objects with numeric keys 1`] = `
 "import { css } from '@linaria/core';
 export const object = {

packages/babel/__tests__/babel.test.ts

@@ -504,3 +504,20 @@ it('handles objects with numeric keys', async () => {
   expect(code).toMatchSnapshot();
   expect(metadata).toMatchSnapshot();
 });
+
+it('handles objects with enums as keys', async () => {
+  const { code, metadata } = await transpile(
+    dedent`
+      import { css } from '@linaria/core';
+      import { TestEnum } from './ts-data.ts';
+
+      export const object = {
+        [TestEnum.FirstValue]: css\`\`,
+        [TestEnum.SecondValue]: css\`\`,
+      }
+      `
+  );
+
+  expect(code).toMatchSnapshot();
+  expect(metadata).toMatchSnapshot();
+});

packages/babel/src/visitors/GenerateClassNames.ts

@@ -6,7 +6,7 @@
  */
 
 import { basename, dirname, relative } from 'path';
-import type { TaggedTemplateExpression } from '@babel/types';
+import type { ObjectProperty, TaggedTemplateExpression } from '@babel/types';
 import type { NodePath } from '@babel/traverse';
 import { debug } from '@linaria/logger';
 import type { State, StrictOptions } from '../types';
@@ -54,9 +54,8 @@ export default function GenerateClassNames(
       } else if ('value' in parentNode.key) {
         displayName = parentNode.key.value.toString();
       } else {
-        throw new Error(
-          `Unexpected object property key ${parentNode.key.type}`
-        );
+        const keyPath = (parent as NodePath<ObjectProperty>).get('key');
+        displayName = keyPath.getSource();
       }
     } else if (
       t.isJSXOpeningElement(parentNode) &&