chore(deps): update dependency styled-components to v6.5.3 #764

Open
renovate wants to merge 1 commit from renovate/styled-components-6.x-lockfile into master
Collaborator

This PR contains the following updates:

Package Type Update Change
styled-components (source) dependencies minor 6.4.16.5.3

Release Notes

styled-components/styled-components (styled-components)

v6.5.3

Compare Source

Patch Changes
  • 3470387: Fix TypeScript errors in projects that augment React HTML props with a data-* template-literal index signature.

v6.5.2

Compare Source

Patch Changes
  • 00b9ee2: .attrs() is cheaper to type-check.

    Two costs on the .attrs path are gone. Object-form .attrs() left the rendered target unchanged but still re-resolved that target's whole prop bag on every call, making .attrs on an HTML or SVG tag far costlier than on a wrapped component; it now reuses the props already resolved for the tag. Separately, making attrs-provided keys optional ran an avoidably expensive pass over the target's full prop set on every attrs component. Together these cut consumer type-check work measurably across every .attrs form, with no change to the resulting component's accepted props. Redirecting the target with .attrs({ as }), including the function form, is unaffected.

  • 00b9ee2: Explicitly annotated styled components type-check faster.

    Assigning a styled component to an explicit type, as isolatedDeclarations and any package that emits .d.ts files must (const Button: IStyledComponentBase<'web', ...> = styled.button``), used to be several times more expensive to check than an inferred one, because the annotation's styleand the component's widenedstyle` were two different csstype representations that the checker compared property by property.

    The inline style widening now builds on React's own CSSProperties, the same type a hand-written annotation carries, so that comparison short-circuits. On a 40-component fixture this cut the types created for the annotated pattern by about 21%, with no change to what style accepts: CSS custom properties, a component's own narrow style, and style={undefined} all behave exactly as before.

  • 00b9ee2: styled() wrapping a generic polymorphic component keeps its declared props narrow.

    Wrapping a component whose props are generic over an element type, such as the common <C extends React.ElementType>(props: PolymorphicProps<C, OwnProps>) pattern, used to let the styled result accept prop values the component itself rejects: styled(Button) would take variant="anything" even though <Button variant="anything"> is a type error. The wrapper now narrows those props exactly as the direct component does, so a bad value is caught in both places. Valid props, children, and plain (non-generic) targets are unaffected.

v6.5.1

Compare Source

Patch Changes
  • a0a92cd: Fix a styled component silently dropping props declared as a union whose members have no prop in common, which left every one of those props rejected. The same applied when as pointed at a component with such props. Where every member's props are optional the union is still flattened, so declare the combined optional shape instead.
  • a0a92cd: Styled components now report the same debug value to React DevTools on every render. Previously the value was only reported on renders that recomputed styles, so it disappeared from the DevTools panel whenever a component re-rendered with unchanged style props.
  • a0a92cd: Fix wrapping a component whose props are a union. Since 6.5.0 the wrapped version accepted only the props common to every member of the union, so a prop belonging to just one member was rejected even though the unwrapped component accepted it.

v6.5.0

Compare Source

Minor Changes
  • dfe4baf: React Native components now check style against React Native's own style types. Web-only CSS such as float, and CSS custom properties such as --brand, were previously accepted even though React Native has never done anything with them at runtime. They now surface as a type error where you write them instead of silently doing nothing.

    const Card = styled.View``;
    
    <Card style={{ padding: 16 }} />; // unchanged
    <Card style={{ float: 'left' }} />; // now a type error
    

    Web components are unaffected and still accept custom properties.

  • dfe4baf: Declaring your own style prop type now constrains the fields you name while leaving the rest of CSS alone. Previously a declaration like styled.div<{ style?: { width: number } }> was quietly ignored, because the built-in style type was applied after your props, so any CSS value was still accepted. Now width has to be a number, while color, custom properties, and everything else you did not mention keep working as before.

    To remove a field rather than constrain it, declare it as never. To make your type the only thing accepted, wrap it in the new CustomStyle helper, which removes every field you did not list:

    const Box = styled.div<{ style?: CustomStyle<{ width: number }> }>``;
    

    The constraint holds when the component is rendered through as or forwardedAs, so it cannot be sidestepped by rendering the same component as a different tag. Note that CustomStyle removes CSS custom properties too, since they are among the fields you did not list.

    One thing to know if you use exactOptionalPropertyTypes: on a component that declares its own style, passing style={undefined} explicitly is now rejected. Leaving the prop off is unaffected. Write style?: { width: number } | undefined in your declaration if you need to pass it explicitly.

    Relatedly, reading the style type back off a component (for example with React.ComponentProps) now reports that CSS custom properties are accepted, which matches what was already allowed when rendering.

  • 2949923: Large TypeScript projects type-check dramatically faster. On a 500-component app, tsc check time drops to under a quarter of what 6.4.4 takes and peak memory to under a third, which resolves the out-of-memory failures some projects hit after upgrading past 6.4.2. Both are now better than 6.4.2 was, so there is no longer a reason to pin to it. Editor responsiveness improves by the same margin, and autocomplete on as targets is unchanged.

Patch Changes
  • dfe4baf: Fixed ref being rejected on React Native components created with the shorthand syntax, such as styled.TextInput. Passing a ref, or a ref callback whose parameter you have not annotated, now works the same way it does with styled(TextInput).

    Also fixed a type error when a component's attrs callback is given an explicit parameter type, as in styled.div.attrs<MyProps>(props => props).

  • dfe4baf: Fixed components built on targets whose props cannot be inspected, such as Mantine's polymorphic components, rejecting children and the target's own props once you added a prop of your own:

    const Styled = styled(MantineButton)<{ $variant: 'a' | 'b' }>``;
    
    <Styled $variant="a" variant="filled">
      this now works
    </Styled>;
    

    Wrapping such a target without adding props already worked; adding one turned the permissiveness off. Your own declared props stay strictly typed either way.

v6.4.4

Compare Source

Patch Changes
  • 537ea42: Reduce TypeScript type-checking cost for styled components, most noticeably styled(Component) wrappers and polymorphic as usage. Large codebases that saw elevated tsc memory and type-instantiation counts get lower type-check memory and time, with no change to the emitted types or runtime behavior.

v6.4.3

Compare Source

Patch Changes
  • f692ec2: Fix a TypeScript error when wrapping a component whose props can't be statically read, such as Mantine v7's polymorphic-factory components (Button, Card, Menu.Item, and similar). These styled components no longer reject every prop, including children; arbitrary props are accepted again at the JSX call site and via .attrs(), while components with readable prop types stay fully type-checked.
  • f692ec2: Keep TypeScript attribute autocomplete working while you type props on a polymorphic styled component. When a component renders a different element through as (for example as="video"), beginning to type a new prop name could make the whole suggestion list vanish; the rendered element's props now keep autocompleting as you go.

v6.4.2

Compare Source

Patch Changes
  • 9945904: Restore TypeScript prop autocomplete inside the JSX of a styled component once the first attribute is typed.
  • 9945904: Apply all chain levels' styles when an extended styled component renders with the as prop under Preact's react-compat.
  • 9945904: Respect a custom toString on plain value objects (e.g. design tokens) when interpolated into a styled component, rather than walking the object's keys as CSS declarations.
  • 9945904: Fix a TypeScript error when wrapping a component whose props include an as prop with a non-string type (such as Next.js Link's as?: Url). The styled component now accepts either the styled-components polymorphism value or the wrapped component's own as type, so spreading the wrapped component's props onto the styled component is assignable again.
  • 9945904: Restore reliable styling in production browser bundles built without a runtime process global.

Configuration

📅 Schedule: (UTC)

  • Branch creation
    • At any time (no schedule defined)
  • Automerge
    • At any time (no schedule defined)

🚦 Automerge: Enabled.

Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.


  • If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate CLI.

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [styled-components](https://styled-components.com) ([source](https://github.com/styled-components/styled-components)) | dependencies | minor | [`6.4.1` → `6.5.3`](https://renovatebot.com/diffs/npm/styled-components/6.4.1/6.5.3) | --- ### Release Notes <details> <summary>styled-components/styled-components (styled-components)</summary> ### [`v6.5.3`](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.5.3) [Compare Source](https://github.com/styled-components/styled-components/compare/styled-components@6.5.2...styled-components@6.5.3) ##### Patch Changes - [`3470387`](https://github.com/styled-components/styled-components/commit/3470387): Fix TypeScript errors in projects that augment React HTML props with a `data-*` template-literal index signature. ### [`v6.5.2`](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.5.2) [Compare Source](https://github.com/styled-components/styled-components/compare/styled-components@6.5.1...styled-components@6.5.2) ##### Patch Changes - [`00b9ee2`](https://github.com/styled-components/styled-components/commit/00b9ee2): `.attrs()` is cheaper to type-check. Two costs on the `.attrs` path are gone. Object-form `.attrs()` left the rendered target unchanged but still re-resolved that target's whole prop bag on every call, making `.attrs` on an HTML or SVG tag far costlier than on a wrapped component; it now reuses the props already resolved for the tag. Separately, making attrs-provided keys optional ran an avoidably expensive pass over the target's full prop set on every attrs component. Together these cut consumer type-check work measurably across every `.attrs` form, with no change to the resulting component's accepted props. Redirecting the target with `.attrs({ as })`, including the function form, is unaffected. - [`00b9ee2`](https://github.com/styled-components/styled-components/commit/00b9ee2): Explicitly annotated styled components type-check faster. Assigning a styled component to an explicit type, as `isolatedDeclarations` and any package that emits `.d.ts` files must (`const Button: IStyledComponentBase<'web', ...> = styled.button``), used to be several times more expensive to check than an inferred one, because the annotation's `style`and the component's widened`style\` were two different csstype representations that the checker compared property by property. The inline `style` widening now builds on React's own `CSSProperties`, the same type a hand-written annotation carries, so that comparison short-circuits. On a 40-component fixture this cut the types created for the annotated pattern by about 21%, with no change to what `style` accepts: CSS custom properties, a component's own narrow `style`, and `style={undefined}` all behave exactly as before. - [`00b9ee2`](https://github.com/styled-components/styled-components/commit/00b9ee2): `styled()` wrapping a generic polymorphic component keeps its declared props narrow. Wrapping a component whose props are generic over an element type, such as the common `<C extends React.ElementType>(props: PolymorphicProps<C, OwnProps>)` pattern, used to let the styled result accept prop values the component itself rejects: `styled(Button)` would take `variant="anything"` even though `<Button variant="anything">` is a type error. The wrapper now narrows those props exactly as the direct component does, so a bad value is caught in both places. Valid props, children, and plain (non-generic) targets are unaffected. ### [`v6.5.1`](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.5.1) [Compare Source](https://github.com/styled-components/styled-components/compare/styled-components@6.5.0...styled-components@6.5.1) ##### Patch Changes - [`a0a92cd`](https://github.com/styled-components/styled-components/commit/a0a92cd): Fix a styled component silently dropping props declared as a union whose members have no prop in common, which left every one of those props rejected. The same applied when `as` pointed at a component with such props. Where every member's props are optional the union is still flattened, so declare the combined optional shape instead. - [`a0a92cd`](https://github.com/styled-components/styled-components/commit/a0a92cd): Styled components now report the same debug value to React DevTools on every render. Previously the value was only reported on renders that recomputed styles, so it disappeared from the DevTools panel whenever a component re-rendered with unchanged style props. - [`a0a92cd`](https://github.com/styled-components/styled-components/commit/a0a92cd): Fix wrapping a component whose props are a union. Since 6.5.0 the wrapped version accepted only the props common to every member of the union, so a prop belonging to just one member was rejected even though the unwrapped component accepted it. ### [`v6.5.0`](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.5.0) [Compare Source](https://github.com/styled-components/styled-components/compare/styled-components@6.4.4...styled-components@6.5.0) ##### Minor Changes - [`dfe4baf`](https://github.com/styled-components/styled-components/commit/dfe4baf): React Native components now check `style` against React Native's own style types. Web-only CSS such as `float`, and CSS custom properties such as `--brand`, were previously accepted even though React Native has never done anything with them at runtime. They now surface as a type error where you write them instead of silently doing nothing. ```tsx const Card = styled.View``; <Card style={{ padding: 16 }} />; // unchanged <Card style={{ float: 'left' }} />; // now a type error ``` Web components are unaffected and still accept custom properties. - [`dfe4baf`](https://github.com/styled-components/styled-components/commit/dfe4baf): Declaring your own `style` prop type now constrains the fields you name while leaving the rest of CSS alone. Previously a declaration like `styled.div<{ style?: { width: number } }>` was quietly ignored, because the built-in style type was applied after your props, so any CSS value was still accepted. Now `width` has to be a number, while `color`, custom properties, and everything else you did not mention keep working as before. To remove a field rather than constrain it, declare it as `never`. To make your type the only thing accepted, wrap it in the new `CustomStyle` helper, which removes every field you did not list: ```tsx const Box = styled.div<{ style?: CustomStyle<{ width: number }> }>``; ``` The constraint holds when the component is rendered through `as` or `forwardedAs`, so it cannot be sidestepped by rendering the same component as a different tag. Note that `CustomStyle` removes CSS custom properties too, since they are among the fields you did not list. One thing to know if you use `exactOptionalPropertyTypes`: on a component that declares its own `style`, passing `style={undefined}` explicitly is now rejected. Leaving the prop off is unaffected. Write `style?: { width: number } | undefined` in your declaration if you need to pass it explicitly. Relatedly, reading the style type back off a component (for example with `React.ComponentProps`) now reports that CSS custom properties are accepted, which matches what was already allowed when rendering. - [`2949923`](https://github.com/styled-components/styled-components/commit/2949923): Large TypeScript projects type-check dramatically faster. On a 500-component app, `tsc` check time drops to under a quarter of what 6.4.4 takes and peak memory to under a third, which resolves the out-of-memory failures some projects hit after upgrading past 6.4.2. Both are now better than 6.4.2 was, so there is no longer a reason to pin to it. Editor responsiveness improves by the same margin, and autocomplete on `as` targets is unchanged. ##### Patch Changes - [`dfe4baf`](https://github.com/styled-components/styled-components/commit/dfe4baf): Fixed `ref` being rejected on React Native components created with the shorthand syntax, such as `styled.TextInput`. Passing a ref, or a ref callback whose parameter you have not annotated, now works the same way it does with `styled(TextInput)`. Also fixed a type error when a component's `attrs` callback is given an explicit parameter type, as in `styled.div.attrs<MyProps>(props => props)`. - [`dfe4baf`](https://github.com/styled-components/styled-components/commit/dfe4baf): Fixed components built on targets whose props cannot be inspected, such as Mantine's polymorphic components, rejecting `children` and the target's own props once you added a prop of your own: ```tsx const Styled = styled(MantineButton)<{ $variant: 'a' | 'b' }>``; <Styled $variant="a" variant="filled"> this now works </Styled>; ``` Wrapping such a target without adding props already worked; adding one turned the permissiveness off. Your own declared props stay strictly typed either way. ### [`v6.4.4`](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.4.4) [Compare Source](https://github.com/styled-components/styled-components/compare/styled-components@6.4.3...styled-components@6.4.4) ##### Patch Changes - [`537ea42`](https://github.com/styled-components/styled-components/commit/537ea42): Reduce TypeScript type-checking cost for styled components, most noticeably `styled(Component)` wrappers and polymorphic `as` usage. Large codebases that saw elevated `tsc` memory and type-instantiation counts get lower type-check memory and time, with no change to the emitted types or runtime behavior. ### [`v6.4.3`](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.4.3) [Compare Source](https://github.com/styled-components/styled-components/compare/styled-components@6.4.2...styled-components@6.4.3) ##### Patch Changes - [`f692ec2`](https://github.com/styled-components/styled-components/commit/f692ec2): Fix a TypeScript error when wrapping a component whose props can't be statically read, such as Mantine v7's polymorphic-factory components (`Button`, `Card`, `Menu.Item`, and similar). These styled components no longer reject every prop, including `children`; arbitrary props are accepted again at the JSX call site and via `.attrs()`, while components with readable prop types stay fully type-checked. - [`f692ec2`](https://github.com/styled-components/styled-components/commit/f692ec2): Keep TypeScript attribute autocomplete working while you type props on a polymorphic styled component. When a component renders a different element through `as` (for example `as="video"`), beginning to type a new prop name could make the whole suggestion list vanish; the rendered element's props now keep autocompleting as you go. ### [`v6.4.2`](https://github.com/styled-components/styled-components/releases/tag/styled-components%406.4.2) [Compare Source](https://github.com/styled-components/styled-components/compare/styled-components@6.4.1...styled-components@6.4.2) ##### Patch Changes - [`9945904`](https://github.com/styled-components/styled-components/commit/9945904): Restore TypeScript prop autocomplete inside the JSX of a styled component once the first attribute is typed. - [`9945904`](https://github.com/styled-components/styled-components/commit/9945904): Apply all chain levels' styles when an extended styled component renders with the `as` prop under Preact's `react-compat`. - [`9945904`](https://github.com/styled-components/styled-components/commit/9945904): Respect a custom `toString` on plain value objects (e.g. design tokens) when interpolated into a styled component, rather than walking the object's keys as CSS declarations. - [`9945904`](https://github.com/styled-components/styled-components/commit/9945904): Fix a TypeScript error when wrapping a component whose props include an `as` prop with a non-string type (such as Next.js `Link`'s `as?: Url`). The styled component now accepts either the styled-components polymorphism value or the wrapped component's own `as` type, so spreading the wrapped component's props onto the styled component is assignable again. - [`9945904`](https://github.com/styled-components/styled-components/commit/9945904): Restore reliable styling in production browser bundles built without a runtime `process` global. </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate CLI](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4xODUuMSIsInVwZGF0ZWRJblZlciI6IjQ0LjEzLjIiLCJ0YXJnZXRCcmFuY2giOiJtYXN0ZXIiLCJsYWJlbHMiOltdfQ==-->
chore(deps): update dependency styled-components to v6.4.2
Some checks failed
ci/woodpecker/push/build Pipeline was successful
ci/woodpecker/push/test Pipeline was successful
ci/woodpecker/push/deploy Pipeline failed
renovate/artifacts Artifact file update failure
299cfef9fd
renovate scheduled this pull request to auto merge when all checks succeed 2026-05-19 15:05:33 +02:00
renovate force-pushed renovate/styled-components-6.x-lockfile from 299cfef9fd
Some checks failed
ci/woodpecker/push/build Pipeline was successful
ci/woodpecker/push/test Pipeline was successful
ci/woodpecker/push/deploy Pipeline failed
renovate/artifacts Artifact file update failure
to e65d709a8c
Some checks failed
ci/woodpecker/push/build Pipeline was successful
ci/woodpecker/push/test Pipeline was successful
ci/woodpecker/push/deploy Pipeline failed
renovate/artifacts Artifact file update failure
2026-06-24 20:05:01 +02:00
Compare
renovate changed title from chore(deps): update dependency styled-components to v6.4.2 to chore(deps): update dependency styled-components to v6.4.3 2026-06-24 20:05:05 +02:00
renovate force-pushed renovate/styled-components-6.x-lockfile from e65d709a8c
Some checks failed
ci/woodpecker/push/build Pipeline was successful
ci/woodpecker/push/test Pipeline was successful
ci/woodpecker/push/deploy Pipeline failed
renovate/artifacts Artifact file update failure
to 94ec1c3223
Some checks failed
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
ci/woodpecker/push/build Pipeline was canceled
2026-07-19 02:05:22 +02:00
Compare
renovate changed title from chore(deps): update dependency styled-components to v6.4.3 to chore(deps): update dependency styled-components to v6.4.4 2026-07-19 02:05:26 +02:00
renovate force-pushed renovate/styled-components-6.x-lockfile from 94ec1c3223
Some checks failed
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
ci/woodpecker/push/build Pipeline was canceled
to 791028efd1
Some checks failed
ci/woodpecker/push/build Pipeline failed
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
2026-08-04 18:06:42 +02:00
Compare
renovate changed title from chore(deps): update dependency styled-components to v6.4.4 to chore(deps): update dependency styled-components to v6.5.0 2026-08-04 18:06:48 +02:00
renovate force-pushed renovate/styled-components-6.x-lockfile from 791028efd1
Some checks failed
ci/woodpecker/push/build Pipeline failed
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
to 4251de2a8e
Some checks failed
ci/woodpecker/push/build Pipeline is running
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
2026-08-07 17:05:13 +02:00
Compare
renovate changed title from chore(deps): update dependency styled-components to v6.5.0 to chore(deps): update dependency styled-components to v6.5.1 2026-08-07 17:05:18 +02:00
renovate force-pushed renovate/styled-components-6.x-lockfile from 4251de2a8e
Some checks failed
ci/woodpecker/push/build Pipeline is running
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
to 3e13eace45
Some checks failed
ci/woodpecker/push/build Pipeline is running
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
2026-08-11 20:06:01 +02:00
Compare
renovate changed title from chore(deps): update dependency styled-components to v6.5.1 to chore(deps): update dependency styled-components to v6.5.2 2026-08-11 20:06:07 +02:00
renovate force-pushed renovate/styled-components-6.x-lockfile from 3e13eace45
Some checks failed
ci/woodpecker/push/build Pipeline is running
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
to 4cc3d8fefc
Some checks failed
ci/woodpecker/push/test unknown status
ci/woodpecker/push/deploy unknown status
ci/woodpecker/push/build Pipeline was canceled
2026-08-15 18:05:28 +02:00
Compare
renovate changed title from chore(deps): update dependency styled-components to v6.5.2 to chore(deps): update dependency styled-components to v6.5.3 2026-08-15 18:05:32 +02:00
Some checks failed
ci/woodpecker/push/test unknown status
Required
Details
ci/woodpecker/push/deploy unknown status
Required
Details
ci/woodpecker/push/build Pipeline was canceled
Required
Details
Some required checks were not successful.
You are not authorized to merge this pull request.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin renovate/styled-components-6.x-lockfile:renovate/styled-components-6.x-lockfile
git switch renovate/styled-components-6.x-lockfile
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
yolokube/dashboard!764
No description provided.