Environment

System:

• OS: Linux 6.10 Arch Linux
• CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
• Memory: 13.71 GB / 15.35 GB
• Container: Yes
• Shell: 5.9 - /bin/zsh

Binaries:

• Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
• Yarn: 1.22.22 - /usr/bin/yarn
• npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm

npmPackages:

• babel-plugin-styled-components: 2.1.4 => 2.1.4
• styled-components: ^6.1.13 => 6.1.13

Steps to reproduce

We have a large codebase using styled-component (~5000 styled function usage). The repo is private so i can't share it. We typically use styled components like this :

import * as React from 'react'
import styled from 'styled-components'

export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
  type?: 'text' | 'search' | 'email' | 'password'
  status?:  'error' | 'success' | 'default'
  small?: boolean
}

const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(function InputComponent(
  { status, small, className, ...inputProps },
  inputRef,
) {
  return (
    <Wrapper className={className} small={small}>
      <Input $disabled={inputProps.disabled} status={status}>
        <TextInput ref={inputRef} type="text" {...inputProps} />
      </Input>
    </Wrapper>
  )
})

export const Input = styled(InputComponent)``

const Wrapper = styled.div<{ small?:boolean }>`
  ...
`

const BaseInputWrapper = styled.div`
  ...
`

type InputProps = {
    $disabled?: boolean | undefined;
    status?: Status | undefined;
}

const InputWrapper = styled(BaseInput)<InputProps>`
  ...
`

const TextInput = styled.input`
  ...
`

When typechecking with tsc we get an OOM. When checking hotspots with @typescript/analyze-trace they are all over the place on styled components.

I dug in the types of styled-component, and the OOM stopped when i replaced the Substitute in the interface Styled with a simple & (less typesafe, but overall same "meaning").

To merge the props with Substitute given the props we use (since we rely on React.InputHTMLAttributes<HTMLInputElement>), typescript has to do a lot of work for each instance which might be the cause of the OOM.

So the types that infer the props of a styled components seems to be to heavy for our codebase. For now we resorted to using the v6 implementation and v5 types to avoid the OOM.

Is our usage of styled-component too exotic ? Do we have to change our way of using it ? Or is styled-component supposed to support this kind of usage for a large codebase ?