Is Emoticon's 'keyframes' included or is this a problem?

[shagia]

I've been enjoying Ubersicht a lot and only just now noticed that I can't get the 'keyframes' library from Emoticon (via 'uebersicht') to work and only just now realized it's not stated that it's exposed in the readme!

import { run, css, keyframes } from 'uebersicht'
...
export const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`
...

<div
className={css`
animation: ${bounce} 1s ease infinite;
`}>:</div>

I think this should work anywhere, it's an example from Emoticon's own site, but for Ubersicht, it causes the entire widget to 'freeze' and not update, and when refreshing, it just doesn't display the content at all, no errors. I'm considering going the CoffeeScript route, but maybe I'm missing something or this might be an issue? Here's the full code I'm trying this on as it could also be my way of writing this unfinished widget:

import { run, css, keyframes } from 'uebersicht'
import parse from "./lib/parse.jsx"
import Cpu from "./lib/Cpu.jsx"



export const refreshFrequency = 1000 //who cares its a desktop
export const root = css`
    position: absolute;
    height: 100%;
    bottom: -1600px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    hr {
        border:         outset;
        border-left:   0px solid hsla(200, 10%, 50%,100);
        height:         20px;
        width:          1px;
        padding: 0;
        margin: 0;
    }
    img {
        max-width: 100%;
    }
`
export const boxStyle = css`
    margin: 0;
    border: 1px outset #C0C0C0;
    background: linear-gradient(0deg, rgba(108,108,108,1) 0%, rgba(192,192,192,1) 9%);
    padding: 5px;
    width: 50px;
    height: 50px;
    
    `

export const extendedBoxStyle = css`
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    border: 1px outset #C0C0C0;
    background: linear-gradient(0deg, rgba(108,108,108,1) 0%, rgba(192,192,192,1) 9%);
    width: 120px;
    height: 50px;
    img {
        align-self: center;
    }
`

export const extendedClockStyle = css`
    margin: 0;
    border: 1px outset #C0C0C0;
    background: linear-gradient(0deg, rgba(108,108,108,1) 0%, rgba(192,192,192,1) 9%);
    width: 120px;
    height: 50px;
`

export const infoContainer = css`

flex-basis: 60%;
flex-grow: 0;
font-size: 11px;
font-family: 'tewi';
letter-spacing: -0.00004em;
text-align: left;
float: left;
-webkit-font-smoothing: none;
span{
text-align: left;
}
`

export const clockContainer = css`
    position: relative;
    bottom: 3px;
    height: 22px;
    background-color: black;
    border: 1px inset white;
    .clock-footer{
        position: relative;
        top: 7px;
    }
    .clock-time{
        color: green;
        position: relative;
        top: 3px;
        font-family: 'DFDotDotGothic16';
        font-size: 18px;
    }
    .logo{
        display: inline-block;
        vertical-align: middle;
        float: left;
        bottom: 0px;
        position: relative;
    }
    .date{
        font-family: 'tewi';
        -webkit-font-smoothing: none;
        float: right;
        display: inline-block;
        vertical-align: middle;
        font-size: 11px;
    }
`

export const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`
export const colon = css`
animation: ${bounce} 1s ease infinite;
`

export const command = "buttons.widget/scripts/stats.sh"
export const render = ({ output, error }) => {
    const data = parse(output);
    return (
        <div className={root}>

            <button onClick={() => { run("open -a Calendar") }} className={extendedClockStyle}>
                <div className={clockContainer}>
                    <div className="clock-time">
                        {data.datetime.hour}
                        <div
                            className={colon}>:</div>{data.datetime.mins}
                    </div>
                    <div className="clock-footer">
                        <span className="logo">
                            <img height="8px" src="buttons.widget/img/logo.png"></img>
                        </span>
                        <span className="date">{data.datetime.date}</span></div>
                </div>
            </button>
            <button onClick={() => { run("open -a iTerm ~") }} className={extendedBoxStyle}>
                <img height="25px" src="buttons.widget/img/happymac.png"></img>
                <hr></hr>
                <div className={infoContainer}>
                    <div className="info-item">CPU: <span><Cpu output={data.cpu} /></span></div>
                    <div className="info-item"> MEM: <span>{data.memory}</span></div>
                    {/* <div className="info-item"> IP: <span>{data.wifi.ipaddress}</span></div> */}
                </div>
            </button>
            <button onClick={() => { run("open -a Finder ~/") }} className={boxStyle}><img height="30px" src="buttons.widget/img/Cab file.png"></img></button>
        </div>
    )
}

Thank you! Love the switch to JSX btw, CoffeeScript scared me away a few years ago lol

[jigglycrumb]

I just ran into the same problem and would love to have keyframes/animations available too!