use styled-components/macro to display className in dev builds (#1541)

babel-plugin-macros.config.js

+const isDev = process.env.NODE_ENV !== 'production'
+
+module.exports = {
+  styledComponents: {
+    fileName: isDev,
+    displayName: isDev,
+  },
+}

src/components/AccountDetails/Copy.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useCopyClipboard from '../../hooks/useCopyClipboard'
 
 import { LinkStyledButton } from '../../theme'

src/components/AccountDetails/Transaction.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { CheckCircle, Triangle } from 'react-feather'
 
 import { useActiveWeb3React } from '../../hooks'

src/components/Badge/RangeBadge.tsx

 import React from 'react'
 
 import Badge, { BadgeVariant } from 'components/Badge'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { MouseoverTooltip } from '../../components/Tooltip'
 import { useTranslation } from 'react-i18next'

src/components/Button/Button.stories.tsx

 import { Story } from '@storybook/react/types-6-0'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import React from 'react'
 import {
   ButtonConfirmed,

src/components/Button/index.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { darken } from 'polished'
 
 import { RowBetween } from '../Row'

src/components/Card/index.tsx

-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
 
 const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>`

src/components/Column/index.tsx

-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const Column = styled.div`
   display: flex;

src/components/CurrencyInputPanel/index.tsx

 import { Pair } from '@uniswap/v2-sdk'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import React, { useState, useCallback } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'

src/components/CurrencyLogo/index.tsx

 import { ChainId, Currency } from '@uniswap/sdk-core'
 import React, { useMemo } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
 import useHttpLocations from '../../hooks/useHttpLocations'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'

src/components/DoubleLogo/index.tsx

 import { Currency } from '@uniswap/sdk-core'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import CurrencyLogo from '../CurrencyLogo'
 
 const Wrapper = styled.div<{ margin: boolean; sizeraw: number }>`

src/components/ErrorBoundary/index.tsx

@@ -2,7 +2,7 @@ import React, { ErrorInfo } from 'react'
 import store, { AppState } from '../../state'
 import { ExternalLink, ThemedBackground, TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
 import { getUserAgent } from '../../utils/getUserAgent'
 import { AutoRow } from '../Row'

src/components/FeeSelector/index.tsx

@@ -6,7 +6,7 @@ import { DynamicSection } from 'pages/AddLiquidity/styled'
 import { TYPE } from 'theme'
 import { RowBetween } from 'components/Row'
 import { ButtonRadioChecked } from 'components/Button'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const ResponsiveText = styled(TYPE.label)`
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/components/Header/URLWarning.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { AlertTriangle, X } from 'react-feather'
 import { useURLWarningToggle, useURLWarningVisible } from '../../state/user/hooks'

src/components/Header/UniBalanceContent.tsx

 import { ChainId, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import React, { useMemo } from 'react'
 import { X } from 'react-feather'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import tokenLogo from '../../assets/images/token-logo.png'
 import { UNI } from '../../constants'
 import { useTotalSupply } from '../../hooks/useTotalSupply'

src/components/Header/index.tsx

@@ -6,7 +6,7 @@ import { NavLink } from 'react-router-dom'
 import { darken } from 'polished'
 import { useTranslation } from 'react-i18next'
 import { Moon, Sun } from 'react-feather'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import Logo from '../../assets/svg/logo.svg'
 import LogoDark from '../../assets/svg/logo_white.svg'

src/components/HoverInlineText/index.tsx

 import Tooltip from 'components/Tooltip'
 import React, { useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const TextWrapper = styled.span<{ margin: boolean; link?: boolean; fontSize?: string; adjustSize?: boolean }>`
   cursor: auto;

src/components/Identicon/index.tsx

 import React, { useEffect, useRef } from 'react'
 
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { useActiveWeb3React } from '../../hooks'
 import Jazzicon from 'jazzicon'

src/components/LineChart/LineChart.stories.tsx

 import { Story } from '@storybook/react/types-6-0'
 import React from 'react'
 // import Row, { RowFixed } from 'components/Row'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Component, { LineChartProps } from './'
 import { dummyData } from './data'
 // import { AutoColumn } from 'components/Column'

src/components/LineChart/index.tsx

@@ -3,7 +3,7 @@ import { createChart, IChartApi } from 'lightweight-charts'
 import { darken } from 'polished'
 import { RowBetween } from 'components/Row'
 import Card from '../Card'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useTheme from 'hooks/useTheme'
 
 const Wrapper = styled(Card)`

src/components/ListLogo/index.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useHttpLocations from '../../hooks/useHttpLocations'
 
 import Logo from '../Logo'

src/components/Menu/Menu.stories.tsx

 import { Story } from '@storybook/react/types-6-0'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Component from './index'
 
 const Wrapper = styled.div`

src/components/NavigationTabs/index.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { useTranslation } from 'react-i18next'
 import { NavLink, Link as HistoryLink } from 'react-router-dom'

src/components/NumericalInput/index.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { escapeRegExp } from '../../utils'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`

src/components/Popover/index.tsx

@@ -2,7 +2,7 @@ import { Placement } from '@popperjs/core'
 import { transparentize } from 'polished'
 import React, { useCallback, useState } from 'react'
 import { usePopper } from 'react-popper'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useInterval from '../../hooks/useInterval'
 import Portal from '@reach/portal'
 

src/components/Popups/ListUpdatePopup.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react'
 import ReactGA from 'react-ga'
 import { useDispatch } from 'react-redux'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AppDispatch } from '../../state'
 import { useRemovePopup } from '../../state/application/hooks'
 import { acceptListUpdate } from '../../state/lists/actions'

src/components/Popups/index.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useActivePopups } from '../../state/application/hooks'
 import { AutoColumn } from '../Column'
 import PopupItem from './PopupItem'

src/components/PositionCard/Sushi.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Token } from '@uniswap/sdk-core'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { unwrappedToken } from '../../utils/wrappedCurrency'
 import { ButtonEmpty } from '../Button'

src/components/PositionCard/V2.tsx

@@ -5,7 +5,7 @@ import { Pair } from '@uniswap/v2-sdk'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 
 import { useActiveWeb3React } from '../../hooks'

src/components/PositionCard/index.tsx

@@ -6,7 +6,7 @@ import React, { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 
 import { useActiveWeb3React } from '../../hooks'

src/components/PositionList/index.tsx

 import PositionListItem from 'components/PositionListItem'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
 import { PositionDetails } from 'types/position'
 

src/components/PositionListItem/index.tsx

@@ -5,7 +5,7 @@ import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { usePool } from 'hooks/usePools'
 import { useToken } from 'hooks/Tokens'
 import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
 import { PositionDetails } from 'types/position'
 import { WETH9, Price, Token, Percent } from '@uniswap/sdk-core'

src/components/ProgressSteps/index.tsx

 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 import { ThemeContext } from 'styled-components'
 import { TYPE } from '../../theme'

src/components/QuestionHelper/index.tsx

 import React, { useCallback, useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Tooltip from '../Tooltip'
 
 const QuestionWrapper = styled.div`

src/components/Row/index.tsx

-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
 
 const Row = styled(Box)<{

src/components/SearchModal/CommonBases.tsx

 import React from 'react'
 import { Text } from 'rebass'
 import { ChainId, Currency, currencyEquals, Token, ETHER } from '@uniswap/sdk-core'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { SUGGESTED_BASES } from '../../constants'
 import { AutoColumn } from '../Column'

src/components/SearchModal/CurrencyList.tsx

@@ -2,7 +2,7 @@ import { Currency, CurrencyAmount, currencyEquals, Token } from '@uniswap/sdk-co
 import React, { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useActiveWeb3React } from '../../hooks'
 import { useCombinedActiveList } from '../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'

src/components/SearchModal/CurrencySearch.tsx

@@ -16,7 +16,7 @@ import { filterTokens, useSortedTokensByQuery } from './filtering'
 import { useTokenComparator } from './sorting'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
 import AutoSizer from 'react-virtualized-auto-sizer'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useToggle from 'hooks/useToggle'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'

src/components/SearchModal/ImportList.tsx

 import React, { useState, useCallback } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
 import { TYPE, CloseIcon } from 'theme'
 import Card from 'components/Card'

src/components/SearchModal/ImportRow.tsx

@@ -7,7 +7,7 @@ import { TYPE } from 'theme'
 import ListLogo from 'components/ListLogo'
 import useTheme from 'hooks/useTheme'
 import { ButtonPrimary } from 'components/Button'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useIsUserAddedToken, useIsTokenActive } from 'hooks/Tokens'
 import { CheckCircle } from 'react-feather'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'

src/components/SearchModal/ImportToken.tsx

 import { TokenList } from '@uniswap/token-lists/dist/types'
 import React from 'react'
 import { Token, Currency } from '@uniswap/sdk-core'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE, CloseIcon } from 'theme'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'

src/components/SearchModal/Manage.tsx

@@ -4,7 +4,7 @@ import { RowBetween } from 'components/Row'
 import { ArrowLeft } from 'react-feather'
 import { Text } from 'rebass'
 import { CloseIcon } from 'theme'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Token } from '@uniswap/sdk-core'
 import { ManageLists } from './ManageLists'
 import ManageTokens from './ManageTokens'

src/components/SearchModal/ManageLists.tsx

@@ -3,7 +3,7 @@ import { Settings, CheckCircle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { usePopper } from 'react-popper'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useFetchListCallback } from '../../hooks/useFetchListCallback'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { TokenList } from '@uniswap/token-lists'

src/components/SearchModal/ManageTokens.tsx

@@ -4,7 +4,7 @@ import { PaddedColumn, Separator, SearchInput } from './styleds'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { TYPE, ExternalLinkIcon, TrashIcon, ButtonText, ExternalLink } from 'theme'
 import { useToken } from 'hooks/Tokens'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useUserAddedTokens, useRemoveUserAddedToken } from 'state/user/hooks'
 import { Token } from '@uniswap/sdk-core'
 import CurrencyLogo from 'components/CurrencyLogo'

src/components/SearchModal/SortButton.tsx

 import React from 'react'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowFixed } from '../Row'
 
 export const FilterWrapper = styled(RowFixed)`

src/components/SearchModal/styleds.tsx

-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
 

src/components/Slider/index.tsx

 import React, { useCallback } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const StyledRangeInput = styled.input<{ size: number }>`
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */

src/components/ThemeColorPalette/index.tsx

 import { readableColor } from 'polished'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { colors } from 'theme'
 
 const Swatch = styled.div`

src/components/Toggle/ListToggle.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE } from '../../theme'
 
 const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`

src/components/Toggle/MultiToggle.stories.tsx

 import { Story } from '@storybook/react/types-6-0'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import React, { useState } from 'react'
 import MultiToggle from './MultiToggle'
 

src/components/Toggle/MultiToggle.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 export const ToggleWrapper = styled.button<{ width?: string }>`
   display: flex;

src/components/Toggle/index.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
   padding: 0.25rem 0.5rem;

src/components/Tooltip/index.tsx

 import React, { useCallback, useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Popover, { PopoverProps } from '../Popover'
 
 const TooltipContainer = styled.div`

src/components/WalletModal/Option.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { ExternalLink } from '../../theme'
 
 const InfoCard = styled.button<{ active?: boolean }>`

src/components/WalletModal/PendingView.tsx

 import { AbstractConnector } from '@web3-react/abstract-connector'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Option from './Option'
 import { SUPPORTED_WALLETS } from '../../constants'
 import { injected } from '../../connectors'

src/components/WalletModal/index.tsx

@@ -5,7 +5,7 @@ import { AutoRow } from 'components/Row'
 import React, { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { fortmatic, injected, portis } from '../../connectors'

src/components/Web3ReactManager/index.tsx

 import React, { useState, useEffect } from 'react'
 import { useWeb3React } from '@web3-react/core'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useTranslation } from 'react-i18next'
 
 import { network } from '../../connectors'

src/components/claim/AddressClaimModal.tsx

 import React, { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn, ColumnCenter } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { DataCard, CardSection, Break } from '../earn/styled'
 import { RowBetween } from '../Row'
 import { TYPE, ExternalLink, CloseIcon, CustomLightSpinner, UniTokenAnimated } from '../../theme'

src/components/claim/ClaimModal.tsx

@@ -3,7 +3,7 @@ import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { isAddress } from 'ethers/lib/utils'
 import React, { useEffect, useState } from 'react'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Circle from '../../assets/images/blue-loader.svg'
 import tokenLogo from '../../assets/images/token-logo.png'
 import { useActiveWeb3React } from '../../hooks'

src/components/earn/ClaimRewardModal.tsx

 import React, { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon } from '../../theme'
 import { ButtonError } from '../Button'

src/components/earn/PoolCard.tsx

 import React from 'react'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE, StyledInternalLink } from '../../theme'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'

src/components/earn/StakingModal.tsx

@@ -4,7 +4,7 @@ import { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon } from '../../theme'
 import { ButtonConfirmed, ButtonError } from '../Button'

src/components/earn/UnstakingModal.tsx

 import React, { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon } from '../../theme'
 import { ButtonError } from '../Button'

src/components/earn/styled.ts

-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 
 import uImage from '../../assets/images/big_unicorn.png'

src/components/swap/AdvancedSwapDetailsDropdown.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useLastTruthy } from '../../hooks/useLast'
 import { AdvancedSwapDetails, AdvancedSwapDetailsProps } from './AdvancedSwapDetails'
 

src/components/swap/BetterTradeLink.tsx

@@ -7,7 +7,7 @@ import useParsedQueryString from '../../hooks/useParsedQueryString'
 import { DEFAULT_VERSION, Version } from '../../hooks/useToggledVersion'
 import { HideSmall, TYPE, SmallOnly } from '../../theme'
 import { ButtonPrimary } from '../Button'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Zap } from 'react-feather'
 
 const ResponsiveButton = styled(ButtonPrimary)`

src/components/swap/SwapHeader.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import SettingsTab from '../Settings'
 import { Percent } from '@uniswap/sdk-core'
 

src/components/swap/UnsupportedCurrencyFooter.tsx

 import React, { useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE, CloseIcon, ExternalLink } from 'theme'
 import { ButtonEmpty } from 'components/Button'
 import Modal from 'components/Modal'

src/components/vote/DelegateModal.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE } from '../../theme'
 import { X } from 'react-feather'

src/pages/AddLiquidity/Review.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Field } from '../../state/mint/v3/actions'
 import { AutoColumn } from 'components/Column'
 import Card from 'components/Card'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Currency, CurrencyAmount, Price } from '@uniswap/sdk-core'
 import { Position } from '@uniswap/v3-sdk'
 import { PositionPreview } from 'components/PositionPreview'

src/pages/AddLiquidity/styled.tsx

-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from 'components/Column'
 import CurrencyInputPanel from 'components/CurrencyInputPanel'
 import { DarkGreyCard } from 'components/Card'

src/pages/App.tsx

 import React, { Suspense } from 'react'
 import { Route, Switch } from 'react-router-dom'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import GoogleAnalyticsReporter from '../components/analytics/GoogleAnalyticsReporter'
 import AddressClaimModal from '../components/claim/AddressClaimModal'
 import Header from '../components/Header'

src/pages/AppBody.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 export const BodyWrapper = styled.div<{ margin?: string }>`
   position: relative;

