use nesting classes with @emotion/css

[mh-alahdadian]

Hi
I am using @emotion/css and I wants to use nesting selectors feature but bellow code is not working

const Title = css``;
const Container = css`
${Title}: {
}
`;

because Title is the className string and needs a . before className so I need to add dot manually like this

const Title = css``;
const Container = css`
.${Title}: {
}
`;

Is there a way to handle this automatically with babel-macro version ?
thanks in advance

[Andarist]

In general, we do not recommend this because we believe that styles nesting is very often a maintainability problem in the long run. So there is nothing to make interpolating class names like this easier.

In fact, this might break very easily if you are using cx:

<div className={Container}>
  <h1 className={cx(Title, otherStyles)} />
</div>

In here, the h1 would not be targeted with your nested styles because the resulting className would not contain Title class name directly (a new class name would be created that would contain the styles from the Title class name)

[WalterWeidner]

@Andarist I just ran into the problem that you pointed out in your comment above.

So is the alternative to just conditionally apply more classes? How would that work with something like the following:
[`&:not(:last-of-type) .${someOtherClass}`]: {

Another alternative could be to use classnames instead of cx but that's an annoying thing to remember to do. Is it frowned on to do composition like above and just not make use of cx? Maybe I am missing something here.

Also, it might be helpful to add a note to the documentation so others avoid this pitfall (unless I just missed it).

[WalterWeidner]

Leaving this for anyone that runs into this thread in the future:

One reason why it isn't safe to do something like [`& .${child1}`] in Emotion is because the same class name could be generated by other code using the same arguments passed to css.

For example:

const child1 = css({
  color: "orange"
});

const parent1 = css({
  [`& .${child1}`]: {
    backgroundColor: "gray"
  }
});

const child2 = css({
  color: "orange"
});

If child1 and child2 ever share the same parent with the parent1 class. The elements with child2 would be incorrectly styled. This is because both child1 and child2 would actually have the same class name. You can see an example of this here.

[WalterWeidner]

While I am a fan of making styles granular, this does seem to restrict language features of CSS. I am still not clear on how you would be able to leverage pseudo classes inside of child nodes (like :last-child) other than being forced to handle it with JavaScript.