css-in-js - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

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 @@ `;

License.md

@@ -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:

package.json

 {
   "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",

Readme.md

@@ -77,2 +77,46 @@ [![Travis – build status
 
+<a                                                       id="/syntax"></a>&nbsp;
+
+## 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>&nbsp;
@@ -79,0 +123,0 @@

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;
+}
+`
+  )
+);

No alert changes

Improved metrics

Total package byte prevSize

7615

22.04%

Lines of code

103

33.77%

Number of lines in readme file

135

48.35%

No dependency changes