expand-spacings

Expands margin and padding css properties to their long form. This module is perfect for a css-in-js library with an atomic approach, deduping all properties to single purpose classes.

Why?

If your using fela for example, you have a plugin like fela-plugin-unit to add units to your plain numbers. Because fela doesn't understand shorthand properties (like, padding: 10 5) it also can't prefix them with units. You'll end up with code that'll look a lot like this:

const rule = (props) => ({
  padding: `${theme.scale[1]}px ${theme.scale[2]}px`
})

This module seperates margin and padding into their normalized long form:

const rule = (props) => ({
  color: props.color,
  ...padding(theme.scale[1], theme.scale[2])
})

// expands to

const output = {
  color: 'green',
  paddingTop: '5px',
  paddingBottom: '5px',
  paddingLeft: '10px',
  paddingRight: '10px',
}

Installation

npm install expand-spacings

API

The arguments for both margin() and padding() functions work the same as their css definitions: https://developer.mozilla.org/en/docs/Web/CSS/padding

// all sides
margin(10)
// vertical, horizontal
margin(5, 10)
// top, right, bottom, left
margin(5, 10, 15, 20)

Author

expand-spacings © Fabian Eichenberger, Released under the MIT License. Authored and maintained by Fabian Eichenberger with help from contributors (list).

GitHub @queckezz · Twitter @queckezz