styled-components v5.0.0-rc.0 Release Notes

Release Date: 2019-10-30 // over 4 years ago
  • ๐Ÿš€ We're almost there! After several months of work (thank you beta testers!) this is the first v5 release candidate build.

    Overall v5 changes:

    ๐ŸŽ Major performance and bundle size improvements over v4, see the announcement blog for more details!

    ๐Ÿ’… StyleSheetManager enhancements

    • you can now supply stylis plugins like stylis-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;`
    

    ๐Ÿ”„ Changes since the last beta:

    ๐Ÿ’… 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"

    ๐Ÿ’… 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

    ๐Ÿ’… replace merge-anything with mixin-deep (#2838); saving bytes, this is used when merging defaultProps for extended styled components

    ๐Ÿ’… shard createGlobalStyle by runtime instance (#2824); cGS is implemented such that it's really meant to be used as a singleton, but it's not uncommon for people to have multiple instances of the same cGS component on the page at once. This change ensures that as instances and mounted and removed the existing global styles don't get removed as well

    ๐Ÿ“ memoize theme (#2820); a minor performance tweak when ThemeProvider is given a reference-equal theme prop

    ๐Ÿ’… make ThemeProvider error straightforward (#2787); more obvious messaging that the theme prop is required when using ThemeProvider