Dynamic values full syntax

packages/jss-plugin-isolate/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-isolate.js": {
-    "bundled": 14372,
-    "minified": 9394,
-    "gzipped": 2667
+    "bundled": 14368,
+    "minified": 9404,
+    "gzipped": 2670
   },
   "dist/jss-plugin-isolate.min.js": {
-    "bundled": 14372,
-    "minified": 9394,
-    "gzipped": 2667
+    "bundled": 14368,
+    "minified": 9404,
+    "gzipped": 2670
   },
   "dist/jss-plugin-isolate.cjs.js": {
-    "bundled": 3922,
-    "minified": 1604,
-    "gzipped": 746
+    "bundled": 3920,
+    "minified": 1614,
+    "gzipped": 750
   },
   "dist/jss-plugin-isolate.esm.js": {
-    "bundled": 3668,
-    "minified": 1410,
-    "gzipped": 678,
+    "bundled": 3666,
+    "minified": 1420,
+    "gzipped": 681,
     "treeshaked": {
       "rollup": {
         "code": 99,

packages/jss-plugin-syntax-expand/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "dist/jss-plugin-syntax-expand.js": {
-    "bundled": 10991,
+    "bundled": 11087,
     "minified": 4112,
     "gzipped": 1450
   },
   "dist/jss-plugin-syntax-expand.min.js": {
-    "bundled": 10991,
+    "bundled": 11087,
     "minified": 4112,
     "gzipped": 1450
   },
   "dist/jss-plugin-syntax-expand.cjs.js": {
-    "bundled": 10010,
+    "bundled": 10102,
     "minified": 4283,
     "gzipped": 1451
   },
   "dist/jss-plugin-syntax-expand.esm.js": {
-    "bundled": 9928,
+    "bundled": 10020,
     "minified": 4214,
     "gzipped": 1406,
     "treeshaked": {

packages/jss-plugin-syntax-extend/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "dist/jss-plugin-syntax-extend.js": {
-    "bundled": 5220,
+    "bundled": 5265,
     "minified": 1801,
     "gzipped": 912
   },
   "dist/jss-plugin-syntax-extend.min.js": {
-    "bundled": 4104,
+    "bundled": 4149,
     "minified": 1281,
     "gzipped": 630
   },
   "dist/jss-plugin-syntax-extend.cjs.js": {
-    "bundled": 3404,
+    "bundled": 3447,
     "minified": 1384,
     "gzipped": 620
   },
   "dist/jss-plugin-syntax-extend.esm.js": {
-    "bundled": 3186,
+    "bundled": 3229,
     "minified": 1216,
     "gzipped": 551,
     "treeshaked": {

packages/jss-plugin-syntax-extend/src/index.test.js

@@ -334,8 +334,8 @@ describe('jss-plugin-syntax-extend', () => {
     beforeEach(() => {
       const styles = {
         a: data => ({
-          height: '200px',
-          extend: data.redContainer
+          extend: data.redContainer,
+          height: '200px'
         })
       }
 
@@ -350,7 +350,7 @@ describe('jss-plugin-syntax-extend', () => {
 
     it('should have correct output', () => {
       expect(sheet.getRule('a')).to.not.be(undefined)
-      expect(sheet.toString()).to.be('.a-id {\n  height: 200px;\n  background: red;\n}')
+      expect(sheet.toString()).to.be('.a-id {\n  background: red;\n  height: 200px;\n}')
     })
   })
 

packages/jss-plugin-syntax-nested/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-syntax-nested.js": {
-    "bundled": 5743,
+    "bundled": 5777,
     "minified": 1944,
-    "gzipped": 1048
+    "gzipped": 1050
   },
   "dist/jss-plugin-syntax-nested.min.js": {
-    "bundled": 4627,
+    "bundled": 4661,
     "minified": 1424,
-    "gzipped": 781
+    "gzipped": 782
   },
   "dist/jss-plugin-syntax-nested.cjs.js": {
-    "bundled": 3612,
+    "bundled": 3646,
     "minified": 1347,
-    "gzipped": 720
+    "gzipped": 722
   },
   "dist/jss-plugin-syntax-nested.esm.js": {
-    "bundled": 3378,
+    "bundled": 3412,
     "minified": 1168,
-    "gzipped": 640,
+    "gzipped": 642,
     "treeshaked": {
       "rollup": {
         "code": 59,

packages/jss-plugin-syntax-rule-value-function/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-syntax-rule-value-function.js": {
-    "bundled": 2073,
-    "minified": 827,
-    "gzipped": 472
+    "bundled": 2512,
+    "minified": 912,
+    "gzipped": 510
   },
   "dist/jss-plugin-syntax-rule-value-function.min.js": {
-    "bundled": 2073,
-    "minified": 827,
-    "gzipped": 472
+    "bundled": 2512,
+    "minified": 912,
+    "gzipped": 510
   },
   "dist/jss-plugin-syntax-rule-value-function.cjs.js": {
-    "bundled": 1672,
-    "minified": 737,
-    "gzipped": 411
+    "bundled": 2101,
+    "minified": 801,
+    "gzipped": 449
   },
   "dist/jss-plugin-syntax-rule-value-function.esm.js": {
-    "bundled": 1600,
-    "minified": 678,
-    "gzipped": 363,
+    "bundled": 2029,
+    "minified": 742,
+    "gzipped": 407,
     "treeshaked": {
       "rollup": {
         "code": 12,

packages/jss-plugin-syntax-rule-value-function/src/function-rules.test.js

@@ -1,7 +1,7 @@
 import expect from 'expect.js'
 import {stripIndent} from 'common-tags'
-
 import {create} from 'jss'
+import nestedPlugin from '../../jss-plugin-syntax-nested'
 import functionPlugin from '.'
 
 const settings = {createGenerateClassName: () => rule => `${rule.key}-id`}
@@ -10,10 +10,10 @@ describe('jss-plugin-syntax-rule-value-function: Function rules', () => {
   let jss
 
   beforeEach(() => {
-    jss = create(settings).use(functionPlugin())
+    jss = create(settings).use(nestedPlugin(), functionPlugin())
   })
 
-  describe('.createStyleSheet()', () => {
+  describe('basic', () => {
     let sheet
 
     beforeEach(() => {
@@ -45,6 +45,125 @@ describe('jss-plugin-syntax-rule-value-function: Function rules', () => {
     })
   })
 
+  describe('remove props', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss
+        .createStyleSheet(
+          {
+            a: data => {
+              if (data.noDisplay) {
+                return {color: data.color}
+              }
+              return {
+                color: data.color,
+                display: 'block'
+              }
+            }
+          },
+          {link: true}
+        )
+        .attach()
+    })
+
+    afterEach(() => {
+      sheet.detach()
+    })
+
+    it('should compile with color and display', () => {
+      sheet.update({color: 'red'})
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          color: red;
+          display: block;
+        }
+      `)
+    })
+
+    it('should compile with color', () => {
+      sheet.update({color: 'red'})
+      sheet.update({color: 'red', noDisplay: true})
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          color: red;
+        }
+      `)
+    })
+  })
+
+  describe('fallbacks', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss
+        .createStyleSheet(
+          {
+            a: data => ({
+              color: data.color,
+              fallbacks: {
+                color: 'green'
+              }
+            })
+          },
+          {link: true}
+        )
+        .attach()
+    })
+
+    afterEach(() => {
+      sheet.detach()
+    })
+
+    it('should output with fallbacks', () => {
+      sheet.update({color: 'red'})
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          color: green;
+          color: red;
+        }
+      `)
+    })
+  })
+
+  describe('@media', () => {
+    let sheet
+
+    beforeEach(() => {
+      sheet = jss
+        .createStyleSheet(
+          {
+            a: data => ({
+              color: data.color,
+              '@media all': {
+                color: 'green'
+              }
+            })
+          },
+          {link: true}
+        )
+        .attach()
+    })
+
+    afterEach(() => {
+      sheet.detach()
+    })
+
+    it('should output with @media', () => {
+      sheet.update({color: 'red'})
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          color: red;
+        }
+        @media all {
+          .a-id {
+            color: green;
+          }
+        }
+      `)
+    })
+  })
+
   describe('.addRule() with styleRule', () => {
     let sheet