Merge remote-tracking branch 'origin/feat/add-markdown-lint' into feat/add-markdown-lint

* origin/feat/add-markdown-lint:
  Scoped keyframes (#888)

Author: Henri Beck

changelog.md

@@ -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. This affects both JSS and React-JSS.
 
 ## 9.8.7 / 2018-06-24
 

docs/js-api.md

@@ -34,7 +34,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.
@@ -76,7 +76,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
@@ -386,22 +386,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: {

docs/json-api.md

@@ -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` or `animation` 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

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

@@ -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,

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

@@ -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) {

packages/jss-plugin-props-sort/src/index.test.js

@@ -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', () => {

packages/jss-plugin-syntax-camel-case/src/index.test.js

@@ -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', () => {

packages/jss-plugin-syntax-compose/.size-snapshot.json

@@ -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,

packages/jss-plugin-syntax-compose/src/index.js

@@ -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

packages/jss-plugin-syntax-compose/src/index.test.js

@@ -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