🐛 Addresses issue with styled-components and webpack

[QuintonC]

ℹ️ What is the context for these changes?

Addresses an issue with styled-components and webpack. The problem occurs when styled-components is used inside of an ESM only package that is used within a webpack-based bundler (e.g. CRA + Next.js).

ESM allows for importing in the syntax we're all familiar with. However, the ESM support that Next.js ships with still utilizes require instead of import. This means that the compiled styled-components code will look like styled.default.span rather than styled.span, which is why you see the error demonstrated in the before section below.

There are other approaches to resolving this which I considered, but decided against since they require more lift, such as:

• Upgrading to an alpha package of Styled Components (Version 6 is supposed to ship with ESM support, however when testing V6 I ran into type mismatching and other weird behavior.
• Using a different styling library (TailwindCSS, Vanilla Extract, CSS Modules)

To explain the solution here, what I've effectively done is re-exported styled-components with a "hacky" way of providing backwards-compatible CJS/ESM support. You can read more about this approach here. You can see this implementation here.

🕹️ Demonstration

State	Image
Before
After

🎩 How can this be tophatted?

To test this, you will need a Next.js app to test with

1. Pull this PR
2. Install dependencies, build the packages, and then link the package dev up && yarn build && cd packages/connect-wallet && yarn link
3. Navigate to your Next.js test application and run the following: yarn link "@shopify/connect-wallet"
4. Run your application and you should see a Wagmi error (temporary)

✅ Checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility N/A
• Includes unit tests N/A
• Updated relevant documentation for the changes (if necessary) N/A

[QuintonC]

/snapit

[github-actions]

🫰✨ Thanks @QuintonC! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[jamiely]

We've discussed this change offline. I'm good with this change. Tophatted on desktop using MetaMask extension.