v4

• Rewritten core for less code duplication
• No longer merges returned style object, but returns arrays instead, which should work with common CSS-in-JS libraries
• space function has been rewritten with the core style and compose utilities
• Adds long-form props for margin and padding (e.g. marginTop). Shorthand aliases still work as before.
• Reintroduces the alias argument to style utility
• Removes the styles object export
• Removes the util object export
• Removes merge utility
• Removes the mixed utility since it did not behave as expected
• The theme "scale" is now passed as the second argument to the transformValue option in style utility
• Removes the ratio style function
• The following changes to the borders style function
  • The shorthand border props no longer transform numbers to pixel widths with a solid border-style
  • Adds borderWidth, borderStyle, borderColor, and borderRadius props
  • All border props are also available as individual imports
• Removes styleType from prop types meta fields
• Changes to the get utility: now returns the last argument as a fallback

Fix incorrectly named utility

• Rename css to mixed to avoid naming collisions

Performance rewrite

This rewrite helps make styled-system smaller, faster, and simplifies the API.

Added

• variant
• compose
• mixed

Changed

• style utility is now responsive by default
• All built-in style functions now support responsive array values
• backgroundImage no longer wraps values with url()
• buttonStyle prop has been renamed to variant
• The style utility getter argument has beend renamed to transformValue
• util.get no longer supports a fallback argument

Removed

• responsiveStyle use style instead
• complexStyle use variant instead
• complexStyle (variant) boolean props are no longer supported
• pseudoStyle
• hover
• focus
• active
• disabled
• fontSize and width no longer support shorthand props
• alias option
• numberToPx option (pass util.px to the transformValue 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 the fontSize prop
• Replace all deprecated shorthand w props with the width prop
• Replace the deprecated buttonStyle prop with the variant prop
• Ensure backgroundImage props include the CSS url() syntax where needed
• Replace instances of responsiveStyle with the style utility
• Replace the numberToPx argument with transformValue: util.px
• Rename the getter argument with transformValue
• Replace complexStyle with variant
• 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, or pseudoStyle, consider adding your own replacement
• Consider adding replacements for any of the removed utilities listed above

CSS Grid Support

v2.2.0

2.2.0

Add flexBasis and justifySelf functions

v2.1.2

2.1.2

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, 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