Support plugins processing for observables by default (#892)

* added fallbacks test to fn rules

* only call onChangeValue if plugins: true

* enable removing props from fn rules

* shorter syntax with coercion

* wip full syntax support

* restore browsers.json

* changelog

* move hook call to the core

* isProcessed flag explanation

* added tests to fn rules

* remove media rule as a function test case

* added a test for #796, as part of #682

* tests for compose plugin

* observables

- move documentation to the package
- update docs, since plugins don't apply by default
- introduce option process: true to the plugin to enable plugins if user wants that

* move fn values docs

* wording

* Added tests for using jss-plugin-syntax-expand with function rules and values

* Skip fn values with jss-expand for now

* move container rules update to the core

* optimize onProcessStyle

onProcessStyle is invoked on each .update, but in this case we only need to do this once, because fn values can't be added

* put variables in the right scope

* changelog

* Update changelog.md

* process: true always

Author: kof

changelog.md

@@ -1,13 +1,13 @@
 ## Next / 2018-09-16
 
 - Fix multiple cases where linking CSS rules didn't work (#815, #710, #664)
+- Function values and function rules support now fallbacks, media queries, nesting, global styles (#682)
 - Added support for Typed CSSOM values
 
 ### Breaking changes
 
 - Observables, function values and rules are now standalone packages, not part of the core. They are still part of the default preset though.
-- Function values and rules apply plugins by default now, which means they are slower by default. To speed them up use `sheet.update(data, {process: false})` (#682)
-- Observables will not apply plugins by default now, to make them even faster. If you want them to use plugins, can use an option when using the plugin: `jss.use(pluginObservable({process: true}))` (#682)
+- Function values, rules and observables apply plugins by default now, which means they can support all plugin defined syntaxes, but they are also slower by default. To speed them up use `sheet.update(data, {process: false})` for fn values/rules and `jss.use(pluginObservable({process: false}))` when setting up observables plugin. (#682)
 
 ## 9.8.7 / 2018-06-24
 

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

@@ -151,7 +151,7 @@ describe('jss-plugin-syntax-rule-value-observable: rules', () => {
       sheet = jss
         .createStyleSheet(
           {
-            div: new Observable(obs => {
+            a: new Observable(obs => {
               obs.next({display: 'block'})
               observer = obs
             })
@@ -163,28 +163,37 @@ describe('jss-plugin-syntax-rule-value-observable: rules', () => {
       observer.next({display: 'inline-block'})
 
       expect(sheet.toString()).to.be(stripIndent`
-        .div-id {
+        .a-id {
           display: inline-block;
         }
       `)
     })
 
     it('should not process props or values', () => {
+      jss = create(settings).use(
+        pluginObservable({process: false}),
+        pluginDefaultUnit(),
+        pluginCamelCase()
+      )
+      sheet = jss.createStyleSheet(
+        {
+          a: new Observable(obs => {
+            observer = obs
+          })
+        },
+        {link: true}
+      )
       observer.next({marginLeft: 20})
 
       expect(sheet.toString()).to.be(stripIndent`
-        .div-id {
+        .a-id {
           marginLeft: 20;
         }
       `)
     })
 
     it('should process props and values', () => {
-      jss = create(settings).use(
-        pluginObservable({process: true}),
-        pluginDefaultUnit(),
-        pluginCamelCase()
-      )
+      jss = create(settings).use(pluginObservable(), pluginDefaultUnit(), pluginCamelCase())
       sheet = jss.createStyleSheet(
         {
           a: new Observable(obs => {

packages/jss-plugin-syntax-rule-value-observable/src/observable-values.test.js

@@ -64,6 +64,18 @@ describe('jss-plugin-syntax-rule-value-observable: values', () => {
     })
 
     it('should not process value', () => {
+      jss = create(settings).use(pluginObservable({process: false}), pluginDefaultUnit())
+      sheet = jss.createStyleSheet(
+        {
+          a: {
+            height: new Observable(obs => {
+              observer = obs
+            })
+          }
+        },
+        {link: true}
+      )
+
       observer.next(20)
 
       expect(sheet.toString()).to.be(stripIndent`
@@ -74,7 +86,7 @@ describe('jss-plugin-syntax-rule-value-observable: values', () => {
     })
 
     it('should process the value', () => {
-      jss = create(settings).use(pluginObservable({process: true}), pluginDefaultUnit())
+      jss = create(settings).use(pluginObservable(), pluginDefaultUnit())
       sheet = jss.createStyleSheet(
         {
           a: {

packages/jss/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss.js": {
-    "bundled": 54280,
+    "bundled": 54282,
     "minified": 20204,
-    "gzipped": 6074
+    "gzipped": 6078
   },
   "dist/jss.min.js": {
-    "bundled": 53404,
+    "bundled": 53406,
     "minified": 19591,
-    "gzipped": 5757
+    "gzipped": 5761
   },
   "dist/jss.cjs.js": {
-    "bundled": 48003,
+    "bundled": 48005,
     "minified": 20648,
-    "gzipped": 5818
+    "gzipped": 5820
   },
   "dist/jss.esm.js": {
-    "bundled": 47546,
+    "bundled": 47548,
     "minified": 20276,
-    "gzipped": 5732,
+    "gzipped": 5735,
     "treeshaked": {
       "rollup": {
         "code": 17369,

packages/jss/src/rules/StyleRule.js

@@ -78,7 +78,7 @@ export default class StyleRule implements BaseRule {
     if (!force && this.style[name] === value) return this
 
     let newValue = value
-    if (options && options.process === true) {
+    if (!options || options.process !== false) {
       newValue = this.options.jss.plugins.onChangeValue(value, name, this)
     }
 

packages/jss/tests/integration/plugins.js

@@ -247,13 +247,13 @@ describe('Integration: plugins', () => {
     })
 
     it('should be executed just once', () => {
-      sheet.getRule('a').prop('color', 'green', {process: true})
+      sheet.getRule('a').prop('color', 'green')
       expect(executed).to.be(1)
     })
 
     it('should receive correct arguments', () => {
       const rule = sheet.getRule('a')
-      rule.prop('color', 'green', {process: true})
+      rule.prop('color', 'green')
       expect(receivedValue).to.be('green')
       expect(receivedProp).to.be('color')
       expect(receivedRule).to.be(rule)
@@ -265,7 +265,7 @@ describe('Integration: plugins', () => {
           color: red;
         }
       `)
-      sheet.getRule('a').prop('color', 'green', {process: true})
+      sheet.getRule('a').prop('color', 'green')
       expect(sheet.toString()).to.be(stripIndent`
         .a-id {
           color: green;
@@ -276,7 +276,7 @@ describe('Integration: plugins', () => {
     it('should pass the new value to the next hook', () => {
       jss.use({onChangeValue: value => `${value}-first`})
       jss.use({onChangeValue: value => `${value}-second`})
-      sheet.getRule('a').prop('color', 'green', {process: true})
+      sheet.getRule('a').prop('color', 'green')
       expect(sheet.toString()).to.be(stripIndent`
         .a-id {
           color: green-first-second;

packages/jss/tests/integration/rules.js

@@ -468,28 +468,28 @@ describe('Integration: rules', () => {
       it("should not use null when prop wasn't defined before", () => {
         jss.use({onChangeValue: () => null})
         const rule = jss.createRule()
-        rule.prop('abc', 'red', {process: true})
+        rule.prop('abc', 'red')
         expect('abc' in rule.style).to.be(false)
       })
 
       it("should not use undefined when prop wasn't defined before", () => {
         jss.use({onChangeValue: () => undefined})
         const rule = jss.createRule()
-        rule.prop('abc', 'red', {process: true})
+        rule.prop('abc', 'red')
         expect('abc' in rule.style).to.be(false)
       })
 
       it('should use null to remove the prop when it was defined before', () => {
         jss.use({onChangeValue: () => null})
         const rule = jss.createRule({color: 'red'})
-        rule.prop('color', 'anything', {process: true})
+        rule.prop('color', 'anything')
         expect('color' in rule.style).to.be(false)
       })
 
       it('should use undefined to remove the prop when it was defined before', () => {
         jss.use({onChangeValue: () => undefined})
         const rule = jss.createRule({color: 'red'})
-        rule.prop('color', 'anything', {process: true})
+        rule.prop('color', 'anything')
         expect('color' in rule.style).to.be(false)
       })
     })