CSS Variables Not Resolved Correctly in Nested Object Mapping

[mengX666]

Describe the bug

When using CSS variables inside a nested object mapping in Compiled, the build output incorrectly doesn't resolve the variables to their correct values. Instead of producing the expected var(--ds-bc) or var(--ds-cb), the output includes the raw variable names, such as --ds-bc or --ds-cb.

Example

CSS Variables Definition:

export const cssVar = {
  color: {
    background: {
      default: '--ds-cb',
      hover: '--ds-cbh',
      active: '--ds-cba',
    },
    borderColor: '--ds-bc',
    focusRing: '--ds-cfr',
    text: {
      default: '--ds-ct',
      hover: '--ds-cth',
      active: '--ds-ctp',
      link: '--ds-ctl',
    },
    removeButton: {
      default: '--ds-rb',
      hover: '--ds-rbh',
    },
  },
  borderRadius: '--ds-br',
};

Usage in Code:

import { css, jsx } from '@compiled/react';
const baseStylesOld = css({
  border-color: `var(${cssVar.color.borderColor})`,
  backgroundColor: `var(${cssVar.color.background.default})`,
});
<span css={[ baseStylesOld, otherStyles ]}>

Expected output

The compiled CSS should resolve to:

._hci618i8 {
  border-color: var(--ds-bc);
}
._10msz9n9 {
  background-color: var(--ds-cb);
}

Actual output

._hci618i8 borderColor {
  border-color: --ds-bc;
}
._10msz9n9 backgroundColor {
  background-color: --ds-cb;
}

See https://app.unpkg.com/@atlaskit/tag@14.0.6/files/dist/esm/tag/internal/shared/base.compiled.css

Additional Information

It seems that CSS variables cannot be correctly resolved when placed in a nested object structure. The variables should be resolved properly in the final compiled CSS.

Environment

Compiled version: 0.18.3

Node.js version: 20.15.1

Proposed fix

Ensure that CSS variables, when used in nested object mappings, are correctly resolved to var(--ds-...) in the output CSS.