v2.0.0
What's new
- More utilities for CSS properties
- Uses verbose naming convention for
textAlign
,alignItems
,justifyContent
,flexWrap
, and other CSS properties style
,responsiveStyle
, andpseudoStyle
utilities now acceptgetter
andgetters
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
, andcolor
- The repo has been reorganized as a monorepo
Breaking
- The
cleanElement
utility is now a separate package, removing thereact
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 theborders
utility - The
borderTop
,borderRight
,borderBottom
, andborderLeft
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 customtheme.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 tothemeGet
(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 withstyle
andresponsiveStyle
Shims for breaking changes
To make migration easier, some breaking changes will continue to work as intended or similarly:
justifyContent
is aliased to thejustify
proptextAlign
is aliased to thealign
prop, though this may cause unexpected behavior when used with thealignItems
propalignItems
is aliased to thealign
prop, though this may cause unexpected behavior when used with thetextAlign
propflexWrap
is aliased to thewrap
prop, but a string value ofwrap
ornowrap
should be provided. (a shim to convert booleantrue
values towrap
has been added as well)borderWidth
now works similarly to the newborders
utility, which will continue to work for most use-cases- The
themeGet
utility is aliased to atheme
export
New utilities
- fontFamily
- display
- minWidth
- height
- maxHeight
- minHeight
- size (width & height)
- alignContent
- order
- borders
- backgroundImage
- backgroundSize
- backgroundPosition
- zIndex
- top
- right
- bottom
- left