Emotion generating n different classes not having a common class based on props

Hi I’m rendering a list of items with background color as props.

const Thumbnail = styled.div<{ url: string }>`
  background-color: url('${props => props.color}');
  border-radius: 2px;
  height: 104px;
  margin-bottom: 8px;
  width: calc(33.33% - 5px);
`;

used as

<Thumbnail url={img.thumbnailLink} key={index} />

Emotion generates entirely different classes for all the Thumbnail components, is it the expected behaviour, what I was expecting was emotion generating 2 classes here One for the common styles

  border-radius: 2px;
  height: 104px;
  margin-bottom: 8px;
  width: calc(33.33% - 5px)

and one based on prop value

background-color: red

Any help will be appreciated

[Andarist]

Yes, both classes would have common properties but it doesn’t mean that contents of both would appear anywhere in the code unless you are talking about SSRed output. I don’t see this really as much of an issue - compression should deal with those nicely and usually when SSRing you don’t necessarily produce tons of different rules, sure - there are some, but only what is actually used by the current SSRed screen, nothing more than that.

[Andarist]

It is expected and it lets us overcome “insertion order problem” which is described here: https://emotion.sh/docs/composition