cssinjs · kof · Oct 22, 2018 · Sep 18, 2018 · Sep 18, 2018 · Sep 18, 2018
@@ -1,13 +1,16 @@
 ## Next / 2018-09-16
 
 - Fix multiple cases where linking CSS rules didn't work (#815, #710, #664)
+- Added support for Typed CSSOM values (#882)
+- Added scoped keyframes support (#346)
 - 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)
+- Rule @keyframes has now scoped name by default, which means that you can access it using `$ref` from the same sheet and generate global one as before using `@global` rule ((#346).
+- Options `createGenerateClassName` and `generateClassName` are renamed to `createGenerateId` and `generateId` since th same function is now used to scope @keyframes rules.
 
 ## 9.8.7 / 2018-06-24
 

@@ -32,7 +32,7 @@ export default jss
 
 Options:
 
-- `createGenerateClassName` - a function which returns a function which generates unique class names.
+- `createGenerateId` - a function which returns a function which generates unique class names.
 - `plugins` - an array of functions, will be passed to `jss.use`.
 - `virtual` - if true, JSS will use VirtualRenderer.
 - `insertionPoint` - string value of a DOM comment node which marks the start of sheets or a rendered DOM node. Sheets rendered by this Jss instance are inserted after this point sequentially.
@@ -74,7 +74,7 @@ Options:
 - `link` - link jss `Rule` instances with DOM `CSSRule` instances so that styles, can be modified dynamically, false by default because it has some performance cost.
 - `element` - style element, will create one by default.
 - `index` - 0 by default - determines DOM rendering order, higher number = higher specificity (inserted after).
-- `generateClassName` - a function that generates a unique class name.
+- `generateId` - a function that generates a unique class name.
 - `classNamePrefix` - a string, which will be added at the beginning of the class name.
 
 ```javascript
@@ -358,22 +358,22 @@ console.log(sheet.toString())
 
 ## Generate your own class names
 
-`createGenerateClassName`
+`createGenerateId`
 
-Option `createGenerateClassName` allows you to specify a function which returns a class name generator function `generateClassName(rule, sheet)`. This pattern is used to allow JSS reset the counter upon factory invocation, when needed. For example, it is used in [React-JSS](https://github.com/cssinjs/react-jss) to reset the counter on each request for server-side rendering.
+Option `createGenerateId` allows you to specify a function which returns a class name generator function `generateId(rule, sheet)`. This pattern is used to allow JSS reset the counter upon factory invocation, when needed. For example, it is used in [React-JSS](https://github.com/cssinjs/react-jss) to reset the counter on each request for server-side rendering.
 
 By default class names generator uses a simple counter to ensure uniqueness of the class names. It consists of `classNamePrefix` Style Sheet option + rule name + counter. **Note**: in production (`NODE_ENV=production`) it uses just the `c` + rules counter.
 
 ```javascript
 import jss from 'jss'
 
-const createGenerateClassName = () => {
+const createGenerateId = () => {
   let counter = 0
 
   return (rule, sheet) => `pizza--${rule.key}-${counter++}`
 }
 
-jss.setup({createGenerateClassName})
+jss.setup({createGenerateId})
 
 const sheet = jss.createStyleSheet({
   button: {

@@ -69,41 +69,38 @@ Compiles to:
 
 ## Keyframes Animation
 
-Note: keyframe id is still global and may conflict.
+Keyframes name will use the same id generator function as the class names. Animation name will be scoped by default. In order to access it within the same style sheet, you can use `$ref` syntax as a value of `animationName` property.
 
-```javascript
-const styles = {
-  '@keyframes my-animation': {
-    from: {opacity: 0},
-    to: {opacity: 1}
-  }
-}
-```
+Additionally generated name can be accessed through `sheet.keyframes.{name}` map.
 
-### ES6 with generated keyframe id
+In order to generate a global animation name, you can use `@global` rule.
 
 ```javascript
-const animationId = Math.random()
-
 const styles = {
-  [`@keyframes ${animationId}`]: {
+  '@keyframes slideRight': {
     from: {opacity: 0},
     to: {opacity: 1}
+  },
+  container: {
+    animationName: '$slideRight'
   }
 }
 ```
 
 Compiles to:
 
 ```css
-@keyframes my-animation {
+@keyframes keyframes-slideRight-0-1-2 {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
+.container-0-1-3 {
+  animation-name: keyframes-slideRight-0-1-2;
+}
 ```
 
 ## Fallbacks

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-cache.js": {
-    "bundled": 1058,
-    "minified": 515,
-    "gzipped": 330
+    "bundled": 1066,
+    "minified": 518,
+    "gzipped": 331
   },
   "dist/jss-plugin-cache.min.js": {
-    "bundled": 1058,
-    "minified": 515,
-    "gzipped": 330
+    "bundled": 1066,
+    "minified": 518,
+    "gzipped": 331
   },
   "dist/jss-plugin-cache.cjs.js": {
-    "bundled": 740,
-    "minified": 368,
-    "gzipped": 256
+    "bundled": 748,
+    "minified": 371,
+    "gzipped": 258
   },
   "dist/jss-plugin-cache.esm.js": {
-    "bundled": 658,
-    "minified": 299,
-    "gzipped": 213,
+    "bundled": 666,
+    "minified": 302,
+    "gzipped": 215,
     "treeshaked": {
       "rollup": {
         "code": 0,

@@ -5,7 +5,7 @@ export default function cachePlugin(): Plugin {
   const cache = new WeakMap()
 
   function onCreateRule(name, decl, {parent}) {
-    return parent ? cache.get(parent.rules.raw[name]) || null : null
+    return parent && name ? cache.get(parent.rules.raw[name]) || null : null
   }
 
   function onProcessRule(rule) {

@@ -4,7 +4,7 @@ import {create} from 'jss'
 import propsSort from './index'
 
 const settings = {
-  createGenerateClassName: () => rule => `${rule.key}-id`
+  createGenerateId: () => rule => `${rule.key}-id`
 }
 
 describe('jss-plugin-props-sort', () => {

@@ -6,7 +6,7 @@ import functionPlugin from 'jss-plugin-syntax-rule-value-function'
 import camelCase from './index'
 
 const settings = {
-  createGenerateClassName: () => rule => `${rule.key}-id`
+  createGenerateId: () => rule => `${rule.key}-id`
 }
 
 describe('jss-plugin-syntax-camel-case', () => {

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-syntax-compose.js": {
-    "bundled": 3738,
-    "minified": 1342,
-    "gzipped": 756
+    "bundled": 3745,
+    "minified": 1345,
+    "gzipped": 761
   },
   "dist/jss-plugin-syntax-compose.min.js": {
-    "bundled": 2622,
-    "minified": 822,
-    "gzipped": 485
+    "bundled": 2629,
+    "minified": 825,
+    "gzipped": 487
   },
   "dist/jss-plugin-syntax-compose.cjs.js": {
-    "bundled": 2005,
-    "minified": 840,
-    "gzipped": 470
+    "bundled": 2012,
+    "minified": 843,
+    "gzipped": 471
   },
   "dist/jss-plugin-syntax-compose.esm.js": {
-    "bundled": 1787,
-    "minified": 668,
-    "gzipped": 381,
+    "bundled": 1794,
+    "minified": 671,
+    "gzipped": 385,
     "treeshaked": {
       "rollup": {
         "code": 16,

diff --git a/packages/jss-plugin-syntax-compose/changelog.md b/packages/jss-plugin-syntax-compose/changelog.md
@@ -20,7 +20,7 @@
 
 ## 2.0.1 / 2017-02-27
 
-- mock out generateClassName in tests
+- mock out generateId in tests
 
 ## 2.0.0 / 2016-12-09
 

@@ -62,7 +62,7 @@ function registerClass(rule, className) {
  */
 export default function jssCompose(): Plugin {
   function onProcessStyle(style, rule) {
-    if (!style.composes) return style
+    if (!('composes' in style)) return style
     registerClass(rule, style.composes)
     // Remove composes property to prevent infinite loop.
     delete style.composes

@@ -4,7 +4,7 @@ import expect from 'expect.js'
 import {create} from 'jss'
 import compose from '.'
 
-const settings = {createGenerateClassName: () => rule => `${rule.key}-id`}
+const settings = {createGenerateId: () => rule => `${rule.key}-id`}
 
 describe('jss-plugin-syntax-compose', () => {
   let jss

@@ -1,21 +1,21 @@
 {
   "dist/jss-plugin-syntax-default-unit.js": {
-    "bundled": 5874,
+    "bundled": 5916,
     "minified": 2738,
     "gzipped": 1051
   },
   "dist/jss-plugin-syntax-default-unit.min.js": {
-    "bundled": 5874,
+    "bundled": 5916,
     "minified": 2738,
     "gzipped": 1051
   },
   "dist/jss-plugin-syntax-default-unit.cjs.js": {
-    "bundled": 5183,
+    "bundled": 5221,
     "minified": 2843,
     "gzipped": 1020
   },
   "dist/jss-plugin-syntax-default-unit.esm.js": {
-    "bundled": 5103,
+    "bundled": 5141,
     "minified": 2777,
     "gzipped": 965,
     "treeshaked": {

@@ -31,6 +31,7 @@ function iterate(prop, value, options) {
 
   if (Array.isArray(value)) {
     for (let i = 0; i < value.length; i++) {
+      // $FlowFixMe
       value[i] = iterate(prop, value[i], options)
     }
   } else if (typeof value === 'object') {
@@ -79,6 +80,7 @@ export default function defaultUnit(options: Options = {}): Plugin {
   }
 
   function onChangeValue(value, prop) {
+    // $FlowFixMe
     return iterate(prop, value, camelCasedOptions)
   }
 

@@ -9,7 +9,7 @@ import functionPlugin from 'jss-plugin-syntax-rule-value-function'
 import defaultUnit from './index'
 
 const settings = {
-  createGenerateClassName: () => rule => `${rule.key}-id`
+  createGenerateId: () => rule => `${rule.key}-id`
 }
 
 describe('jss-plugin-syntax-default-unit', () => {
@@ -114,7 +114,7 @@ describe('jss-plugin-syntax-default-unit', () => {
             border: 3
           }
         },
-        '@keyframes id': {
+        '@keyframes a': {
           from: {top: 0},
           '30%': {top: 30},
           '60%, 70%': {top: 80}
@@ -134,7 +134,7 @@ describe('jss-plugin-syntax-default-unit', () => {
           '    border: 3px;\n' +
           '  }\n' +
           '}\n' +
-          '@keyframes id {\n' +
+          '@keyframes keyframes-a-id {\n' +
           '  from {\n' +
           '    top: 0;\n' +
           '  }\n' +

@@ -6,7 +6,7 @@ import observablePlugin from 'jss-plugin-syntax-rule-value-observable'
 import expand from '.'
 
 const settings = {
-  createGenerateClassName: () => rule => `${rule.key}-id`
+  createGenerateId: () => rule => `${rule.key}-id`
 }
 
 describe('jss-plugin-syntax-expand', () => {

@@ -1,23 +1,23 @@
 {
   "dist/jss-plugin-syntax-extend.js": {
-    "bundled": 5265,
-    "minified": 1801,
-    "gzipped": 912
+    "bundled": 5328,
+    "minified": 1824,
+    "gzipped": 919
   },
   "dist/jss-plugin-syntax-extend.min.js": {
-    "bundled": 4149,
-    "minified": 1281,
-    "gzipped": 630
+    "bundled": 4212,
+    "minified": 1304,
+    "gzipped": 639
   },
   "dist/jss-plugin-syntax-extend.cjs.js": {
-    "bundled": 3447,
-    "minified": 1384,
-    "gzipped": 620
+    "bundled": 3504,
+    "minified": 1407,
+    "gzipped": 627
   },
   "dist/jss-plugin-syntax-extend.esm.js": {
-    "bundled": 3229,
-    "minified": 1216,
-    "gzipped": 551,
+    "bundled": 3286,
+    "minified": 1239,
+    "gzipped": 558,
     "treeshaked": {
       "rollup": {
         "code": 16,

@@ -101,13 +101,15 @@ export default function jssExtend(): Plugin {
       return null
     }
 
-    // $FlowFixMe: This will be an object
-    for (const key in value) {
-      rule.prop(key, value[key])
-    }
+    if (typeof value === 'object') {
+      // $FlowFixMe: This will be an object
+      for (const key in value) {
+        rule.prop(key, value[key])
+      }
 
-    // $FlowFixMe: Flow complains because there is no indexer property in StyleRule
-    rule[valueNs] = value
+      // $FlowFixMe: Flow complains because there is no indexer property in StyleRule
+      rule[valueNs] = value
+    }
 
     // Make sure we don't set the value in the core.
     return null

@@ -10,7 +10,7 @@ import {create} from 'jss'
 import extend from './index'
 
 const settings = {
-  createGenerateClassName: () => rule => `${rule.key}-id`
+  createGenerateId: () => rule => `${rule.key}-id`
 }
 
 describe('jss-plugin-syntax-extend', () => {