Skip to content

Conversation

gribnoysup
Copy link
Collaborator

Having multiple instances of leafygreen components (and as such multiple instances of emotion) running on the same page seems to cause issues for emotion, resulting in styles applied on the page out of expected order, this was causing noticeable problems in e.g., TextInput component:

Screenshot 2021-08-26 at 17 35 41

The fix is to dedupe the emotion instances so that only one emotion is evaluated on the page. This PR sets all leafygreen components as peer dependencies in plugins, which automatically excludes them from the webpack build. This allows them all to use the same version of the library required from the same location in runtime and resolves the issue:

Screenshot 2021-08-26 at 18 28 40

Setting them as peerDeps excludes them from the plugin webpack build so
that they all can require the same version from the same location installed
by compass in runtime
@gribnoysup gribnoysup merged commit 96a6062 into main Aug 27, 2021
@gribnoysup gribnoysup deleted the dedupe-all-leafygreen-components branch August 27, 2021 08:13
gribnoysup added a commit that referenced this pull request Aug 27, 2021
* fix: Dedupe all leafygreen components across compass plugins

Setting them as peerDeps excludes them from the plugin webpack build so
that they all can require the same version from the same location installed
by compass in runtime

* fix(mongodb-compass): Include all the leafygreen peer dependencies in depcheckrc

* fix: No need to commit this one-shot script
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant