Skip to content

v2.0.0

Choose a tag to compare

View all tags
@jxnblk jxnblk released this 16 Feb 01:20
· 2951 commits to master since this release
v2.0.0
a61a369

What's new

  • More utilities for CSS properties
  • Uses verbose naming convention for textAlign, alignItems, justifyContent, flexWrap, and other CSS properties
  • style, responsiveStyle, and pseudoStyle utilities now accept getter and getters arguments for converting values
  • New borders utility that normalizes the API with other styled-system utilities
  • Rewritten with ES module syntax
  • DRYer code base for utilities like fontSize, width, and color
  • The repo has been reorganized as a monorepo

Breaking

  • The cleanElement utility is now a separate package, removing the react dependency from the core library
  • The flexWrap utility now expects a string value for its prop (previously a boolean)
  • The borderWidth utility has been replaced with the borders utility
  • The borderTop, borderRight, borderBottom, and borderLeft props no longer accept boolean props, but follow the same convention as other utilities
  • The default spacing scale has changed to [ 0, 4, 8, 16, 32, 64, 128, 256, 512 ] (this only affects usage without a custom theme.space provided
  • Number values for breakpoints are now converted to px instead of ems to better match the rest of the library
  • The theme utility has been renamed to themeGet (alternative names under consideration)
  • Removes removeProps utility
  • Removes idx utility
  • Removes legacy responsiveStyle arguments API
  • The pseudoStyle arguments API has changed to more closely align with style and responsiveStyle

Shims for breaking changes

To make migration easier, some breaking changes will continue to work as intended or similarly:

  • justifyContent is aliased to the justify prop
  • textAlign is aliased to the align prop, though this may cause unexpected behavior when used with the alignItems prop
  • alignItems is aliased to the align prop, though this may cause unexpected behavior when used with the textAlign prop
  • flexWrap is aliased to the wrap prop, but a string value of wrap or nowrap should be provided. (a shim to convert boolean true values to wrap has been added as well)
  • borderWidth now works similarly to the new borders utility, which will continue to work for most use-cases
  • The themeGet utility is aliased to a theme export

New utilities

  • fontFamily
  • display
  • minWidth
  • height
  • maxHeight
  • minHeight
  • size (width & height)
  • alignContent
  • order
  • borders
  • backgroundImage
  • backgroundSize
  • backgroundPosition
  • zIndex
  • top
  • right
  • bottom
  • left
Assets 2
Loading