expand-spacings

    1.0.2 • Public • Published

    expand-spacings Js Standard Style

    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

    Install

    npm i expand-spacings

    DownloadsWeekly Downloads

    6

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • queckezz