├── .gitignore
├── README.md
├── index.js
├── package.json
└── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # yo-css
 3 | 
 4 | [yo-yo](https://github.com/maxogden/yo-yo) helper for inline css, inspired by [React: CSS in JS by vjeux](https://speakerdeck.com/vjeux/react-css-in-js).
 5 | 
 6 | ## Example
 7 | 
 8 | ```js
 9 | const css = require('yo-css')
10 | const yo = require('yo-yo')
11 | 
12 | const style = {
13 |   backgroundColor: 'red',
14 |   width: 0,
15 |   border: '3px'  
16 | }
17 | 
18 | const overwrite = {
19 |   backgroundColor: 'green'  
20 | }
21 | 
22 | const el = yo`
23 |   <div style=${css(style, overwrite)}>
24 |     Test!
25 |   </div>
26 | `
27 | 
28 | document.body.appendChild(el)
29 | ```
30 | 
31 | ## Installation
32 | 
33 | ```bash
34 | $ npm install yo-css
35 | ```
36 | 
37 | ## API
38 | 
39 | ### css(...styles)
40 | 
41 | Given any number of style objects, merges them into one and returns a valid string of css. Later style objects have precedence. Use camelCase for your properties, this function converts them into proper css case.
42 | 
43 | ## License
44 | 
45 | MIT
46 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const slug = require('hyphenate-style-name')
 4 | 
 5 | module.exports = (...styles) => {
 6 |   const style = Object.assign({}, ...styles)
 7 |   return Object.keys(style)
 8 |     .map(key => `${slug(key)}: ${style[key]}`)
 9 |     .join('; ')
10 | }
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "yo-css",
 3 |   "version": "1.1.0",
 4 |   "description": "yo-yo helper for inline css",
 5 |   "license": "MIT",
 6 |   "repository": "juliangruber/yo-css",
 7 |   "scripts": {
 8 |     "test": "tape test.js && standard"
 9 |   },
10 |   "dependencies": {
11 |     "hyphenate-style-name": "^1.0.1"
12 |   },
13 |   "devDependencies": {
14 |     "standard": "^9.0.2",
15 |     "tape": "^4.6.0"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const test = require('tape')
 4 | const css = require('.')
 5 | 
 6 | test(t => {
 7 |   t.equal(css(), '')
 8 |   t.equal(css({}), '')
 9 |   t.equal(css({ foo: 3 }), 'foo: 3')
10 |   t.equal(css({ foo: 'bar' }), 'foo: bar')
11 |   t.equal(css({ 'WebkitTransition': 'bar' }), '-webkit-transition: bar')
12 |   t.equal(css({ 'MozTransition': 'bar' }), '-moz-transition: bar')
13 |   t.equal(css({ 'msTransition': 'bar' }), '-ms-transition: bar')
14 |   t.equal(css({ foo: 'bar' }, { foo: 'beep' }), 'foo: beep')
15 |   t.equal(css({ beepBoop: 'bar' }), 'beep-boop: bar')
16 |   t.equal(css({ foo: 'bar', beep: 'boop' }), 'foo: bar; beep: boop')
17 |   t.end()
18 | })
19 | 
20 | 


--------------------------------------------------------------------------------