Merge branch 'master' into feat/use-cssom-in-default-unit-plugin

* master:
  Support plugins processing for observables by default (#892)
  Typed CSSOM values support (#887)
  Dynamic values full syntax (#878)
  [jss-plugin-cache] Use WeakMap for cache plugin (#890)

# Conflicts:
#	packages/jss-plugin-syntax-rule-value-function/.size-snapshot.json
#	packages/jss-preset-default/.size-snapshot.json
#	packages/jss/.size-snapshot.json
#	packages/react-jss/.size-snapshot.json

Author: Henri Beck

changelog.md

@@ -1,6 +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, 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
 

docs/json-api.md

@@ -22,72 +22,6 @@ Compiles to:
 }
 ```
 
-## Function values
-
-If you want dynamic behavior for your Style Sheet, you can use functions as a value which return the actual value. If function values returns `null|undefined|false` - property will be removed. Use [sheet.update(data)](./js-api.md#update-function-values) in order to pass the data object. [Sheet option](./js-api.md#create-style-sheet) `link: true` is required for this to function.
-
-```javascript
-const styles = {
-  button: {
-    color: data => data.color
-  }
-}
-```
-
-### Support of "!important"
-
-To use the `!important` modifier with function values, you must use [array syntax](#alternative-syntax-for-space-and-comma-separated-values):
-
-```javascript
-const styles = {
-  button: {
-    color: data => [[data.color], '!important']
-  }
-}
-```
-
-## Function rules
-
-Similar to function values, you can use a function to return a dynamic style object. Use [sheet.update(data)](./js-api.md#update-function-values) in order to pass the data object. Sheet option `link: true` is required for this to function.
-
-```javascript
-const styles = {
-  button: data => ({
-    display: 'flex',
-    color: data.color
-  })
-}
-```
-
-## Observable values
-
-In order to create highly dynamic animations, you may want to use streams. Take a look at the [tc39 observable proposal](https://github.com/tc39/proposal-observable). Sheet option `link: true` is required for this to function.
-
-```javascript
-const styles = {
-  button: {
-    color: new Observable(observer => {
-      observer.next('red')
-    })
-  }
-}
-```
-
-## Observable rules
-
-Similar to observable values, you can declare observable rules. Stream should contain in this case the style object. Sheet option `link: true` is required for this to function.
-
-```javascript
-const styles = {
-  button: new Observable(observer => {
-    observer.next({
-      color: 'red',
-      opacity: 1
-    })
-  })
-}
-```
-
 ## Media Queries
 
 ```javascript
@@ -421,6 +355,18 @@ Compiles to:
 }
 ```
 
+## Typed CSSOM (Houdini)
+
+Typed CSSOM values are supported. You can learn more about them [here](https://developers.google.com/web/updates/2018/03/cssom) and track the standardization progress [here](https://ishoudinireadyyet.com/). Also make sure you use a [polyfill](https://github.com/csstools/css-typed-om) for browsers without support. It will make most sence when used together with function values and observables for frequent updates.
+
+```javascript
+const styles = {
+  button: {
+    margin: CSS.px(10)
+  }
+}
+```
+
 ## Plugins
 
 JSS plugins give you even more features, [read about them](plugins.md).

karma.conf.js

@@ -23,7 +23,7 @@ module.exports = config => {
       'node_modules/raf/polyfill.js',
       './packages/jss/tests/index.js',
       './packages/jss-plugin-syntax-rule-value-function/src/index.test.js',
-      './packages/jss-plugin-syntax-rule-value-observable/src/observable.test.js',
+      './packages/jss-plugin-syntax-rule-value-observable/src/index.test.js',
       './packages/jss-plugin-syntax-expand/src/index.test.js',
       './packages/jss-plugin-syntax-default-unit/src/index.test.js',
       './packages/jss-plugin-syntax-camel-case/src/index.test.js',

package.json

@@ -69,7 +69,7 @@
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-flowtype": "^2.29.1",
     "expect.js": "^0.3.1",
-    "flow-bin": "^0.73.0",
+    "flow-bin": "^0.83.0",
     "json-loader": "^0.5.4",
     "karma": "^1.3.0",
     "karma-benchmark": "^0.6.0",

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

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-cache.js": {
-    "bundled": 1700,
-    "minified": 727,
-    "gzipped": 411
+    "bundled": 1058,
+    "minified": 515,
+    "gzipped": 330
   },
   "dist/jss-plugin-cache.min.js": {
-    "bundled": 1700,
-    "minified": 727,
-    "gzipped": 411
+    "bundled": 1058,
+    "minified": 515,
+    "gzipped": 330
   },
   "dist/jss-plugin-cache.cjs.js": {
-    "bundled": 1334,
-    "minified": 588,
-    "gzipped": 351
+    "bundled": 740,
+    "minified": 368,
+    "gzipped": 256
   },
   "dist/jss-plugin-cache.esm.js": {
-    "bundled": 1252,
-    "minified": 519,
-    "gzipped": 300,
+    "bundled": 658,
+    "minified": 299,
+    "gzipped": 213,
     "treeshaked": {
       "rollup": {
         "code": 0,

packages/jss-plugin-cache/readme.md

@@ -10,6 +10,10 @@ in general.
 
 [![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
 
+## Polyfills
+
+1. This plugin is using a `WeakMap`. If you support browsers which do not support WeakMap, you will have to include a polyfill.
+
 ## Caveats
 
 1.  Don't use it if you mutate your `styles`.

packages/jss-plugin-cache/src/index.js

@@ -1,33 +1,11 @@
 // @flow
 import type {Plugin} from 'jss'
 
-/**
- * Tiny WeakMap like cache using arrays.
- * Required because we have frozen style objects in dev, which are not extensible,
- * so we can't put some key into that object.
- * Relies on [].indexOf(Object).
- */
-class Cache {
-  keys = []
-
-  data = []
-
-  get(key) {
-    const index = this.keys.indexOf(key)
-    return index === -1 ? null : this.data[index]
-  }
-
-  set(key, value) {
-    this.keys.push(key)
-    this.data.push(value)
-  }
-}
-
 export default function cachePlugin(): Plugin {
-  const cache = new Cache()
+  const cache = new WeakMap()
 
   function onCreateRule(name, decl, {parent}) {
-    return parent ? cache.get(parent.rules.raw[name]) : null
+    return parent ? cache.get(parent.rules.raw[name]) || null : null
   }
 
   function onProcessRule(rule) {

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-rule-value-function/.size-snapshot.json

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-syntax-rule-value-function.js": {
-    "bundled": 2141,
-    "minified": 824,
-    "gzipped": 469
+    "bundled": 2061,
+    "minified": 735,
+    "gzipped": 428
   },
   "dist/jss-plugin-syntax-rule-value-function.min.js": {
-    "bundled": 2141,
-    "minified": 824,
-    "gzipped": 469
+    "bundled": 2061,
+    "minified": 735,
+    "gzipped": 428
   },
   "dist/jss-plugin-syntax-rule-value-function.cjs.js": {
-    "bundled": 1742,
-    "minified": 734,
-    "gzipped": 408
+    "bundled": 1672,
+    "minified": 631,
+    "gzipped": 366
   },
   "dist/jss-plugin-syntax-rule-value-function.esm.js": {
-    "bundled": 1670,
-    "minified": 675,
-    "gzipped": 360,
+    "bundled": 1594,
+    "minified": 567,
+    "gzipped": 319,
     "treeshaked": {
       "rollup": {
         "code": 12,

packages/jss-plugin-syntax-rule-value-function/readme.md

@@ -0,0 +1,77 @@
+# JSS plugin that allows to use functions for dynamic styles
+
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
+If you want dynamic behavior for your Style Sheet, you can use functions as a value which return the actual value or a rule. If function returns `null|undefined|false` - property will be removed. Use [sheet.update(data)](https://github.com/cssinjs/jss/blob/master/docs/js-api.md#update-function-values) in order to pass the data object.
+
+[Sheet option](https://github.com/cssinjs/jss/blob/master/docs/js-api.md#create-style-sheet) `link: true` is required for this to function.
+
+_Plugins are applied by default to function rules or values._
+
+Make sure you read [how to use
+plugins](https://github.com/cssinjs/jss/blob/master/docs/setup.md#setup-with-plugins)
+in general.
+
+## Function values
+
+```javascript
+const styles = {
+  button: {
+    color: data => data.color
+  }
+}
+
+const sheet = jss.createStyleSheet(styles, {link: true}).attach()
+
+sheet.update({color: 'red'})
+```
+
+```css
+.button-1-2-3 {
+  color: red;
+}
+```
+
+## Function rules
+
+Similar to function values, you can use a function to return a dynamic style object. Use [sheet.update(data)](https://github.com/cssinjs/jss/blob/master/docs/js-api.md#update-function-values) in order to pass the data object. Sheet option `link: true` is required for this to function.
+
+```javascript
+const styles = {
+  button: data => ({
+    display: 'flex',
+    color: data.color
+  })
+}
+```
+
+## Support of "!important"
+
+To use the `!important` modifier with function values, you must use [array syntax](https://github.com/cssinjs/jss/blob/master/docs/json-api.md#alternative-syntax-for-space-and-comma-separated-values):
+
+```javascript
+const styles = {
+  button: {
+    color: data => [[data.color], '!important']
+  }
+}
+```
+
+## Demo
+
+[Simple](http://cssinjs.github.io/examples/function-values/index.html)
+
+## Issues
+
+File a bug against [cssinjs/jss prefixed with \[jss-plugin-syntax-rule-value-function\]](https://github.com/cssinjs/jss/issues/new?title=[jss-plugin-syntax-rule-value-function]%20).
+
+## Run tests
+
+```bash
+yarn
+yarn test
+```
+
+## License
+
+MIT