chore: upgrade styled v6

pixiv · Aug 7, 2024 · f56c424 · f56c424
1 parent bc3674b
commit f56c424
Show file tree

Hide file tree

Showing 17 changed files with 159 additions and 70 deletions.
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -29,9 +29,10 @@
     "@types/webpack-env": "^1.18.1",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
+    "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.1"

diff --git a/packages/react-sandbox/package.json b/packages/react-sandbox/package.json
@@ -28,7 +28,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.21",
+    "@types/styled-components": "^5.1.34",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "use-resize-observer": "^9.1.0",
@@ -56,7 +56,7 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "styled-components": ">=5.1.1"
+    "styled-components": ">=6.0.0"
   },
   "files": [
     "src",

diff --git a/packages/react-sandbox/src/_lib/ComponentAbstraction.tsx b/packages/react-sandbox/src/_lib/ComponentAbstraction.tsx
@@ -18,8 +18,9 @@ export const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
   }
 )
 
+type DefaultLinkProps = LinkProps & React.RefAttributes<HTMLAnchorElement>
 export interface Components {
-  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>
+  Link: React.ComponentType<React.PropsWithoutRef<DefaultLinkProps>>
 }
 
 const DefaultValue: Components = {

diff --git a/packages/react-sandbox/src/components/Carousel/index.tsx b/packages/react-sandbox/src/components/Carousel/index.tsx
@@ -281,8 +281,6 @@ export default function Carousel({
   return (
     <Container ref={visibleAreaRef}>
       <ScrollArea
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
         ref={ref}
         scrollLeft={styles.scroll}
         onScroll={handleScrollMove}

diff --git a/packages/react-sandbox/src/components/Filter/index.tsx b/packages/react-sandbox/src/components/Filter/index.tsx
@@ -109,7 +109,7 @@ interface ButtonCssProps {
   reactive?: boolean
 }
 
-const buttonCss = css`
+const buttonCss = css<ButtonCssProps>`
   display: block;
   outline: none;
   border: none;
@@ -128,13 +128,13 @@ const buttonCss = css`
     color: ${({ theme }) => theme.color.text2};
   }
 
-  ${({ hover = false }: ButtonCssProps) =>
+  ${({ hover = false }) =>
     hover &&
     css`
       color: ${({ theme }) => theme.color.text2};
     `}
 
-  ${({ active = false }: ButtonCssProps) =>
+  ${({ active = false }) =>
     active &&
     css`
       background-color: ${({ theme }) => theme.color.surface3};
@@ -161,11 +161,11 @@ const padding0Css = css`
   }
 `
 
-const ButtonLike = styled.button`
+const ButtonLike = styled.button<ButtonCssProps>`
   ${buttonCss}
 `
 
-const PlainElement = styled.span`
+const PlainElement = styled.span<ButtonCssProps>`
   ${buttonCss}
 `
 

diff --git a/packages/react-sandbox/src/components/HintText/index.tsx b/packages/react-sandbox/src/components/HintText/index.tsx
@@ -13,7 +13,10 @@ interface Props {
 
 export default function HintText({ children, context, className }: Props) {
   return (
-    <Container className={className} context={context}>
+    <Container
+      className={className}
+      {...styledProps({ children, context, className })}
+    >
       <IconWrap>
         <InfoIcon />
       </IconWrap>
@@ -22,9 +25,7 @@ export default function HintText({ children, context, className }: Props) {
   )
 }
 
-const Container = styled.div.attrs<Props, ReturnType<typeof styledProps>>(
-  styledProps
-)`
+const Container = styled.div<ReturnType<typeof styledProps>>`
   ${(p) =>
     theme((o) => [
       o.bg.surface3,

diff --git a/packages/react-sandbox/src/components/Pager/index.tsx b/packages/react-sandbox/src/components/Pager/index.tsx
@@ -197,7 +197,7 @@ const PagerContainer = styled.nav`
   align-items: center;
 `
 
-const CircleButton = styled.button`
+const CircleButton = styled.button<{ noBackground?: boolean }>`
   font-size: 1rem;
   line-height: calc(1em + 8px);
   text-decoration: none;
@@ -249,7 +249,7 @@ const CircleButton = styled.button`
     color: ${({ theme }) => theme.color.text5};
   }
 
-  ${({ noBackground = false }: { noBackground?: boolean }) =>
+  ${({ noBackground = false }) =>
     noBackground &&
     css`
       /* stylelint-disable-next-line no-duplicate-selectors */

diff --git a/packages/react-sandbox/src/components/WithIcon/index.tsx b/packages/react-sandbox/src/components/WithIcon/index.tsx
@@ -103,8 +103,11 @@ const forceCenteringCss = css`
   }
 `
 
-const iconAnchorCss = css`
-  ${(p: { show: boolean | 'collapse'; pre: boolean }) =>
+const iconAnchorCss = css<{
+  show: boolean | 'collapse'
+  pre: boolean
+}>`
+  ${(p) =>
     p.show === 'collapse'
       ? css`
           display: none;
@@ -122,7 +125,10 @@ const iconAnchorCss = css`
         `}
 `
 
-const IconAnchorNaive = styled.div`
+const IconAnchorNaive = styled.div<{
+  show: boolean | 'collapse'
+  pre: boolean
+}>`
   display: flex;
   align-items: center;
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -29,7 +29,6 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.13",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
     "@storybook/react": "^8.0.5",
@@ -79,8 +78,7 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0"
   },
   "files": [
     "src",

diff --git a/packages/styled/package.json b/packages/styled/package.json
@@ -23,7 +23,6 @@
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-test-renderer": "^18.3.0",
-    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jest-styled-components": "^7.1.1",
@@ -32,7 +31,7 @@
     "react": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.2"
@@ -45,7 +44,7 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "styled-components": ">=5.1.1"
+    "styled-components": ">=6.0.0"
   },
   "files": [
     "src",

diff --git a/packages/styled/src/TokenInjector.tsx b/packages/styled/src/TokenInjector.tsx
@@ -3,14 +3,11 @@ import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
 import { defineThemeVariables, withPrefixes } from './util'
 import { mapObject } from '@charcoal-ui/utils'
 
-const GlobalStyle = createGlobalStyle`
-  ${<T extends Theme>({
-    themeMap,
-    background,
-  }: {
-    themeMap: ThemeMap<T>
-    background?: keyof ThemeMap<T>[string]['color']
-  }) =>
+const GlobalStyle = createGlobalStyle<{
+  themeMap: ThemeMap<Theme>
+  background?: keyof ThemeMap<Theme>[string]['color']
+}>`
+  ${({ themeMap, background }) =>
     Object.entries(themeMap).map(([key, theme]) =>
       key.startsWith('@media')
         ? css`

diff --git a/packages/styled/src/addThemeUtils.story.tsx b/packages/styled/src/addThemeUtils.story.tsx
@@ -1,3 +1,4 @@
+import { light } from '@charcoal-ui/theme'
 import styled, { ThemeProvider } from 'styled-components'
 import { MyTheme, myTheme } from './storyHelper'
 
@@ -10,7 +11,7 @@ declare module 'styled-components' {
 }
 
 export const Example = () => (
-  <ThemeProvider theme={myTheme}>
+  <ThemeProvider theme={myTheme(light)}>
     <RootDiv>
       <Bg1Div>
         <TypographyDiv>

diff --git a/packages/styled/src/index.ts b/packages/styled/src/index.ts
@@ -1,9 +1,10 @@
-import { CSSObject, ThemedStyledInterface } from 'styled-components'
+import { CSSObject, LibraryStyled, Styled, styled, StyledInstance } from 'styled-components'
 import { CharcoalAbstractTheme } from '@charcoal-ui/theme'
 import { ArrayOrSingle, isPresent, noThemeProvider, wrapArray } from './util'
 import { Internal, toCSSObjects } from './internals'
 import createO from './builders/o'
 import transition from './builders/transition'
+import { BaseObject, Runtime, StyledTarget } from 'styled-components/dist/types'
 export { default as TokenInjector } from './TokenInjector'
 export {
   getThemeSync,
@@ -44,9 +45,7 @@ const nonBlank = <T>(value: T): value is T extends Blank ? never : T =>
  *
  * const theme = createTheme<DefaultTheme>()
  */
-export function createTheme<T extends CharcoalAbstractTheme>(
-  _styled?: ThemedStyledInterface<T>
-) {
+export function createTheme<T extends CharcoalAbstractTheme>(_?: unknown) {
   type Builder = ReturnType<typeof createO<T>>
 
   // ランタイムの `theme(o => [...])` のインターフェースを構築する
@@ -97,3 +96,7 @@ export { disabledCss } from './styles/disabledCss'
 export { assertiveRingCss } from './styles/assertiveRingCss'
 export type { CharcoalThemeUtils } from './utils/CharcoalStyledTheme'
 export { addThemeUtils } from './utils/addThemeUtils'
+
+const a = styled.div`
+  ${({ theme }) => [theme.border.default]}
+`
diff --git a/packages/styled/src/utils/gap.ts b/packages/styled/src/utils/gap.ts
@@ -1,13 +1,13 @@
 import { Spacing } from '@charcoal-ui/theme'
-import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { css, RuleSet } from 'styled-components'
 import { pxIfNum } from './helpers/pxIfNum'
 
-export function gap(v1: keyof Spacing): FlattenSimpleInterpolation
+export function gap(v1: keyof Spacing): RuleSet
 
 export function gap(
   v1: keyof Spacing,
   v2: keyof Spacing
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function gap(v1: keyof Spacing, v2?: keyof Spacing) {
   return css`

diff --git a/packages/styled/src/utils/margin.ts b/packages/styled/src/utils/margin.ts
@@ -1,26 +1,26 @@
-import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { css, RuleSet } from 'styled-components'
 import { SpacingType } from './helpers/SpacingType'
 import { pxIfNum } from './helpers/pxIfNum'
 
-export function margin(arg1: SpacingType): FlattenSimpleInterpolation
+export function margin(arg1: SpacingType): RuleSet
 
 export function margin(
   arg1: SpacingType,
   arg2: SpacingType
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function margin(
   arg1: SpacingType,
   arg2: SpacingType,
   arg3: SpacingType
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function margin(
   arg1: SpacingType,
   arg2: SpacingType,
   arg3: SpacingType,
   arg4: SpacingType
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function margin(
   arg1: SpacingType,

diff --git a/packages/styled/src/utils/padding.ts b/packages/styled/src/utils/padding.ts
@@ -1,26 +1,26 @@
 import { Spacing } from '@charcoal-ui/theme'
-import { css, FlattenSimpleInterpolation } from 'styled-components'
+import { css, RuleSet } from 'styled-components'
 import { pxIfNum } from './helpers/pxIfNum'
 
-export function padding(arg1: keyof Spacing): FlattenSimpleInterpolation
+export function padding(arg1: keyof Spacing): RuleSet
 
 export function padding(
   arg1: keyof Spacing,
   arg2: keyof Spacing
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function padding(
   arg1: keyof Spacing,
   arg2: keyof Spacing,
   arg3: keyof Spacing
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function padding(
   arg1: keyof Spacing,
   arg2: keyof Spacing,
   arg3: keyof Spacing,
   arg4: keyof Spacing
-): FlattenSimpleInterpolation
+): RuleSet
 
 export function padding(
   arg1: keyof Spacing,