Targeting Components/CSS Behaves Inconsistently

[joe-bell]

Is your feature request related to a problem? Please describe.

With the styled API, you can target other components like so:

const Icon = styled("svg", {});

const Button = styled('button', {
  [`& ${Icon}`]: {
    marginLeft: '5px',
  },
});

With the css API, you must manually append the . class selector:

const icon = css({});

const button = css({
  [`& .${icon}`]: {
    marginLeft: '5px',
  },
});

Describe the solution you'd like

I understand the logic behind this given that css is more class focussed, but I would've expected it to behave in the same way as the styled API – others might also get a little stumped by this

const icon = css({});

const button = css({
  [`& ${icon}`]: {
    marginLeft: '5px',
  },
});

Describe alternatives you've considered Either that, or some documentation around the differences between the two APIs would be appreciated ❤️

Additional context N/A

[peduarte]

Thanks Joe <3

I agree that, ideally, it would be great if could work in a consistent way. We've tried, but not succeeded yet, due to the reasons you mentioned.

For now, I'll mark this as a documentation-related issue.

Thanks!