Awesome

Style Helper

Style Helper is a small utility for CSS-in-JS functions.

Installation

npm install style-helper --save

Usage

import { quote, url, objectify, merge } from 'style-helper'

Quote

Wrap a string in quotes (useful for the psuedo-element content property).

css({
  '&:before': {
    content: quote('Hello World') //=> `"Hello World"`
  }
})

URL

Wrap a string in the CSS url() function.

css({
  backgroundImage: url('image.png') //=> `url("image.png")`
})

Merge

Merge CSS objects recursively.

import { ellipsis } from './styles'

css(merge({ padding: 10 }, ellipsis)) //=> { padding: 10, ... }

Multi

Repeats the same style for multiple selectors (reference issue).

css(multi(['& .a', '& .b'], { margin: 10 }))

Objectify

Turn a list of arguments into an object (...[key, value]).

// Simple properties.
css(objectify(
  ['padding', 10],
  ['margin', 10]
)) //=> { padding: 10, margin: 10 }

// Array key for repeating property values.
css(objectify(
  [
    ['& .a', '& .b'],
    { margin: 10 }
  ]
)) //=> { '& .a': { margin: 10 }, '& .b': { margin: 10 } }

License

MIT license