Styles finding their way into completely unrelated components

[abubakir1997]

Environment

System:

• OS: macOS 11.2.3
• CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
• Memory: 113.60 MB / 8.00 GB
• Shell: 5.8 - /bin/zsh

Binaries:

• Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
• Yarn: 1.22.10 - ~/.nvm/versions/node/v12.21.0/bin/yarn
• npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm

Reproduction

I recently divided my project into a monorepo using lerna and yarn workspaces. I am running styled-components: 5.2.3 along with react: 17.0.1 and react-dom: 17.0.1. After switching to a monorepo a weird bug occurred where styles from another styled component were finding their way into another component that has no connection. This is a simple example of what is happening.

const StyledComponentA = styled.div`
  background: red;
`

const StyledComponentB = styled.span`
  font-size: 14px;
`

Locally everything works as expected, but when I build for production and deploy my application for some reason the styles for StyledComponentA find their way into StyledComponentB. Below is the exact code that is facing the issue:

The above image shows two components that live inside a shared package used by the client side and the server.

The above image shows two client side components that are getting effected by the components in the shared package

A screenshot of the UI in development (locally)

A screenshot of the same UI in production

The above two images shows how the styles are somehow getting injected (in production)

Expected Behavior

Styles should only effect their respective components.

Actual Behavior

Styles getting injected into another component that has no remote connection.

Just to clarify further this happens only to one component (as far as I can tell) and only in production.

[abubakir1997]

Using the component FormGroup with css for the max-width: 100% style instead of using styled(FormGroup) works as expected. So the issue is definitely with styled-components

[balthazar]

I'm experiencing something similar, was quite unsure as to what was happening.

[balthazar]

For people who want a quick fix: you should use version 5.1.1, installing anything after makes the bug appear

[balthazar]

Pinging @probablyup for visibility

[quantizor]

Really need a reproduction to even begin to help

[dylanmrowe]

We were seeing the same thing on styled-components v5.1.0. Components, seemingly at random, would get injected with styles that we didn't specify. It worked fine locally but doing a production build (using next build) broke things.

Refreshing the page would sometimes manifest the issue, sometimes not.

Using:
NextJS 9.5.2
@material-ui/core 4.11.0
Node 12.x
react 16.13.1

We had to downgrade to v4.4.1 to fix the issue.

[dcorb]

In our case, replacing the fragment wrapper <><StyledComponent /></> with <div></div> helped.
This ticket is difficult to find because it's very difficult to describe. I'm sure there are many others experiencing this issue.
Our component:

<>
      {expiration > 0 && expiration < 50000 && (
        <StyledExpirationMessage>foo</StyledExpirationMessage>
      )}
      {expiration <= 0 && (
        <StyledExpirationMessage type="error">bar</StyledExpirationMessage>
      )}
    </>

Could be that sometimes this component will return an empty fragment <></>? Messing up styled-components logic?, and it assigns the styles to the next sibling?
Keywords : wtf, leaking styles, random component receiving styles, showing up somewhere else

[quantizor]

This is often due to multiple versions of s-c being bundled. If you use yarn I highly recommend setting up a resolutions entry (see the yarn section): https://styled-components.com/docs/basics#installation

[dcorb]

Thanks Evan. npm ls styled-components says only 1 version, 4.4.1 .
I edited my previous comment, I think occasionally returning empty fragments could be the root issue?

[andywampir]

If you using babel-plugin-styled-components namespace might help you, in my case it's worked
I made for each components unique namespace

[kitten]

Closing due to missing reproduction

[jcrben]

Note for those running into an issue like this: 5.3.1 fixed my issue of wrong styles applied when built but not in dev (while running 5.2.3) perhaps due to #3553