An extension library for styled-system

To add to the CSS based props of styled-system, styled-system-booleans enables props that represent a set of CSS properties and values.

Some examples

Instead of

<!-- "vanilla" styled-system -->
<Boop
  display="flex"
  flexDirection={['column', 'row']}
  justifyContent={[null, null, 'center']}
>
  ...
</Boop>

You could do something like

<Boop
  flex
  column
  row={[false, true]}
  justifyCenter={[false, false, true]}
>
  ...
</Boop>

or

<Boop
  flex
  column
  row="1"
  justifyCenter="2"
>
  ...
</Boop>

The configuration for the above example would look like this:

import styled from 'fav-styled-component-library-here'
import { layout, flexbox, compose } from 'styled-system'
import convertProps from 'styled-system-booleans'

const config = {
  flex: { display: 'flex' },
  row: { flexDirection: 'row' },
  column: { flexDirection: 'column' },
  justifyCenter: { justifyContent: 'center' }
}

const Boop = styled.div.attrs(props => ({
  ...convertProps(config, props)
}))`
  ${compose(layout, flexbox)}
`

More Info

styled-system-booleans converts the component's props into the ones styled-system knows. The config object's keys are the prop names you want to enable and it's values are objects of the CSS properties you want to apply when that prop is used. The resulting props can then be used in a few different ways: as a Boolean, as an Array or Object, or as a String.

Boolean: By using the property as a boolean (without a value) it applies the prop's associated CSS to the component without media queries.

Array || Object: Passing in an array or object to the prop means the keys will map to the breakpoints provided, like how they would with styled-system. Only instead of the values of this passed in array or object being the desired CSS value, they are instead tested for their falsy/ truthiness. Any truthy value will set the property, and any falsy value will be ignored. The examples favor true and false, though 1s and 0s could also be used.

String: The above syntax can be a little verbose and so a string syntax is included as a sorter alternative. With a string value you only need to provide the keys of the array or object breakpoints you would like the property to be active at. Spaces are used separate the keys. So example={[false, true, false, true]} and example={{ sm: true, lg: true }} would convert to example="1 3" and example="sm lg".

Functions as CSS values

styled-system-booleans also supports functions as CSS property values in the config object.

<Boop
  customBorder={[4, 10, 18]}
  fixed={[{ x: 0 }, { t: 0 }]}
>
  ...
</Boop>

import styled from 'fav-styled-component-library-here'
import { border, layout, compose } from 'styled-system'
import convertProps from 'styled-system-booleans'

const getValue = array => array.find(v => v !== undefined)

const config = {
  customBorder: {
    border: (key, property) => `${property[key]}px solid green`
  },
  fixed: {
    position: (key, property) => property === true || key === 0) && 'fixed',
    top: (key, property) => getValue([property[key].t, property[key].y, property[key].edges, null]),
    right: (key, property) => getValue([property[key].r, property[key].x, property[key].edges, null]),
    bottom: (key, property) => getValue([property[key].b, property[key].y, property[key].edges, null]),
    left: (key, property) => getValue([property[key].l, property[key].x, property[key].edges, null]),
    zIndex: (key, property) => getValue([property[key].z, null]),
  }
}

const Boop = styled.div.attrs(props => ({
  ...convertProps(config, props)
}))`
  ${compose(border, layout)}
`

With functions you have more control over what happens with the prop values. Functions provided as CSS values in the config object run once for each key of breakpoints. The following parameters are passed into these functions:

1. The current key of breakpoints
2. The prop's value
3. The props object from the component