styled-components: missing types in v6

Same, we can’t update to v6, because the following types are missing:

• CSSObject
• FlattenInterpolation
• FlattenSimpleInterpolation
• Interpolation
• InterpolationFunction
• SimpleInterpolation
• ThemedStyledProps
• StyledComponentBase
• StyledComponent

A migration guide or at least a proper changelog is much needed 🙏

Just to weigh in on this, my team held off upgrading to v6 for 6 months due to this issue. We’re revisiting it now but the problems still exist and I can’t find official documentation on it. Additionally, the v6.1.2 release doesn’t ship a declaration file at all so is completely broken with Typescript.

This long term lack of support for v5 to v6 migrations is very concerning. I can see the usual replies in this thread suggesting that those affected raise PRs, but there’s a fundamental issue with the attitude that undocumented and unusable changes (for some people) can be released with an expectation that other people with little domain knowledge will mop up afterwards.

Honestly I’ve had an extremely trying summer at work (team was downsized and I’m now the sole maintainer for our design system plus support for 12 other teams) so I just haven’t had energy for this as much recently. It’ll pick back up.

It would be great to collect some resources on how to migrate from @types/styled-components to this new setup with native types. We’re consuming a few of the types from that packages, and I’m not sure how to proceed with our migration.

The beauty of open source is that we improve things together. PRs are more than welcome and I’d love to see someone with knowledge of the community types help out with a migration path since the community ones were written without input from the s-c dev team.

You could probably even pop both sets into a GPT and get some sort of guide with a bit of tweaking.

@Engelce Yes, I am in the process of dealing with it. However, it is only partially supported and has not been released yet. #4117 #4126 #4127

Just fyi there was no effort to sync repo types to definitelytyped’s setup. A type migration guide would be great if someone wants to contribute one over on the website repo

PR welcome!

@probablyup @takurinton Do you guys need any help with this?

I faced issues with types while migrating to v6, especially with those ones:

ThemedCssFunction ThemedStyledInterface ThemedStyledProps ThemeProviderComponent

@probablyup I apologize for the kinda offtopic here, but would you mind to update us on the future of styled-components? From the commit history activity, it seems that you don’t have much time/energy to actively maintain and address issues in the recently released major version.

Is it just temporary inactivity? Can we expect more activity on this project?

Thank you in advance for all the work and sorry again about the offtopic question. I don’t try to blame or anything, just trying to plan the future for my project and estimate the reliability of its major dependencies, one of which is styled-components ❤️

Is this going to get prioritized by any chance? If not, my team will not be able to upgrade to this newest and might need to look at pivoting to another library. I LOVE Styled Components so that would be a huge bummer if we had to change!

Just sharing that I was able to replace our usage of FlattenSimpleInterpolation with ReturnType<typeof css<StyledProps>>. (It was a function that would return various values created by the styled css function).

For CSSObject, here the equivalent (extracted from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/styled-components/index.d.ts#L23C12-L33)

import * as CSS from 'csstype'

type CSSProperties = CSS.Properties<string | number>

type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject }

export interface CSSObject extends CSSProperties, CSSPseudos {
  [key: string]: CSSObject | string | number | undefined
}

type ThemedStyledProps<P, T> = P & ThemeProps<T>

Can roughly be replaced with

import { ExecutionContext } from 'styled-components';

ExecutionContext & Props

I guess @probablyup you didn’t use the old definitely typed types and therefore do not exactly know how to migrate to the new types? Maybe we could collect what we learned about how to do migration here in this issue and later add it to the upgrade guide?

I’ll start with a few things I already figured out:

1. When you use the css prop, there no longer is a import * as _ from 'styled-components/cssprop'. Instead, add this to some .d.ts file in your project:

import type { CSSProp } from 'styled-components'

declare module 'react' {
    interface Attributes {
        css?: CSSProp
    }
}

1. The ThemeContext can now contain an undefined theme. If the undefined is in the way we can replace useContext(ThemeContext) with useTheme().

