Support plugins processing for observables by default

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)
       })
     })