implement sheet.update() #356

package.json

@@ -40,6 +40,7 @@
     "babel-preset-es2015": "6.18.0",
     "babel-preset-stage-0": "6.16.0",
     "codecov": "1.0.1",
+    "common-tags": "^1.4.0",
     "cross-env": "3.1.3",
     "detect-browser": "1.5.0",
     "es5-shim": "4.5.9",

src/RulesContainer.js

@@ -106,6 +106,22 @@ export default class RulesContainer {
     delete this.classes[rule.name]
   }
 
+  update(data: Object): void {
+    this.index.forEach((rule) => {
+      const style = rule.originalStyle
+      for (const prop in style) {
+        const value = style[prop]
+        if (typeof value === 'function') {
+          const computedValue = value(data)
+          rule.prop(prop, computedValue)
+        }
+      }
+      if (rule.rules instanceof RulesContainer) {
+        rule.rules.update(data)
+      }
+    })
+  }
+
   /**
    * Convert rules to a CSS string.
    */

src/StyleSheet.js

@@ -184,6 +184,11 @@ export default class StyleSheet {
     return this
   }
 
+  update(data: Object): this {
+    this.rules.update(data)
+    return this
+  }
+
   /**
    * Convert rules to a CSS string.
    */

src/plugins/RegularRule.js

@@ -105,9 +105,12 @@ export default class RegularRule {
   prop(name: string, value?: string): RegularRule|string {
     // Its a setter.
     if (value != null) {
-      this.style[name] = value
-      // Only defined if option linked is true.
-      if (this.renderable) this.renderer.setStyle(this.renderable, name, value)
+      // Don't do anything if the value has not changed.
+      if (this.style[name] !== value) {
+        this.style[name] = value
+        // Only defined if option linked is true.
+        if (this.renderable) this.renderer.setStyle(this.renderable, name, value)
+      }
       return this
     }
     // Its a getter, read the value from the DOM if its not cached.

tests/functional/sheet.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 
+import {stripIndent} from 'common-tags'
 import expect from 'expect.js'
 import {create} from '../../src'
 import DomRenderer from '../../src/backends/DomRenderer'
@@ -401,4 +402,49 @@ describe('Functional: sheet', () => {
       expect(sheet.classes.a, 'test')
     })
   })
+
+  describe('sheet.update()', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss.createStyleSheet({
+        a: {
+          color: theme => theme.color
+        },
+        '@media all': {
+          b: {
+            color: theme => theme.color
+          }
+        }
+      }, {link: true})
+    })
+
+    afterEach(() => {
+      sheet.detach()
+    })
+
+    it('should return correct .toString()', () => {
+      expect(sheet.toString()).to.be('')
+
+      sheet.update({
+        color: 'green'
+      })
+
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          color: green;
+        }
+        @media all {
+          .b-id {
+            color: green;
+          }
+        }
+      `)
+    })
+
+    it('should render updated props', () => {
+      sheet.update({color: 'green'}).attach()
+      expect(getCss(getStyle())).to.be(removeWhitespace(sheet.toString()))
+    })
+  })
 })