Update dependency styled-components to v6.5.3

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
styled-components (source)	6.3.11 → 6.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.

v6.4.1

Compare Source

Patch Changes

• 49d09ae: Fix a performance regression in 6.4.0 where dynamic createGlobalStyle components caused significant re-render slowdowns. Also restores pre-6.4 cascade ordering when multiple instances of the same createGlobalStyle coexist.
• eca95b2: Fix outdated dev-mode error messages for keyframes-in-untagged-strings and component-selector references that still pointed at www.styled-components.com and described behavior from styled-components v3.

v6.4.0

Compare Source

Minor Changes

• b0f3d29: .attrs() improvements: props supplied via attrs are now automatically made optional on the resulting component (previously required even when attrs provided a default). Also fixes a bug where the attrs callback received a mutable props object that could be changed by subsequent attrs processing; it now receives an immutable snapshot.

• 2a973d8: Dropped IE11 support: ES2015 build target, inlined unitless CSS properties (removing @​emotion/unitless dependency), removed legacy React class statics from hoist and other unnecessary code.

• 9e07d95: Add createTheme(defaultTheme, options?) for CSS variable theming that works across RSC and client components.

  Returns an object with the same shape where every leaf is var(--prefix-path, fallback). Pass it to ThemeProvider for stable class name hashes across themes (no hydration mismatch on light/dark switch).

  const theme = createTheme({ colors: { primary: '#​0070f3' } });
  // theme.colors.primary → "var(--sc-colors-primary, #​0070f3)"
  // theme.raw → original object
  // theme.vars.colors.primary → "--sc-colors-primary"
  // theme.resolve(el?) → computed values from DOM (client-only)
  // theme.GlobalStyle → component that emits CSS var declarations

  vars exposes bare CSS custom property names (same shape as the theme) for use in createGlobalStyle dark mode overrides without hand-writing variable names:

  const { vars } = createTheme({ colors: { bg: '#fff', text: '#​000' } });
  
  const DarkOverrides = createGlobalStyle`
    @media (prefers-color-scheme: dark) {
      :root {
        ${vars.colors.bg}: #​111;
        ${vars.colors.text}: #eee;
      }
    }
  `;

  Options: prefix (default "sc"), selector (default ":root", use ":host" for Shadow DOM).

• 79cc7b4: Add first-class CSP nonce support. Nonces can now be configured via StyleSheetManager's nonce prop (recommended for Next.js, Remix), ServerStyleSheet's constructor, <meta property="csp-nonce"> (Vite convention), <meta name="sc-nonce">, or the legacy __webpack_nonce__ global.

• b0f3d29: Rearchitect createGlobalStyle to use shared stylesheet groups.

  All instances of a createGlobalStyle component now share a single stylesheet group, registered once at definition time. This fixes unmounting one instance removing styles needed by others (#​5695), styles scattering after remount (#​3146), and group ID leaks during SSR (#​3022).

  CSS injection order is now fully determined at definition time (lower group ID = earlier in stylesheet). Render order no longer affects CSS order. Keyframes defined before a component correctly appear before that component's rules.

  Also fixes: O(n^2) performance regression in jsdom test environments from unbounded rule accumulation, and stale static global styles during client-side HMR (effect deps now include the globalStyle reference so module re-evaluation triggers re-injection).

• b0f3d29: Significant render performance improvements via three-layer memoization and hot-path micro-optimizations. Client-only; server renders are unaffected.

  Re-renders that don't change styling now skip style resolution entirely. Components sharing the same CSS (e.g., list items) benefit from cross-sibling caching. Hot-path changes include forEach → for/for...of, template literal → manual concat, and reduced allocations.

  Benchmarks vs 6.3.12:

  • Parent re-render (most common): 3.3x faster
  • First mount: 1.7-2.5x faster
  • Prop cycling: 2.3-2.4x faster
  • 10K heavy layouts: 1.9x faster
  • No regressions on any benchmark

• 9ada92b: React Server Components support: inline style injection, deduplication, and a new stylisPluginRSC for child-index selector fixes.

  Inline style injection: RSC-rendered styled components emit <style data-styled> tags alongside their elements. CSS is deduplicated per render via React.cache (React 19+). Extended components use :where() zero-specificity wrapping on base CSS so extensions always win the cascade regardless of injection order.

  StyleSheetManager works in RSC: stylisPlugins and shouldForwardProp are now applied in server component environments where React context is unavailable.

  stylisPluginRSC — opt-in stylis plugin that fixes :first-child, :last-child, :nth-child(), and :nth-last-child() selectors broken by inline <style> tags shifting child indices. Rewrites them using CSS Selectors Level 4 of S syntax to exclude styled-components style tags from the count.

  import { StyleSheetManager, stylisPluginRSC } from 'styled-components';
  
  <StyleSheetManager stylisPlugins={[stylisPluginRSC]}>{children}</StyleSheetManager>;

  The plugin rewrites :first-child, :last-child, :nth-child(), and :nth-last-child() using CSS Selectors Level 4 of S syntax to exclude injected style tags from the child count.

  Browser support: Chrome 111+, Firefox 113+, Safari 9+ (~93% global). In unsupported browsers, the entire CSS rule is dropped — only opt in if your audience supports it. Use :first-of-type / :nth-of-type() as a universally compatible alternative.

  HMR: Stale styles during client-side HMR are detected and invalidated when module re-evaluation creates new component instances while IDs remain stable (SWC plugin assigns IDs by file location). createGlobalStyle additionally clears stale sheet entries when the instance changes between renders.

  The plugin is fully tree-shakeable — zero bytes in bundles that don't import it.

Patch Changes

• b0f3d29: Expose as and forwardedAs props in React.ComponentProps extraction for styled components
• 553cbb4: Fix memory leak in long-running apps using components with free-form string interpolations (e.g. color: ${p => p.$dynamicValue} where the value comes from unbounded user input).
• b0f3d29: React Native improvements: replaced postcss with a lightweight CSS declaration parser, fixing nanoid crashes in Expo/Metro (#​5705) and improving parse speed 4-6x. Parent re-renders with unchanged children are 2.6-3.2x faster via cache-first render. Updated native component alias list (removed 5 dead components, added 4 missing). Added react-native as an optional peer dependency.
• 74e8b76: Smaller install footprint via unused dependency cleanup.

v6.3.12

Compare Source

Patch Changes

• db4f940: Fix test performance regression in 6.3.x by eliminating double style rendering in createGlobalStyle and removing unnecessary DOM queries during cleanup in client/test environments.
• 1203f80: Fix React Native crash caused by document references in the native build. The native bundle no longer includes DOM code, resolving compatibility with RN 0.79+ and Hermes.
• 5ef3804: Gracefully handle CSS syntax errors in React Native instead of crashing. Missing semicolons and other syntax issues now log a warning in development and produce an empty style object instead of throwing a fatal error.
• a777f5a: Preserve explicitly passed undefined props instead of stripping them. This fixes compatibility with libraries like MUI and Radix UI that pass undefined to reset inherited defaults (e.g., role={undefined}). Props set to undefined via .attrs() are still stripped as before.

---

Configuration

📅 Schedule: (UTC)

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

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, 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 was generated by Mend Renovate. View the repository job log.