Css classes are not splitted to treat output CSS effectively

After reading documentation and googling I nowhere found, how to make Emotion effective and split produced css code.

Version of Emotion: I have this issue on latest v 10.

Repro steps: I have component like this:

import styled from '@emotion/styled'

const StyledInput = styled.input`
  box-sizing: border-box;
  border: slim;
  border-color: red;
  color: ${(props: any) => myfunction(props.color || 'black')};
  width: 100%;
`

And I use it two times like this:

<StyledInput color="red" />
<StyledInput color="green" />

Current CSS output:

.class1 {
  box-sizing: border-box;
  border: slim;
  border-color: red;
  color: red;
  width: 100%;
}
.class2 {
  box-sizing: border-box;
  border: slim;
  border-color: green;
  color: red;
  width: 100%;
}

Expected CSS output:

.commonClass {
  box-sizing: border-box;
  border: slim;
  border-color: red;
  width: 100%;
}
.class1 {
  color: red;
}
.class2 {
  color: red;
}

[Andarist]

Sub and SubInRed are treated as completely separate components - each has its own unique class name and thus they SubInRed won’t be targeted by Title’s styles.

Technically we maybe could change this behavior, but I’m not convinced that we should. You could raise a separate issue about this so we could discuss this - we are working on v11 so this potentially could make it into that release, although keep in mind that we probably won’t decide to support this.

[tomchentw]

@Andarist my expectation would be :

1. SubInRed will inherit the class name from Sub
2. Hence, the adjacent selector in Title will turn on Sub’s display attribute.

Instead, I got:

1. SubInRed will NOT inherit any class name from Sub.
2. The adjacent selector in Title will not affect SubInRed.

Previously this will work with the library where I came from (linaria). But from reading your comment above in this issue, I think this was the expected behavior by design. <- I just want to confirm this with you.

Thanks!