Styled-components v3 dependency in Atlaskit is causing problems

I was using styled-components v4 with Atlaskit successfully so far, but unfortunately today I hit the wall when trying to use @atlaskit/flag.
You can see the problem here:

Any ideas how to work around this issue?

I’ve noticed that there is a task for this. It says that styled-components will be replaced by another CSSinJS solution. Unfortunately there were no updates recently. @dmorrow can you help here? :slight_smile:

Hi @Grzegorz.Tanczyk,

I’m not sure, but I’ve asked someone to help. Please let me know if you don’t receive a response.



Hi @Grzegorz.Tanczyk,

You are running into this issue because @atlaskit/flag has a peer-dependency on styled-components version 3.2.6. That version is not compatible v4.

We are currently working on a separate effort to improve the performance of @atlaskit/flag. As part of this effort, we are replacing the styled-components with Emotion (see below). This would remove the peer-dependency on the CSS-in-JS library that is used internally.
We expect this to take a couple of weeks based on our estimations. Once refactor is done, you’ll no longer have the issue.

For now though, you can get around this problem by using styled-components v3.2.6. I cloned your code-sandbox and downgraded the version of styled-components and everything works as expected. You can check it out here

As for – we are settling for Emotion for now, but we are exploring other options that might provide better performance. But we don’t have any concrete plans or timelines on when that would happen.

Hope that answers your question. Apologies for any inconvenience.



Thanks for the update, I will eagerly wait for improved version of atlaskit/flag. Meanwhile I need to use my own simplified implementation, because I can’t downgrade to styled components v3 for other reasons.