🐛 Addresses issue with styled-components and webpack

.changeset/loud-cups-promise.md

@@ -0,0 +1,6 @@
+---
+'@shopify/connect-wallet': patch
+'@shopify/tokengate': patch
+---
+
+Addresses an issue with styled components and CJS support. Since the packages support ESM, some frameworks (Next.js) will try to transpile the packages and use a CommonJS version of styled-components we needed to re-export styled-components with a .default key for CJS support.

packages/connect-wallet/package.json

@@ -47,7 +47,6 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "siwe": "^1.1.6",
-    "styled-components": "^5.3.6",
     "ua-parser-js": "^1.0.32"
   },
   "peerDependencies": {
@@ -61,7 +60,6 @@
     "@testing-library/react": "^13.4.0",
     "@types/qrcode": "^1.5.0",
     "@types/redux-logger": "^3.0.9",
-    "@types/styled-components": "^5.1.26",
     "@types/ua-parser-js": "^0.7.36",
     "@wagmi/core": "0.8.10",
     "happy-dom": "^8.7.1",

packages/connect-wallet/src/components/ConnectButton/style.ts

@@ -1,5 +1,4 @@
-import {breakpoints, ButtonWrapper} from 'shared';
-import styled from 'styled-components';
+import {breakpoints, ButtonWrapper, styled} from 'shared';
 
 export const AddressChip = styled.button`
   appearance: none;

packages/connect-wallet/src/components/ConnectorButton/style.ts

@@ -1,5 +1,4 @@
-import styled from 'styled-components';
-import {ButtonWrapper} from 'shared';
+import {ButtonWrapper, styled} from 'shared';
 
 export const Button = styled(ButtonWrapper)`
   display: flex;

packages/connect-wallet/src/components/ConnectorIcon/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 import {Size} from '../../types/sizes';
 

packages/connect-wallet/src/components/GetAConnectorButton/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 export const Wrapper = styled.div`
   display: flex;

packages/connect-wallet/src/components/Modal/style.ts

@@ -1,5 +1,5 @@
-import styled, {CSSProperties} from 'styled-components';
-import {breakpoints} from 'shared';
+import {CSSProperties} from 'react';
+import {breakpoints, styled} from 'shared';
 
 export const Background = styled.div`
   position: absolute;

packages/connect-wallet/src/components/QRCode/style.ts

@@ -1,4 +1,5 @@
-import styled, {CSSProperties} from 'styled-components';
+import {CSSProperties} from 'react';
+import {styled} from 'shared';
 
 export const Circle = styled.circle`
   fill: ${({theme}) => theme.typography.colorPrimary};

packages/connect-wallet/tsup.config.ts

@@ -3,7 +3,7 @@ import {defineConfig, Options} from 'tsup';
 
 const BASE_CONFIG: Options = {
   entry: ['./src/index.ts'],
-  external: ['ethers', 'react', 'styled-components', 'wagmi'],
+  external: ['ethers', 'react', 'wagmi'],
   format: ['esm'],
   platform: 'browser',
   target: 'esnext',

packages/shared/src/components/Button/style.ts

@@ -1,5 +1,4 @@
-import styled, {css} from 'styled-components';
-
+import styled, {css} from '../../styles/styled';
 import {ThemedCSS} from '../../types/theme';
 
 import {Size} from './types';

packages/shared/src/components/IconButton/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '../../styles/styled';
 
 export const StyledButton = styled.button`
   display: flex;

packages/shared/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '../../styles/styled';
 
 export const SkeletonDisplayText = styled.div`
   background-color: #e4e5e7;

packages/shared/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from '../../styles/styled';
 
 export const SkeletonThumbnail = styled.div<{size?: number}>`
   background-color: #e4e5e7;

packages/shared/src/components/Spinner/style.ts

@@ -1,4 +1,4 @@
-import styled, {keyframes} from 'styled-components';
+import styled, {keyframes} from '../../styles/styled';
 
 const spinAnimation = keyframes`
     to {

packages/shared/src/components/Text/style.ts

@@ -1,5 +1,4 @@
-import styled, {css} from 'styled-components';
-
+import styled, {css} from '../../styles/styled';
 import {ThemedCSS} from '../../types/theme';
 
 import {Color, Variant} from './types';

packages/shared/src/index.ts

@@ -31,6 +31,7 @@ export {RootProvider} from './providers/RootProvider';
  */
 export {breakpoints, device} from './styles/breakpoints';
 export {NonEmptyElement} from './styles/sharedStyles';
+export {default as styled, css, keyframes} from './styles/styled';
 
 /**
  * Themes

packages/shared/src/styles/sharedStyles.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
-import {createGlobalStyle, css} from 'styled-components';
+import {createGlobalStyle, css} from './styled';
 
 /**
  * We restrict the use of `createGlobalStyle` because it affects all elements

packages/shared/src/styles/styled.ts

@@ -0,0 +1,10 @@
+/* eslint-disable no-restricted-imports */
+import styled, {StyledInterface} from 'styled-components';
+
+export * from 'styled-components';
+
+export default (typeof styled.div === 'function'
+  ? styled
+  : // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    styled.default) as StyledInterface;

packages/shared/src/types/theme.ts

@@ -1,9 +1,10 @@
 import {PropsWithChildren} from 'react';
+
 import {
   CSSProperties,
   FlattenInterpolation,
   ThemeProps as StyledThemeProps,
-} from 'styled-components';
+} from '../styles/styled';
 
 type RequiredCSSProperty = Required<CSSProperties>;
 

packages/shared/styled.d.ts

@@ -1,5 +1,3 @@
-import styled from 'styled-components';
-
 import {Theme} from './src/types/theme';
 
 declare module 'styled-components' {

packages/tokengate/package.json

@@ -43,12 +43,10 @@
     "i18next": "^22.4.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^12.1.4",
-    "styled-components": "^5.3.6"
+    "react-i18next": "^12.1.4"
   },
   "devDependencies": {
     "@storybook/react": "^6.5.13",
-    "@types/styled-components": "^5.1.26",
     "@testing-library/react": "^13.4.0",
     "shared": "*",
     "tsconfig": "*",

packages/tokengate/src/components/Card/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 export const StyledCard = styled.div`
   background-color: ${({theme}) => theme.tokengate.background};

packages/tokengate/src/components/Error/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 export const Wrapper = styled.div`
   p {

packages/tokengate/src/components/SoldOutButton/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 export const Wrapper = styled.div`
   width: 100%;

packages/tokengate/src/components/TokenBase/style.ts

@@ -1,5 +1,4 @@
-import {SkeletonThumbnail} from 'shared';
-import styled from 'styled-components';
+import {SkeletonThumbnail, styled} from 'shared';
 
 export const TokenBaseStyle = styled.div`
   display: flex;

packages/tokengate/src/components/TokenList/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 export const TokenListImageStyle = styled.img`
   width: 100%;

packages/tokengate/src/components/Tokengate/stories/playground/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 export const Wrapper = styled.div`
   display: flex;

packages/tokengate/src/components/TokengateRequirements/style.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import {styled} from 'shared';
 
 export const TokengateRequirementsSeparatorStyle = styled.div<{$gap: string}>`
   display: flex;

packages/tokengate/tsup.config.ts

@@ -3,7 +3,7 @@ import {defineConfig, Options} from 'tsup';
 
 const BASE_CONFIG: Options = {
   entry: ['./src/index.ts'],
-  external: ['react', 'styled-components'],
+  external: ['react'],
   format: ['esm', 'cjs'],
   platform: 'browser',
   target: 'esnext',