4.3.3 breaking with 3.0.2 of styled-system

[jsms90]

Thanks for all your work on this library 😄 We're using it in our open source application 😍 but unfortunately our layout has broken when we updated our dependencies. You can see the full investigation around the bug in this issue: elifesciences/elife-xpub#500

The breakage seems to occur because of version 3.0.2 of styled-system (anything below version 3 seems fine).

---

For a blow-by-blow:

We went from version 4.1.0 of grid-styled to version 4.3.3. This, of course, set of a chain reaction of dependency updates.

The chain that caused the breakage is through grid-styled version 4.3.3's new dependency: "clean-tag": "^1.0.3" -> "clean-tag": "^1.0.4".

So the actual clean-tag version updated from 1.0.4 to 1.1.0.

Version 1.1.0 of clean-tag depends on a new version of styled-system:
"styled-system": ">=2.0.0 || >=3.0.0"

And styled-system went from version 2.2.5 to version 3.0.2.

There have been 2 occasions in our app's git history, where this update has kicked in & both times, styled-system version 3.0.2 has caused the same layout breakage.

My feeling is that this line in clean-tag's package.json: "styled-system": ">=2.0.0 || >=3.0.0" may be a mistake? So I've raised an issue on that repo - styled-system/styled-system#269

But I thought it would also be worth raising here?

---

I'm not sure, but I also wondered whether that line could have been the underlying cause behind issue #130 ("4.3.2 breaking with publish of system-components 3.0.0 ")?

After all, version 3.0.0 of system-components also relies on "styled-system": "^3.0.1"

[jxnblk]

Thanks! I know the dependency chain is a little messed up, but was wondering if you've tried the latest version (5.0.2) – there aren't a lot of breaking changes and it removes the clean-tag dependency. Might be worth chiming in on styled-system/styled-system#267 as well

[jsms90]

Heya 😄

We hadn't tried out 5.0.2 yet, after seeing the issue about it breaking with enzyme -#132

To be honest, this is the first thing that's caused me to look at the internals of grid-styled & know anything about all of these dependencies. I reckon I'm a little too new to the things that grid-styled is based on to really comment. For example, we've not touched the is prop, although I've seen a few issues about it now that I've been poking around in the repos.

All I will say is that I have experienced some of the issues that your top comment says this would fix 👍

[hem-brahmbhatt]

We fixed this for now by using resolutions within our package.json: elifesciences/elife-xpub#515

[jxnblk]

I've tried to fix some of the issues like this, and the next major version is a significant change internally. Please open a new issue if you're still encountering problems with the latest versions