2. shouldForwardProp’s second parameter no longer is the default validator function. I think this needs to be replaced with @emotion/is-prop-valid.

3. withConfig<MyComponentProps>() no longer has a generic parameter. The generic parameter can instead be added to an attrs<MyComponentProps>() call.

I didn’t get to fixing my missing imports yet.

And I’m running into these related type issues:

• https://github.com/styled-components/styled-components/issues/4085
• https://github.com/styled-components/styled-components/issues/4076

Another type missing in v6 is ThemedStyledComponentsModule. This allows to type your theme without overriding styled-components type. This is extremely useful on a monorepo when you need to export multiple themes. It is also efficient when exporting a component library. In my case, it’s not possible to upgrade my monorepo to v6 without a similar solution.

The type StyledComponentProps is also missing. I am not sure if there is another way to get a type of the props of a styled component?

const SSearchField = styled.input`
  [...]
`;

const Search = (props: StyledComponentProps<"input", object, object, never>) => {
  return (
    <SSearchSection>
      <SLookingGlass><Icons.Search/></SLookingGlass>
      <SSearchField type="search" spellCheck={false} {...props}/>
    </SSearchSection>
  );
};

Also running into issues with Interpolation with the css function being used in another component. Running into the following error :

Argument of type 'RuleSet<{ small?: boolean | undefined; variant: ButtonVariant; endLabelContent?: string | undefined; disabled?: boolean | undefined; }>' is not assignable to parameter of type 'Interpolation<Substitute<LinkProps & RefAttributes<HTMLAnchorElement>, { small?: boolean | undefined; variant: ButtonVariant; endLabelContent?: string | undefined; disabled: boolean; }>>'. Type 'Interpolation<{ small?: boolean | undefined; variant: ButtonVariant; endLabelContent?: string | undefined; disabled?: boolean | undefined; }>[]' is not assignable to type 'RuleSet<object>'. Type 'Interpolation<{ small?: boolean | undefined; variant: ButtonVariant; endLabelContent?: string | undefined; disabled?: boolean | undefined; }>' is not assignable to type 'Interpolation<object>'. Type 'StyleFunction<{ small?: boolean | undefined; variant: ButtonVariant; endLabelContent?: string | undefined; disabled?: boolean | undefined; }>' is not assignable to type 'Interpolation<object>'. Type 'StyleFunction<{ small?: boolean | undefined; variant: ButtonVariant; endLabelContent?: string | undefined; disabled?: boolean | undefined; }>' is not assignable to type 'StyleFunction<object>'. Property 'variant' is missing in type '{}' but required in type '{ small?: boolean | undefined; variant: ButtonVariant; endLabelContent?: string | undefined; disabled?: boolean | undefined; }'

It looks like the passed in props aren’t making their way to the RuleSet??

I noticed that when styling custom components its autocompletion stop working

Note that the theme lose its type too

I did a workaround to solve

---

I’d like to know what would be the correct usage in that case

@guillaumebrunerie I’m not as willing to ditch the ship but I see where @seanmcquaid is coming from. Coming out with such a large feature and it being completely botched to the point it cannot work in so many people’s repo’s and as consumers, we’ve seen very little effort from the people who made this problem own it and plan in a fix. This leaves people wondering if styled-components is worth continuing to use as the stability could easily be affected by this kind of attitude going forward.

In addition to the above mentioned, I’m also missing StyledProps (!= ThemedStyledProps)

Another type missing in v6 is ThemedStyledComponentsModule. This allows to type your theme without overriding styled-components type. This is extremely useful on a monorepo when you need to export multiple themes. It is also efficient when exporting a component library. In my case, it’s not possible to upgrade my monorepo to v6 without a similar solution.

Agreed on needing something like @types/styled-components’s ThemedStyledComponentsModule (mentioned by @na-ji). We’ve also been using it to allow sub-projects in a monorepo to have their own theme types, rather than polluting the global default type. It’d be great if something akin to it could be included in the new first party type system.