chore(deps): update dependency styled-components to v6.5.3 #764
No reviewers
Labels
No labels
type
dependency-dashboard
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set
Reference
yolokube/dashboard!764
Loading…
Reference in a new issue
No description provided.
Delete branch "renovate/styled-components-6.x-lockfile"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
This PR contains the following updates:
6.4.1→6.5.3Release Notes
styled-components/styled-components (styled-components)
v6.5.3Compare Source
Patch Changes
3470387: Fix TypeScript errors in projects that augment React HTML props with adata-*template-literal index signature.v6.5.2Compare Source
Patch Changes
00b9ee2:.attrs()is cheaper to type-check.Two costs on the
.attrspath are gone. Object-form.attrs()left the rendered target unchanged but still re-resolved that target's whole prop bag on every call, making.attrson 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.attrsform, 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
isolatedDeclarationsand any package that emits.d.tsfiles must (const Button: IStyledComponentBase<'web', ...> = styled.button``), used to be several times more expensive to check than an inferred one, because the annotation'sstyleand the component's widenedstyle` were two different csstype representations that the checker compared property by property.The inline
stylewidening now builds on React's ownCSSProperties, 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 whatstyleaccepts: CSS custom properties, a component's own narrowstyle, andstyle={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 takevariant="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.1Compare 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 whenaspointed 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.0Compare Source
Minor Changes
dfe4baf: React Native components now checkstyleagainst React Native's own style types. Web-only CSS such asfloat, 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.Web components are unaffected and still accept custom properties.
dfe4baf: Declaring your ownstyleprop type now constrains the fields you name while leaving the rest of CSS alone. Previously a declaration likestyled.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. Nowwidthhas to be a number, whilecolor, 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 newCustomStylehelper, which removes every field you did not list:The constraint holds when the component is rendered through
asorforwardedAs, so it cannot be sidestepped by rendering the same component as a different tag. Note thatCustomStyleremoves 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 ownstyle, passingstyle={undefined}explicitly is now rejected. Leaving the prop off is unaffected. Writestyle?: { width: number } | undefinedin 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,tsccheck 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 onastargets is unchanged.Patch Changes
dfe4baf: Fixedrefbeing rejected on React Native components created with the shorthand syntax, such asstyled.TextInput. Passing a ref, or a ref callback whose parameter you have not annotated, now works the same way it does withstyled(TextInput).Also fixed a type error when a component's
attrscallback is given an explicit parameter type, as instyled.div.attrs<MyProps>(props => props).dfe4baf: Fixed components built on targets whose props cannot be inspected, such as Mantine's polymorphic components, rejectingchildrenand the target's own props once you added a prop of your own: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.4Compare Source
Patch Changes
537ea42: Reduce TypeScript type-checking cost for styled components, most noticeablystyled(Component)wrappers and polymorphicasusage. Large codebases that saw elevatedtscmemory and type-instantiation counts get lower type-check memory and time, with no change to the emitted types or runtime behavior.v6.4.3Compare 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, includingchildren; 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 throughas(for exampleas="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.2Compare 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 theasprop under Preact'sreact-compat.9945904: Respect a customtoStringon 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 anasprop with a non-string type (such as Next.jsLink'sas?: Url). The styled component now accepts either the styled-components polymorphism value or the wrapped component's ownastype, 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 runtimeprocessglobal.Configuration
📅 Schedule: (UTC)
🚦 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.
This PR has been generated by Mend Renovate CLI.
299cfef9fde65d709a8cchore(deps): update dependency styled-components to v6.4.2to chore(deps): update dependency styled-components to v6.4.3e65d709a8c94ec1c3223chore(deps): update dependency styled-components to v6.4.3to chore(deps): update dependency styled-components to v6.4.494ec1c3223791028efd1chore(deps): update dependency styled-components to v6.4.4to chore(deps): update dependency styled-components to v6.5.0791028efd14251de2a8echore(deps): update dependency styled-components to v6.5.0to chore(deps): update dependency styled-components to v6.5.14251de2a8e3e13eace45chore(deps): update dependency styled-components to v6.5.1to chore(deps): update dependency styled-components to v6.5.23e13eace454cc3d8fefcchore(deps): update dependency styled-components to v6.5.2to chore(deps): update dependency styled-components to v6.5.3View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.