Emotion: Emotion add useless classes (didn't exist in DOM)

[Alex-Ferreli]

• emotion version: 7.0.12
• react version: 16.0.0-beta.5

Relevant code.

const HeaderCellABIValue = styled('div') `
    background-color: #336699;
    color: #fff;
    border-left: 1px #eaeaea solid;
    border-bottom: 1px #eaeaea solid;
    height: 40px;
    text-align: center;
`

What you did:
I expect that 1 class is added to the DOM element:

<div class="css-19ra1kn"></div>

What happened:

<div class="css-gb10pj2 css-19ra1kn"></div>

I got 2 class instead of 1. Only css-19ra1kn exist in the DOM and have the rules.
css-gb10pj2 didn't exist. As i can see, emotion create 1 class composed like this:
css-gb10pj + the incremental index of all styled components created.

I think that class could be removed. Or i'm missing something?

Thanks in advance!

[mitchellhamilton]

The extra class is required for using components as selectors. This is because we don't know what the hash will be for the class with styles before the component is rendered since the styles could be based on props.
``jsx const SomeComponent = styled.div
display: ${props => props.display};
const SomeOtherComponent = styled.main
background-color: hotpink;
${SomeComponent} {
color: aqua;
}
`

[tkh44]

@mitchellhamilton would it be hard to give these meaningful names like we had in v6?

[Alex-Ferreli]

Thanks for the fast reply.

Sorry for the issue but i didn't know it. I will close it then.

[mitchellhamilton]

@tkh44 It would be very easy.