Add support for dynamic keyframes (#1043)

* Add support for dynamic keyframes

* Fix replacing the ref

* Add a failing test

* Update size-snapshot

* Add more tests

* Update changelog

* Run prettier

* Remove unnecessary condition

* Update size-snapshot

Author: Henri

changelog.md

@@ -2,13 +2,14 @@
 
 ### Bug fixes
 
+- [jss] Fix using function values with scoped keyframes ([#1043](https://github.com/cssinjs/jss/pull/1043))
 - [jss] Fix removing styles from function rules ([#1046](https://github.com/cssinjs/jss/pull/1046))
 
 ## 10.0.0-alpha.11 (2019-2-24)
 
 ### Bug fixes
 
-- [jss] Fix dynamic values inside of @global plugin ([#1040](https://github.com/cssinjs/jss/pull/1040))
+- [jss] Fix dynamic values inside of @global plugin ([#664](https://github.com/cssinjs/jss/pull/664))
 
 ### Improvements
 

packages/jss-plugin-rule-value-function/src/function-values.test.js

@@ -360,6 +360,68 @@ describe('jss-plugin-rule-value-function: Function values', () => {
     })
   })
 
+  describe('keyframe names', () => {
+    it('should work with animation-name', () => {
+      const sheet = jss.createStyleSheet({
+        '@keyframes animateIn': {},
+
+        '@keyframes animateOut': {},
+
+        a: {'animation-name': ({name}) => name}
+      })
+
+      sheet.update({name: '$animateIn'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation-name: keyframes-animateIn-id;
+        }
+      `)
+
+      sheet.update({name: '$animateOut'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation-name: keyframes-animateOut-id;
+        }
+      `)
+    })
+
+    it('should work with animation prop', () => {
+      const sheet = jss.createStyleSheet({
+        '@keyframes animateIn': {},
+
+        '@keyframes animateOut': {},
+
+        a: {animation: ({name}) => `${name} 5s`}
+      })
+
+      sheet.update({name: '$animateIn'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation: keyframes-animateIn-id 5s;
+        }
+      `)
+
+      sheet.update({name: '$animateOut'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation: keyframes-animateOut-id 5s;
+        }
+      `)
+    })
+  })
+
   describe('rule.toJSON()', () => {
     it('should handle function values', () => {
       const sheet = jss.createStyleSheet({

packages/jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/jss.js": {
-    "bundled": 59048,
-    "minified": 21980,
-    "gzipped": 6562
+    "bundled": 59675,
+    "minified": 22216,
+    "gzipped": 6638
   },
   "dist/jss.min.js": {
-    "bundled": 57866,
-    "minified": 21066,
-    "gzipped": 6117
+    "bundled": 58509,
+    "minified": 21298,
+    "gzipped": 6195
   },
   "dist/jss.cjs.js": {
-    "bundled": 54490,
-    "minified": 23905,
-    "gzipped": 6613
+    "bundled": 55077,
+    "minified": 24175,
+    "gzipped": 6694
   },
   "dist/jss.esm.js": {
-    "bundled": 53994,
-    "minified": 23501,
-    "gzipped": 6533,
+    "bundled": 54581,
+    "minified": 23771,
+    "gzipped": 6613,
     "treeshaked": {
       "rollup": {
-        "code": 19125,
+        "code": 19358,
         "import_statements": 281
       },
       "webpack": {
-        "code": 20541
+        "code": 20773
       }
     }
   }

packages/jss/src/plugins/keyframesRule.js

@@ -1,15 +1,14 @@
 /* @flow */
 import warning from 'tiny-warning'
 import RuleList from '../RuleList'
-import type StyleSheet from '../StyleSheet'
 import type {
   CSSKeyframesRule,
   JssStyle,
-  Rule,
   RuleOptions,
   ToCssOptions,
   ContainerRule,
-  KeyframesMap
+  KeyframesMap,
+  Plugin
 } from '../types'
 
 const defaultToStringOptions = {
@@ -82,36 +81,66 @@ const keyRegExp = /@keyframes\s+/
 
 const refRegExp = /\$([\w-]+)/
 
+const findReferencedKeyframe = (val, keyframes) => {
+  if (typeof val === 'string') {
+    const ref = refRegExp.exec(val)
+
+    if (!ref) return val
+
+    if (ref[1] in keyframes) {
+      return val.replace(ref[0], keyframes[ref[1]])
+    }
+
+    warning(false, `[JSS] Referenced keyframes rule "${ref[1]}" is not defined.`)
+  }
+
+  return val
+}
+
 /**
  * Replace the reference for a animation name.
  */
 const replaceRef = (style: JssStyle, prop: string, keyframes: KeyframesMap) => {
   const value = style[prop]
+  const refKeyframe = findReferencedKeyframe(value, keyframes)
 
-  if (typeof value === 'string') {
-    const ref = refRegExp.exec(value)
-
-    if (!ref) return
-
-    if (ref[1] in keyframes) {
-      style[prop] = value.replace(ref[0], keyframes[ref[1]])
-    } else {
-      warning(false, `[JSS] Referenced keyframes rule "${ref[1]}" is not defined.`)
-    }
+  if (refKeyframe !== value) {
+    style[prop] = refKeyframe
   }
 }
 
-export default {
-  onCreateRule(key: string, frames: JssStyle, options: RuleOptions): KeyframesRule | null {
-    return keyRegExp.test(key) ? new KeyframesRule(key, frames, options) : null
+const plugin: Plugin = {
+  onCreateRule(key, frames, options) {
+    return typeof key === 'string' && keyRegExp.test(key)
+      ? new KeyframesRule(key, frames, options)
+      : null
   },
 
   // Animation name ref replacer.
-  onProcessStyle: (style: JssStyle, rule: Rule, sheet?: StyleSheet): JssStyle => {
+  onProcessStyle: (style, rule, sheet) => {
     if (rule.type !== 'style' || !sheet) return style
 
     if ('animation-name' in style) replaceRef(style, 'animation-name', sheet.keyframes)
     if ('animation' in style) replaceRef(style, 'animation', sheet.keyframes)
     return style
+  },
+
+  onChangeValue(val, prop, rule) {
+    const {sheet} = rule.options
+
+    if (!sheet) {
+      return val
+    }
+
+    switch (prop) {
+      case 'animation':
+        return findReferencedKeyframe(val, sheet.keyframes)
+      case 'animation-name':
+        return findReferencedKeyframe(val, sheet.keyframes)
+      default:
+        return val
+    }
   }
 }
+
+export default plugin