release 5.1.0 #264

alternative syntax for space and comma separated values, which enables default unit even in short notation
cssinjs · Jul 13, 2016 · 267f849 · 267f849
1 parent 91f5977
commit 267f849
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 17 deletions.
diff --git a/history.md b/history.md
@@ -1,3 +1,7 @@
+## 5.1.0 / 2016-07-13
+
+- alternative syntax for space and comma separated values #264
+
 ## 5.0.0 / 2016-07-10
 
 - new fallbacks api #256

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "jss",
   "description": "A lib for generating Style Sheets with JavaScript.",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "author": {
     "name": "Oleg Slobodskoi",
     "email": "oleg008@gmail.com"

diff --git a/src/rules/FontFaceRule.js b/src/rules/FontFaceRule.js
@@ -1,4 +1,4 @@
-import {toCSS} from '../utils'
+import {toCss} from '../utils'
 
 /**
  * Font-face rules.
@@ -16,19 +16,19 @@ export default class Rule {
   /**
    * Generates a CSS string.
    *
-   * @see toCSS
+   * @see toCss
    * @api public
    */
   toString(options) {
     if (Array.isArray(this.style)) {
       let str = ''
       for (let index = 0; index < this.style.length; index++) {
-        str += toCSS(this.selector, this.style[index], options)
+        str += toCss(this.selector, this.style[index], options)
         if (this.style[index + 1]) str += '\n'
       }
       return str
     }
 
-    return toCSS(this.selector, this.style, options)
+    return toCss(this.selector, this.style, options)
   }
 }
diff --git a/src/rules/Rule.js b/src/rules/Rule.js
@@ -1,4 +1,4 @@
-import {toCSS, findClassNames} from '../utils'
+import {toCss, findClassNames, toCssValue} from '../utils'
 const {parse, stringify} = JSON
 
 
@@ -133,20 +133,20 @@ export default class Rule {
   toJSON() {
     const json = Object.create(null)
     for (const prop in this.style) {
-      if (typeof this.style[prop] != 'object') {
-        json[prop] = this.style[prop]
-      }
+      const value = this.style[prop]
+      if (typeof value !== 'object') json[prop] = value
+      else if (Array.isArray(value)) json[prop] = toCssValue(value)
     }
     return json
   }
 
   /**
    * Generates a CSS string.
    *
-   * @see toCSS
+   * @see toCss
    * @api public
    */
   toString(options) {
-    return toCSS(this.selector, this.style, options)
+    return toCss(this.selector, this.style, options)
   }
 }
diff --git a/src/utils.js b/src/utils.js
@@ -40,6 +40,32 @@ function indent(level, str) {
   return indentStr + str
 }
 
+/**
+ * Converts array values to string.
+ *
+ * `margin: [['5px', '10px']]` > `margin: 5px 10px;`
+ * `border: ['1px', '2px']` > `border: 1px, 2px;`
+ *
+ * @param {Array} value
+ * @return {String|Number|Object}
+ */
+export const toCssValue = (() => {
+  function joinWithSpace(value) {
+    return value.join(' ')
+  }
+
+  return function joinWithComma(value) {
+    if (!Array.isArray(value)) return value
+
+    // Support space separated values.
+    if (Array.isArray(value[0])) {
+      return joinWithComma(value.map(joinWithSpace))
+    }
+
+    return value.join(', ')
+  }
+})()
+
 /**
  * Converts a Rule to CSS string.
  *
@@ -52,7 +78,7 @@ function indent(level, str) {
  * @param {Object} options
  * @return {String}
  */
