Skip to content

Update dependency styled-components to v5 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

dev-mend-for-github-com[bot]
Copy link

This PR contains the following updates:

Package Type Update Change
styled-components (source) dependencies major ^4.4.0 -> ^5.0.0

By merging this PR, the below vulnerabilities will be automatically resolved:

Severity CVSS Score Vulnerability
High High 7.2 CVE-2021-23337
Medium Medium 5.3 CVE-2020-28500

Release Notes

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

v5.0.0

Compare Source

It's finally here!!! 🚀See the migrating to v5 FAQ page for easy upgrade instructions!

Read the v5 release announcement!

TL;DR:

  • 19% smaller bundle size
  • 18% faster client-side mounting
  • 17% faster updating of dynamic styles
  • 45% faster server-side rendering
  • RTL support

...and much more all, with no breaking changes!

NOTE: At this time we recommend not using @import inside of createGlobalStyle. We're working on better behavior for this functionality but it just doesn't really work at the moment and it's better if you just embed these imports in your HTML index file, etc.

Changes
  • StyleSheetManager enhancements

    • you can now supply stylis plugins like stylis-plugin-rtl; <StyleSheetManager stylisPlugins={[]}>...</StyleSheetManager>
    • disableVendorPrefixes removes autoprefixing if you don't need legacy browser support; <StyleSheetManager disableVendorPrefixes>...</StyleSheetManager>
    • disableCSSOMInjection forces using the slower injection mode if other integrations in your runtime environment can't parse CSSOM-injected styles; <StyleSheetManager disableCSSOMInjection>...</StyleSheetManager>
  • Removed the "subfunction" attrs syntax that was deprecated in v4

    styled.div.attrs({ role: p => p.onClick ? 'button' : '' })`
      color: red;
    `

    becomes

    styled.div.attrs(p => ({ role: p.onClick ? 'button' : '' }))`
      color: red;
    `
  • Update css-to-react-native to v3.0.0 (#​2811); the one breaking change noted is that unitless line height is no longer allowed when setting font properties

  • disallow /ad/i in generated class names (#​2837); this change primarily helps to avoid some overly aggressive ad blockers that will mangle generated classnames containing the substring "ad"

  • if you use styled-components from CDN, in v5 the "react-is" dependency was added (make sure you add this to your project)


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

@dev-mend-for-github-com dev-mend-for-github-com bot added the security fix Security fix generated by Mend label Jun 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
security fix Security fix generated by Mend
Projects
None yet
Development

Successfully merging this pull request may close these issues.

0 participants