How to target an emotion component without styled?

[osdiab]

Is it possible to do what the docs do for styled components, targeting another emotion component from a parent's styles, while exclusively using the css prop? I'd like to just get rid of styled entirely from my codebase but this is the one thing that keeps me from doing it.

For instance, if I have this:

const styleA = css`
  // this is invalid
  ${styleB} {
    font-weight: bold;
  }
`;
const styleB = css``;
function MyComponent() {
  return <div css={styleA}><span css={styleB}></div>
}

I want to make a selector in styleA that targets any child that has styleB. I know I can do this by setting a classname manually on the styleB components and selecting that, but it'd be cool if I didn't have to repeat this logic and also rely on a static name which could have namespace collisions.

I think this might not be possible but putting it out there to see if I'm wrong.

[Andarist]

Let's pretend that this would work:
https://codesandbox.io/s/friendly-pond-6vh23?file=/src/App.js

As you might notice - this would make an arbitrary component to be targeted and we wouldn't even be able to warn you about this.

This would also prevent style composition down the road:
https://codesandbox.io/s/jolly-hawking-gusdb?file=/src/App.js

[osdiab]

makes sense, didn't occur to me that identical styles like that would end up being targeted unexpectedly. While it seems like it wouldn't be impossible to somehow tag the particular css instance to support this usage, i can see how that could make the library code more complex or the potential for subtle issues. Appreciate the rationale!

[ptim]

Necro-reply: I think you could you use a className to target the descendant and avoid using styled...

const styleA = css`
  '.child': {
    font-weight: bold;
  }
`;

function MyComponent() {
  return <div css={styleA}><span className="child"></div>
}