Typed CSSOM values support

changelog.md

@@ -2,6 +2,12 @@
 
 - Fix multiple cases where linking CSS rules didn't work (#815, #710, #664)
 
+### 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)
+
 ## 9.8.7 / 2018-06-24
 
 - Fix `global` access in the dist version (#736)

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:
 }
 ```
 
+## CSS Typed OM (Houdini)
+
+Typed CSSOM values are supported. You can learn more about it [here](https://developers.google.com/web/updates/2018/03/cssom) and track the standardization progress [here](https://ishoudinireadyyet.com/). Also make sure to 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-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": 2024,
+    "minified": 775,
+    "gzipped": 453
   },
   "dist/jss-plugin-syntax-rule-value-function.min.js": {
-    "bundled": 2073,
-    "minified": 827,
-    "gzipped": 472
+    "bundled": 2024,
+    "minified": 775,
+    "gzipped": 453
   },
   "dist/jss-plugin-syntax-rule-value-function.cjs.js": {
-    "bundled": 1672,
-    "minified": 737,
-    "gzipped": 411
+    "bundled": 1633,
+    "minified": 664,
+    "gzipped": 392
   },
   "dist/jss-plugin-syntax-rule-value-function.esm.js": {
-    "bundled": 1600,
-    "minified": 678,
-    "gzipped": 363,
+    "bundled": 1561,
+    "minified": 605,
+    "gzipped": 345,
     "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