feat: add keyframes()

.storybook/keyframes.stories.js

@@ -0,0 +1,54 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+const {create} = require('../index');
+const {addon: addonAtoms} = require('../addon/atoms');
+const {addon: addonRule} = require('../addon/rule');
+const {addon: addonKeyframes} = require('../addon/keyframes');
+
+const renderer = create({
+    pfx: 'animations-'
+});
+addonAtoms(renderer);
+addonRule(renderer);
+addonKeyframes(renderer);
+const {rule, keyframes} = renderer;
+
+var styles = {
+    w: '10px',
+    h: '30px',
+    bg: 'black',
+    mar: '20px',
+    animation: 'spinner-rotate-bar 1.2s infinite linear',
+    '@keyframes spinner-rotate-bar': {
+        to: {
+            transform: 'rotate(359.9deg)'
+        }
+    },
+};
+
+const className = rule(styles);
+
+var animation1 = keyframes({
+    to: {
+        transform: 'rotate(359deg)'
+    }
+});
+
+var animation2 = keyframes({
+    to: {
+        transform: 'rotate(358deg)'
+    }
+}, 'rotator');
+
+storiesOf('Addons/keyframes()', module)
+    .add('Bar spinner', () =>
+        h('div', {className}, '')
+    )
+    .add('keyframes() hash', () =>
+        h('div', {style: {background: 'red', width: 10, height: 10, animation: animation1 + ' 1s infinite linear'}}, '')
+    )
+    .add('keyframes() custom name', () =>
+        h('div', {style: {background: 'red', width: 10, height: 10, animation: animation2 + ' 1s infinite linear'}}, '')
+    )

addon/keyframes.js

@@ -2,20 +2,51 @@
 
 exports.addon = function (renderer) {
     if (process.env.NODE_ENV !== 'production') {
-        require('./__dev__/warnOnMissingDependencies')('keyframes', renderer, ['rule']);
+        require('./__dev__/warnOnMissingDependencies')('keyframes', renderer, ['putRaw', 'put']);
     }
 
-    renderer.keyframes = function (styles, block) {
-        if (!block) {
-            block = renderer.hash(styles);
+    var putAtrule = renderer.putAtrule;
+    var stylesheet;
+
+    if (renderer.client) {
+        stylesheet = document.createElement('style');
+        document.head.appendChild(stylesheet);
+    }
+
+    renderer.putAtrule = function (__, keyframes, prelude) {
+        // @keyframes
+        if (prelude[1] === 'k') {
+            var str = '';
+
+            for (var keyframe in keyframes) {
+                var decls = keyframes[keyframe];
+                var strDecls = '';
+
+                for (var prop in decls)
+                    strDecls += renderer.decl(prop, decls[prop]);
+
+                str += keyframe + '{' + strDecls + '}';
+            }
+
+            str = prelude + '{' + str + '}';
+
+            if (renderer.client) {
+                stylesheet.appendChild(document.createTextNode(str));
+            } else {
+                renderer.raw += str;
+            }
+
+            return;
         }
-        block = renderer.pfx + block;
 
-        var obj = {};
+        putAtrule(__, keyframes, prelude);
+    };
 
-        obj['@keyframes' + block] = styles;
+    renderer.keyframes = function (keyframes, block) {
+        if (!block) block = renderer.hash(keyframes);
+        block = renderer.pfx + block;
 
-        renderer.put(block, obj);
+        renderer.putAtrule('', keyframes, '@keyframes ' + block);
 
         return block;
     };