build: strip styled-components dep and DefaultTheme from the bundle (#…

…127)

* styled components should not be bundled with a library

* remove rollup externals modification

* refactor: use DefaultTheme directly

* build: strip DefaultTheme from build

Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

.releaserc.json

@@ -1,15 +1,15 @@
 {
-    "branches": "main",
-    "plugins": [
-        "@semantic-release/commit-analyzer",
-		"@semantic-release/release-notes-generator",
-        [
-            "@semantic-release/git",
-            {
-                "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-            }
-        ],
-        "@semantic-release/github",
-        "@semantic-release/npm"
-    ]
-}
+  "branches": "main",
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/git",
+      {
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/github",
+    "@semantic-release/npm"
+  ]
+}

package.json

@@ -95,7 +95,6 @@
     "react-window": "^1.8.5",
     "rebass": "^4.0.7",
     "setimmediate": "^1.0.5",
-    "styled-components": "^5.3.0",
     "tiny-invariant": "^1.2.0",
     "wcag-contrast": "^3.0.0",
     "wicg-inert": "^3.1.1"
@@ -105,7 +104,8 @@
     "react": ">=17.0.1",
     "react-dom": ">=17.0.1",
     "react-redux": ">=7.2.2",
-    "redux": "^4.1.2"
+    "redux": "^4.1.2",
+    "styled-components": ">=5"
   },
   "optionalDependencies": {
     "bufferutil": "^4.0.6",
@@ -197,6 +197,7 @@
     "rollup-plugin-scss": "^3.0.0",
     "sass": "^1.45.1",
     "semantic-release": "^19.0.2",
+    "styled-components": "^5.3.0",
     "typechain": "^5.0.0",
     "typescript": "^4.4.3",
     "wcag-contrast": "^3.0.0",

rollup.config.js

@@ -98,7 +98,7 @@ const cjs = {
 const types = {
   input: 'dts/index.d.ts',
   output: { file: 'dist/index.d.ts' },
-  external: (source) => source.endsWith('.scss'),
+  external: (source) => source.endsWith('.scss') || source.endsWith('/external.d.ts'),
   plugins: [dts({ compilerOptions: { baseUrl: 'dts' } })],
   watch: false,
 }

src/theme/dynamic.tsx

@@ -1,10 +1,10 @@
 import { darken, lighten, opacify, transparentize } from 'polished'
 import { readableColor } from 'polished'
 import { ReactNode, useMemo } from 'react'
-import { ThemeProvider as StyledProvider, useTheme } from 'styled-components/macro'
+import { DefaultTheme, ThemeProvider as StyledProvider, useTheme } from 'styled-components/macro'
 import { hex } from 'wcag-contrast'
 
-import type { Colors, ComputedTheme } from './styled'
+import type { Colors } from './theme'
 
 type DynamicColors = Pick<Colors, 'interactive' | 'outline' | 'primary' | 'secondary' | 'onInteractive'>
 
@@ -33,7 +33,7 @@ const dark: DynamicColors = {
   onInteractive: black,
 }
 
-export function getDynamicTheme(theme: ComputedTheme, color: string): ComputedTheme {
+export function getDynamicTheme(theme: DefaultTheme, color: string): DefaultTheme {
   const colors = { light, dark }[readableColor(color, 'light', 'dark', false) as 'light' | 'dark']
   return {
     ...theme,
@@ -43,7 +43,7 @@ export function getDynamicTheme(theme: ComputedTheme, color: string): ComputedTh
   }
 }
 
-function getAccessibleColor(theme: ComputedTheme, color: string) {
+function getAccessibleColor(theme: DefaultTheme, color: string) {
   const dynamic = getDynamicTheme(theme, color)
   let { primary } = dynamic
   let AAscore = hex(color, primary)

src/theme/external.ts

@@ -0,0 +1,16 @@
+/**
+ * Extends styled-components' DefaultTheme using declaration merging:
+ * https://styled-components.com/docs/api#create-a-declarations-file
+ *
+ * This file is explicitly named "external.ts" so that it will be stripped when built.
+ * This is necessary to prevent DefaultTheme from conflicting with other users' redefinitions.
+ */
+
+import { Attributes, Colors } from './theme'
+
+declare module 'styled-components/macro' {
+  export interface DefaultTheme extends Omit<Attributes, 'borderRadius'>, Colors {
+    borderRadius: number
+    onHover: (color: string) => string
+  }
+}

src/theme/index.tsx

@@ -1,14 +1,15 @@
 import 'assets/fonts.scss'
+import './external'
 
 import { mix, transparentize } from 'polished'
 import { createContext, ReactNode, useContext, useMemo, useState } from 'react'
-import { ThemeProvider as StyledProvider } from 'styled-components/macro'
+import { DefaultTheme, ThemeProvider as StyledProvider } from 'styled-components/macro'
 
-import type { Colors, ComputedTheme, Theme } from './styled'
+import type { Colors, Theme } from './theme'
 
 export * from './dynamic'
 export * from './layer'
-export type { Color, Colors, Theme } from './styled'
+export type { Color, Colors, Theme } from './theme'
 export * as ThemedText from './type'
 
 const white = 'hsl(0, 0%, 100%)'
@@ -89,7 +90,7 @@ export function useSystemTheme() {
   return systemTheme
 }
 
-const ThemeContext = createContext<ComputedTheme>(toComputedTheme(defaultTheme))
+const ThemeContext = createContext<DefaultTheme>(toDefaultTheme(defaultTheme))
 
 interface ThemeProviderProps {
   theme?: Theme
@@ -99,7 +100,7 @@ interface ThemeProviderProps {
 export function ThemeProvider({ theme, children }: ThemeProviderProps) {
   const contextTheme = useContext(ThemeContext)
   const value = useMemo(() => {
-    return toComputedTheme({
+    return toDefaultTheme({
       ...contextTheme,
       ...theme,
     } as Required<Theme>)
@@ -111,7 +112,7 @@ export function ThemeProvider({ theme, children }: ThemeProviderProps) {
   )
 }
 
-function toComputedTheme(theme: Required<Theme>): ComputedTheme {
+function toDefaultTheme(theme: Required<Theme>): DefaultTheme {
   return {
     ...theme,
     borderRadius: clamp(

src/theme/styled.ts → src/theme/theme.ts

@@ -38,13 +38,3 @@ export interface Attributes {
 }
 
 export interface Theme extends Partial<Attributes>, Partial<Colors> {}
-
-export interface ComputedTheme extends Omit<Attributes, 'borderRadius'>, Colors {
-  borderRadius: number
-  onHover: (color: string) => string
-}
-
-declare module 'styled-components/macro' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends ComputedTheme {}
-}

src/theme/type.tsx

@@ -1,7 +1,7 @@
 import { Text, TextProps as TextPropsWithCss } from 'rebass'
 import styled, { useTheme } from 'styled-components/macro'
 
-import type { Color } from './styled'
+import type { Color } from './theme'
 
 type TextProps = Omit<TextPropsWithCss, 'css' | 'color' | 'userSelect'> & {
   color?: Color