src/pages/Earn/Manage.tsx

 import React, { useCallback, useState } from 'react'
 import { AutoColumn } from '../../components/Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Link } from 'react-router-dom'
 import JSBI from 'jsbi'
 import { Token, CurrencyAmount } from '@uniswap/sdk-core'

src/pages/Earn/index.tsx

 import JSBI from 'jsbi'
 import React from 'react'
 import { AutoColumn } from '../../components/Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { STAKING_REWARDS_INFO, useStakingInfo } from '../../state/stake/hooks'
 import { TYPE, ExternalLink } from '../../theme'
 import PoolCard from '../../components/earn/PoolCard'

src/pages/Pool/CTACards.tsx

 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE } from 'theme'
 import { useTranslation } from 'react-i18next'
 import { ExternalLink } from '../../theme'

src/pages/Pool/PositionPage.tsx

@@ -8,7 +8,7 @@ import { Link, RouteComponentProps } from 'react-router-dom'
 import { unwrappedToken } from 'utils/wrappedCurrency'
 import { usePositionTokenURI } from '../../hooks/usePositionTokenURI'
 import { LoadingRows } from './styleds'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from 'components/Column'
 import { RowBetween, RowFixed } from 'components/Row'
 import DoubleCurrencyLogo from 'components/DoubleLogo'

src/pages/RemoveLiquidity/styled.ts

 import { MaxButton } from 'pages/Pool/styleds'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 export const Wrapper = styled.div`
   position: relative;

src/pages/Vote/VotePage.tsx

 import React, { useState } from 'react'
 import { AutoColumn } from '../../components/Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { RouteComponentProps } from 'react-router-dom'
 import { ExternalLink, StyledInternalLink, TYPE } from '../../theme'

src/pages/Vote/index.tsx

 import React from 'react'
 import { AutoColumn } from '../../components/Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { ExternalLink, TYPE } from '../../theme'
 import { RowBetween, RowFixed } from '../../components/Row'
 import { Link } from 'react-router-dom'

src/pages/styled.tsx

-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 export const StandardPageWrapper = styled.div`
   padding-top: 160px;