Allow &-nesting of element name

[awdyson]

It seems as though nesting with & just concatenates whatever follows the ampersand.
So { root: { '&a': { backgroundColor: ... } } } becomes:

It'd be nice to be able to & element names as well.

[awdyson]

Also, I'm realizing that an empty class is created.
Is that something that's cleaned up in production mode? Or maybe a shortcoming of emotion?
If not, seems like something to optimize.

[garronej]

Thank you for reporting,
I will investigate although this is more likely to be related to emotion.
When you type this: { root: { '&a': { backgroundColor: ... } } } you want that the backgroundColor only apply if the element the class is apply to is an <a> am I correct? Like:

<div className={classes.roo} /> //Dosen't applies
<a className={classes.root} /> //Applies

[garronej]

I released a new version.
Is this by any chance related to your problem?

[awdyson]

It isn't, but it's nice to know that I can use dynamic names like that.

My issue stems from a quirk of MUI + ReactRouter.
This is part of the process of using the <List> components in a custom <SubNav>:

<ListItemButton
  component={forwardRef<HTMLAnchorElement>((itemProps, ref) => (
    <NavLink
      activeClassName={classes.active} // this appears before ListItemButton's style

That said, I was able to get around this using '&[href]' to add specificity.
I just figured it was worth noting that &-element references weren't being handled as I'd expect, to the point where I questioned whether &-non-pseudo worked.

[garronej]

Ok, thanks for the detailed explanation.
I'll close for now as I have no way to fix it myself. :/
Maybe it would be worth opening an issue on the emotion repo...

PS: As you mentioned ReactRouter maybe you'd like to checkout type-route, I love this lib!

[awdyson]

<a {...routes.fooBar().link}>Foo Bar</a>
Ooo, that is a nice solution.
I'm enjoying the surge of headless UI kits.

[garronej]

Hi @awdyson,
I am sorry I had to update the API for nested selector. The approach based on css was broken.
https://github.com/garronej/tss-react#selecting-children-by-class-name