-export function toCSS(selector, style, options = {}) {
+export function toCss(selector, style, options = {}) {
   let indentationLevel = options.indentationLevel || 0
   let str = ''
 
@@ -70,21 +96,21 @@ export function toCSS(selector, style, options = {}) {
       for (let index = 0; index < fallbacks.length; index++) {
         const fallback = fallbacks[index]
         for (const prop in fallback) {
-          str += `\n${indent(indentationLevel, `${prop}: ${fallback[prop]};`)}`
+          str += `\n${indent(indentationLevel, `${prop}: ${toCssValue(fallback[prop])};`)}`
         }
       }
     }
     // Object syntax {fallbacks: {prop: value}}
     else {
       for (const prop in fallbacks) {
-        str += `\n${indent(indentationLevel, `${prop}: ${fallbacks[prop]};`)}`
+        str += `\n${indent(indentationLevel, `${prop}: ${toCssValue(fallbacks[prop])};`)}`
       }
     }
   }
 
   for (const prop in style) {
     if (prop !== 'fallbacks') {
-      str += `\n${indent(indentationLevel, `${prop}: ${style[prop]};`)}`
+      str += `\n${indent(indentationLevel, `${prop}: ${toCssValue(style[prop])};`)}`
     }
   }
 

diff --git a/tests/integration/rules.js b/tests/integration/rules.js
@@ -59,22 +59,52 @@ describe('Integration: rules', () => {
       expect(rule.toString({selector: false})).to.be('\nfloat: left;')
     })
 
-    it('shuld return CSS with fallbacks object', () => {
+    it('should return CSS with fallbacks object', () => {
       const rule = jss.createRule('.a', {
         display: 'run-in',
         fallbacks: {display: 'inline'}
       }, {named: false})
       expect(rule.toString()).to.be('.a {\n  display: inline;\n  display: run-in;\n}')
     })
 
-    it('shuld return CSS with fallbacks array', () => {
+    it('should return CSS with fallbacks array', () => {
       const rule = jss.createRule('.a', {
         display: 'run-in',
         fallbacks: [{display: 'inline'}]
       }, {named: false})
       expect(rule.toString()).to.be('.a {\n  display: inline;\n  display: run-in;\n}')
     })
 
+    it('should return CSS with comma separated values', () => {
+      const rule = jss.createRule('.a', {
+        border: ['1px solid red', '1px solid blue']
+      }, {named: false})
+      expect(rule.toString()).to.be('.a {\n  border: 1px solid red, 1px solid blue;\n}')
+    })
+
+    it('should return CSS with comma separated values inside of fallbacks', () => {
+      let rule = jss.createRule('.a', {
+        fallbacks: {
+          border: ['1px solid red', '1px solid blue']
+        }
+      }, {named: false})
+      expect(rule.toString()).to.be('.a {\n  border: 1px solid red, 1px solid blue;\n}')
+
+      rule = jss.createRule('.a', {
+        fallbacks: [{
+          border: ['1px solid red', '1px solid blue']
+        }]
+      }, {named: false})
+      expect(rule.toString()).to.be('.a {\n  border: 1px solid red, 1px solid blue;\n}')
+    })
+
+    it('should return CSS with space separated values', () => {
+      const rule = jss.createRule('.a', {
+        margin: [['5px', '10px']]
+      }, {named: false})
+      expect(rule.toString()).to.be('.a {\n  margin: 5px 10px;\n}')
+    })
+
     it('should return CSS from @charset rule', () => {
       const rule = jss.createRule('@charset', '"utf-8"')
       expect(rule.type).to.be('simple')
@@ -274,6 +304,28 @@ describe('Integration: rules', () => {
       const rule = jss.createRule(style)
       expect(rule.toJSON()).to.eql({color: 'red'})
     })
+
+    it('should skip fallbacks', () => {
+      const rule = jss.createRule({
+        display: 'run-in',
+        fallbacks: {display: 'inline'}
+      })
+      expect(rule.toJSON()).to.eql({display: 'run-in'})
+    })
+
+    it('should have proper comma separated values', () => {
+      const rule = jss.createRule({
+        border: ['1px solid red', '1px solid blue']
+      })
+      expect(rule.toJSON()).to.eql({border: '1px solid red, 1px solid blue'})
+    })
+
+    it('should have proper space separated values', () => {
+      const rule = jss.createRule({
+        margin: [['5px', '10px']]
+      })
+      expect(rule.toJSON()).to.eql({margin: '5px 10px'})
+    })
   })
 
   describe('rule.prop()', () => {