Performance rewrite
This rewrite helps make styled-system smaller, faster, and simplifies the API.
Added
Changed
style
utility is now responsive by default- All built-in style functions now support responsive array values
backgroundImage
no longer wraps values withurl()
buttonStyle
prop has been renamed tovariant
- The
style
utilitygetter
argument has beend renamed totransformValue
util.get
no longer supports a fallback argument
Removed
responsiveStyle
usestyle
insteadcomplexStyle
usevariant
insteadcomplexStyle
(variant
) boolean props are no longer supportedpseudoStyle
hover
focus
active
disabled
fontSize
andwidth
no longer support shorthand propsalias
optionnumberToPx
option (passutil.px
to thetransformValue
argument instead)util.media
util.neg
util.arr
util.getWidth
util.mq
util.fallbackTheme
util.breaks
util.dec
util.getValue
Migrating from v2
- Replace all deprecated shorthand
f
props with thefontSize
prop - Replace all deprecated shorthand
w
props with thewidth
prop - Replace the deprecated
buttonStyle
prop with thevariant
prop - Ensure
backgroundImage
props include the CSSurl()
syntax where needed - Replace instances of
responsiveStyle
with thestyle
utility - Replace the
numberToPx
argument withtransformValue: util.px
- Rename the
getter
argument withtransformValue
- Replace
complexStyle
withvariant
- Replace custom
alias
props with something like recompose's mapProps - Ensure boolean props are not used for
variant
styles, including:buttonStyle
textStyle
colors
- If you were using
hover
,focus
,active
,disabled
, orpseudoStyle
, consider adding your own replacement - Consider adding replacements for any of the removed utilities listed above