css-in-js
Advanced tools
Comparing version 1.0.0 to 1.1.0
21
index.js
@@ -7,11 +7,18 @@ const indentString = require('indent-string'); | ||
const render = (selector) => { | ||
const styleObject = input[selector]; | ||
const style = input[selector]; | ||
const stylesArray = (Array.isArray(style) ? | ||
style : | ||
[style] | ||
); | ||
return `${selector} { | ||
${ | ||
Object.keys(styleObject).map( | ||
(property) => (typeof styleObject[property] === 'string' ? | ||
` ${property}: ${styleObject[property]};\n` : | ||
indentString(renderObject(styleObject), ' ') | ||
) | ||
).join('') | ||
stylesArray.map((styleObject) => ( | ||
Object.keys(styleObject).map( | ||
(property) => (typeof styleObject[property] === 'string' ? | ||
` ${property}: ${styleObject[property]};\n` : | ||
indentString(renderObject(styleObject), ' ') | ||
) | ||
).join('') | ||
)).join('') | ||
}} | ||
@@ -18,0 +25,0 @@ `; |
@@ -1,2 +0,2 @@ | ||
Copyright © 2015-2016 Tomek Wiszniewski | ||
Copyright © 2016 Tomek Wiszniewski | ||
@@ -3,0 +3,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
{ | ||
"name": "css-in-js", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "Write stylesheets in JS. Works with any stack.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -77,2 +77,46 @@ [![Travis – build status | ||
<a id="/syntax"></a> | ||
## Syntax | ||
Any JS object is translated recursively to a CSS tree. To ensure two-way compatibility, we only support [git.io/orthodox](https://git.io/orthodox) style objects. | ||
<a id="/syntax/fallbacks"></a> | ||
### Fallbacks | ||
When using fancy things which need a CSS fallback, you might want to set the same property more than once: | ||
```css | ||
.drag-me { | ||
cursor: pointer; | ||
cursor: -webkit-grab; | ||
cursor: grab; | ||
} | ||
``` | ||
To cover these cases, we allow passing an array of style objects: | ||
```js | ||
▸ cssInJs({ | ||
'.drag-me': [{ | ||
cursor: 'pointer', | ||
}, { | ||
cursor: '-webkit-grab', | ||
}, { | ||
cursor: 'grab', | ||
}], | ||
}); | ||
◂ ` | ||
.drag-me { | ||
cursor: pointer; | ||
cursor: -webkit-grab; | ||
cursor: grab; | ||
} | ||
` | ||
``` | ||
<a id="/credits"></a> | ||
@@ -79,0 +123,0 @@ |
21
test.js
@@ -67,1 +67,22 @@ const test = require('ava'); | ||
); | ||
test( | ||
'Supports multiple property fallbacks', | ||
assert => assert.is( | ||
cssInJs({ | ||
'.drag-me': [{ | ||
cursor: 'pointer', | ||
}, { | ||
cursor: '-webkit-grab', | ||
}, { | ||
cursor: 'grab', | ||
}], | ||
}), | ||
`.drag-me { | ||
cursor: pointer; | ||
cursor: -webkit-grab; | ||
cursor: grab; | ||
} | ||
` | ||
) | ||
); |
Sorry, the diff of this file is not supported yet
7615
103
135