From 235a1baec8900cd1d6ea92c5e3ee08c17e8309b0 Mon Sep 17 00:00:00 2001 From: Quinton Chester Date: Thu, 2 Mar 2023 16:22:05 -0600 Subject: [PATCH] :bug: Addresses issue with styled-components and webpack --- .changeset/loud-cups-promise.md | 6 ++++++ packages/connect-wallet/package.json | 2 -- .../src/components/ConnectButton/style.ts | 3 +-- .../src/components/ConnectorButton/style.ts | 3 +-- .../src/components/ConnectorIcon/style.ts | 2 +- .../src/components/GetAConnectorButton/style.ts | 2 +- packages/connect-wallet/src/components/Modal/style.ts | 4 ++-- packages/connect-wallet/src/components/QRCode/style.ts | 3 ++- packages/connect-wallet/tsup.config.ts | 2 +- packages/shared/src/components/Button/style.ts | 3 +-- packages/shared/src/components/IconButton/style.ts | 2 +- .../SkeletonDisplayText/SkeletonDisplayText.tsx | 2 +- .../components/SkeletonThumbnail/SkeletonThumbnail.tsx | 2 +- packages/shared/src/components/Spinner/style.ts | 2 +- packages/shared/src/components/Text/style.ts | 3 +-- packages/shared/src/index.ts | 1 + packages/shared/src/styles/sharedStyles.ts | 3 +-- packages/shared/src/styles/styled.ts | 10 ++++++++++ packages/shared/src/types/theme.ts | 3 ++- packages/shared/styled.d.ts | 2 -- packages/tokengate/package.json | 4 +--- packages/tokengate/src/components/Card/style.ts | 2 +- packages/tokengate/src/components/Error/style.ts | 2 +- .../tokengate/src/components/SoldOutButton/style.ts | 2 +- packages/tokengate/src/components/TokenBase/style.ts | 3 +-- packages/tokengate/src/components/TokenList/style.ts | 2 +- .../components/Tokengate/stories/playground/style.ts | 2 +- .../src/components/TokengateRequirements/style.ts | 2 +- packages/tokengate/tsup.config.ts | 2 +- 29 files changed, 44 insertions(+), 37 deletions(-) create mode 100644 .changeset/loud-cups-promise.md create mode 100644 packages/shared/src/styles/styled.ts diff --git a/.changeset/loud-cups-promise.md b/.changeset/loud-cups-promise.md new file mode 100644 index 00000000..bd82480e --- /dev/null +++ b/.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. diff --git a/packages/connect-wallet/package.json b/packages/connect-wallet/package.json index d6fc6707..03cdd94d 100644 --- a/packages/connect-wallet/package.json +++ b/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", diff --git a/packages/connect-wallet/src/components/ConnectButton/style.ts b/packages/connect-wallet/src/components/ConnectButton/style.ts index 3f7f0564..961f1ba9 100644 --- a/packages/connect-wallet/src/components/ConnectButton/style.ts +++ b/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; diff --git a/packages/connect-wallet/src/components/ConnectorButton/style.ts b/packages/connect-wallet/src/components/ConnectorButton/style.ts index 8e978cb8..ee5fec3a 100644 --- a/packages/connect-wallet/src/components/ConnectorButton/style.ts +++ b/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; diff --git a/packages/connect-wallet/src/components/ConnectorIcon/style.ts b/packages/connect-wallet/src/components/ConnectorIcon/style.ts index b8fe03d9..0d3994bf 100644 --- a/packages/connect-wallet/src/components/ConnectorIcon/style.ts +++ b/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'; diff --git a/packages/connect-wallet/src/components/GetAConnectorButton/style.ts b/packages/connect-wallet/src/components/GetAConnectorButton/style.ts index 851a380b..8a1aab91 100644 --- a/packages/connect-wallet/src/components/GetAConnectorButton/style.ts +++ b/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; diff --git a/packages/connect-wallet/src/components/Modal/style.ts b/packages/connect-wallet/src/components/Modal/style.ts index cf4d31ef..ef01cb57 100644 --- a/packages/connect-wallet/src/components/Modal/style.ts +++ b/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; diff --git a/packages/connect-wallet/src/components/QRCode/style.ts b/packages/connect-wallet/src/components/QRCode/style.ts index 18f83f11..cb8fb7fa 100644 --- a/packages/connect-wallet/src/components/QRCode/style.ts +++ b/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}; diff --git a/packages/connect-wallet/tsup.config.ts b/packages/connect-wallet/tsup.config.ts index cd0b0b28..06eb7fb2 100644 --- a/packages/connect-wallet/tsup.config.ts +++ b/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', diff --git a/packages/shared/src/components/Button/style.ts b/packages/shared/src/components/Button/style.ts index eb566308..771fc055 100644 --- a/packages/shared/src/components/Button/style.ts +++ b/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'; diff --git a/packages/shared/src/components/IconButton/style.ts b/packages/shared/src/components/IconButton/style.ts index 1af352d4..8170dfa1 100644 --- a/packages/shared/src/components/IconButton/style.ts +++ b/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; diff --git a/packages/shared/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx b/packages/shared/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx index 41416f62..8ae14e2c 100644 --- a/packages/shared/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx +++ b/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; diff --git a/packages/shared/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx b/packages/shared/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx index 8fb3a6a9..6aeb5099 100644 --- a/packages/shared/src/components/SkeletonThumbnail/SkeletonThumbnail.tsx +++ b/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; diff --git a/packages/shared/src/components/Spinner/style.ts b/packages/shared/src/components/Spinner/style.ts index 87868fc6..e9311f8b 100644 --- a/packages/shared/src/components/Spinner/style.ts +++ b/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 { diff --git a/packages/shared/src/components/Text/style.ts b/packages/shared/src/components/Text/style.ts index 2e5865e7..6814c248 100644 --- a/packages/shared/src/components/Text/style.ts +++ b/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'; diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts index 9c7e6cc8..25d7d7a9 100644 --- a/packages/shared/src/index.ts +++ b/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 diff --git a/packages/shared/src/styles/sharedStyles.ts b/packages/shared/src/styles/sharedStyles.ts index 933708d8..3fdd96e2 100644 --- a/packages/shared/src/styles/sharedStyles.ts +++ b/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 diff --git a/packages/shared/src/styles/styled.ts b/packages/shared/src/styles/styled.ts new file mode 100644 index 00000000..e2141f5d --- /dev/null +++ b/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; diff --git a/packages/shared/src/types/theme.ts b/packages/shared/src/types/theme.ts index ad8acc51..11eeee4a 100644 --- a/packages/shared/src/types/theme.ts +++ b/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; diff --git a/packages/shared/styled.d.ts b/packages/shared/styled.d.ts index a1cad33c..e6b5b54d 100644 --- a/packages/shared/styled.d.ts +++ b/packages/shared/styled.d.ts @@ -1,5 +1,3 @@ -import styled from 'styled-components'; - import {Theme} from './src/types/theme'; declare module 'styled-components' { diff --git a/packages/tokengate/package.json b/packages/tokengate/package.json index 5d177145..4af89bf1 100644 --- a/packages/tokengate/package.json +++ b/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": "*", diff --git a/packages/tokengate/src/components/Card/style.ts b/packages/tokengate/src/components/Card/style.ts index 82293a24..c5965cd6 100644 --- a/packages/tokengate/src/components/Card/style.ts +++ b/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}; diff --git a/packages/tokengate/src/components/Error/style.ts b/packages/tokengate/src/components/Error/style.ts index e0c2ce12..3486c250 100644 --- a/packages/tokengate/src/components/Error/style.ts +++ b/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 { diff --git a/packages/tokengate/src/components/SoldOutButton/style.ts b/packages/tokengate/src/components/SoldOutButton/style.ts index 48236a7d..ecef6af0 100644 --- a/packages/tokengate/src/components/SoldOutButton/style.ts +++ b/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%; diff --git a/packages/tokengate/src/components/TokenBase/style.ts b/packages/tokengate/src/components/TokenBase/style.ts index e6c7d976..f2b0fbc8 100644 --- a/packages/tokengate/src/components/TokenBase/style.ts +++ b/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; diff --git a/packages/tokengate/src/components/TokenList/style.ts b/packages/tokengate/src/components/TokenList/style.ts index fad918d2..e75e476f 100644 --- a/packages/tokengate/src/components/TokenList/style.ts +++ b/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%; diff --git a/packages/tokengate/src/components/Tokengate/stories/playground/style.ts b/packages/tokengate/src/components/Tokengate/stories/playground/style.ts index 84ccd855..7b0257b3 100644 --- a/packages/tokengate/src/components/Tokengate/stories/playground/style.ts +++ b/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; diff --git a/packages/tokengate/src/components/TokengateRequirements/style.ts b/packages/tokengate/src/components/TokengateRequirements/style.ts index 2b28d546..cabeba90 100644 --- a/packages/tokengate/src/components/TokengateRequirements/style.ts +++ b/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; diff --git a/packages/tokengate/tsup.config.ts b/packages/tokengate/tsup.config.ts index 3286adb9..cdfc60fa 100644 --- a/packages/tokengate/tsup.config.ts +++ b/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',