https://github.com/blakeembrey/style-helper

Small helpers for working with CSS-in-JS
https://github.com/blakeembrey/style-helper

css css-in-js free-style stylesheet utility

Last synced: 13 days ago
JSON representation

Small helpers for working with CSS-in-JS

• Host: GitHub
• URL: https://github.com/blakeembrey/style-helper
• Owner: blakeembrey
• License: mit
• Created: 2017-08-09T20:19:07.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-12-12T07:37:26.000Z (11 months ago)
• Last Synced: 2024-05-01T12:21:52.760Z (6 months ago)
• Topics: css, css-in-js, free-style, stylesheet, utility
• Language: TypeScript
• Size: 482 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# Style Helper

[![NPM version](https://img.shields.io/npm/v/style-helper.svg?style=flat)](https://npmjs.org/package/style-helper)

[![NPM downloads](https://img.shields.io/npm/dm/style-helper.svg?style=flat)](https://npmjs.org/package/style-helper)

[![Build status](https://img.shields.io/travis/blakeembrey/style-helper.svg?style=flat)](https://travis-ci.org/blakeembrey/style-helper)

[![Test coverage](https://img.shields.io/coveralls/blakeembrey/style-helper.svg?style=flat)](https://coveralls.io/r/blakeembrey/style-helper?branch=master)

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

## Installation

```

npm install style-helper --save

```

## Usage

```js

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

```

### Quote

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

```js

css({

  '&:before': {

    content: quote('Hello World') //=> `"Hello World"`

  }

})

```

### URL

Wrap a string in the CSS `url()` function.

```js

css({

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

})

```

### Merge

Merge CSS objects recursively.

```js

import { ellipsis } from './styles'

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

```

### Multi

Repeats the same style for multiple selectors ([reference issue](https://github.com/blakeembrey/free-style/issues/72)).

```js

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

```

### Objectify

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

```js

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