Strip styled components referenced in css by not used in the render

[robert-hurst-cmd]

So I originally thought this issue was related to the renaming of child components but after some digging, I noticed this was due to some logic in our button component that would leave some styled-components completely unrendered. These components however are referenced in the CSS of the parent component. Since these children are never in the final dom tree, jest-styled-components cannot get their class names, but because they are referenced in the CSS of the parent component, they show up in the final CSS.

Here's a reproduction case:

const BlueText = styled.div`
  color: blue;
`;
const RedText = styled.div`
  color: red;
`;

const FancyText = styled.div`
  font-size: 16px;

  ${BlueText} {
    text-align: right;
  }
  ${RedText} {
    text-align: center;
  }
`;

const component = (
  <FancyText>
    <BlueText>A container that has styles for an unused child</BlueText>
  </FancyText>
);

And here's the snap:

.c2 {
  color: blue;
}

.c0 {
  font-size: 16px;
}

.c0 .c1 {
  text-align: right;
}

.c0 .sc-fzXfLX {
  text-align: center;
}

<div
  className="c0"
>
  <div
    className="c1 c2"
  >
    A container that has styles for an unused child
  </div>
</div>

As you can see we have a rule referenced for sc-fzXfLX -- the id of the RedText component above. The main issue here is that if the id of RedText changes it will cause the snapshot to fail even if the CSS and HTML is functionally the same.

During this process, I've created a PR to fix this issue here.

[stonebk]

Looks like this was fixed in jest-styled-components@7.0.5 🎉