@emotion/core keyframes missing scope after update

[hoffination]

Describe the bug
Getting TypeError: Cannot read property 'name' of undefined when running a keyframe against theme-ui 9.1.0
Error is coming from this.name referenced inside the toString function:

// @emotion/react 
var keyframes = function keyframes() {
  var insertable = css.apply(void 0, arguments);
  var name = "animation-" + insertable.name; // $FlowFixMe

  return {
    name: name,
    styles: "@keyframes " + name + "{" + insertable.styles + "}",
    anim: 1,
    toString: function toString() {
      return "_EMO_" + this.name + "_" + this.styles + "_EMO_"; // <---- this line
    }
  };
};

To Reproduce
For starters I'm updating from 0.3.1 so I'm a bit worried I've missed a step along the way...

First I'm defining a keyframe and using it inside my component like so:

Code example

/** @jsxImportSource theme-ui */
import { Flex } from "theme-ui";
import { useResponsiveValue } from "@theme-ui/match-media";
import { keyframes } from "@emotion/react";
import { useState } from "react";

const fadeInLeft = keyframes({
  from: { opacity: 0, transform: "translate3d(-100%, 0, 0)" },
  to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
});

export const VolumeControl = () => {
  const [isOpen, setOpen] = useState(false);

  return (<div sx={{ position: "relative" }}>
      <Button
          label={'sometext'}
          onClick={() => {
            setOpen(!isOpen);
          }}
      />
     {isOpen && (
        <div
          sx={{
            position: "absolute",
            left: ["58px", "70px", "85px"],
            bottom: ["6px", "10px"],
            backgroundColor: "primary",
            animationName: fadeInLeft,
            animationDuration: ".2s",
          }}
        >
            <Flex sx={{ flexDirection: "row", alignItems: "center" }}>
                    <p></p>
             </Flex>
        </div>
    )}
  </div>);
}

I do this in a few places in the app and it only errors when the keyframe is triggered. I've omitted some details to make the usage a bit clearer.

Expected behavior
Previous functionality is that the styles get applied as expected without throwing a runtime error.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
I'll post some my dependencies here. Not sure how much they'll help but maybe something will jump out at ya:

`package.json`

{
  "name": "react-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@amplitude/react-amplitude": "1.0.0",
    "@babel/core": "^7.0.0",
    "@giphy/js-fetch-api": "3.0.0",
    "@giphy/react-components": "2.4.0",
    "@iconscout/react-unicons": "1.1.6",
    "@sentry/react": "6.5.1",
    "@sentry/tracing": "6.5.1",
    "@stripe/react-stripe-js": "1.4.1",
    "@stripe/stripe-js": "1.13.2",
    "@theme-ui/core": "^0.9.1",
    "@theme-ui/css": "^0.9.1",
    "@theme-ui/match-media": "0.9.1",
    "amplitude-js": "8.1.0",
    "aws-amplify": "3.3.2",
    "compromise": "13.11.2",
    "copy-to-clipboard": "3.3.1",
    "formik": "2.2.9",
    "jwt-decode": "3.1.2",
    "node-sass": "4.14.1",
    "password-validator": "5.1.1",
    "react": "17.0.2",
    "react-beforeunload": "2.4.0",
    "react-countdown": "2.2.1",
    "react-dom": "17.0.2",
    "react-redux": "7.2.4",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "react-spinners-kit": "1.9.1",
    "react-tooltip": "4.2.21",
    "redux": "^4.1.0",
    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
    "redux-observable": "1.2.0",
    "redux-persist": "6.0.0",
    "reselect": "4.0.0",
    "rxjs": "6.6.7",
    "store": "2.0.12",
    "theme-ui": "0.9.1",
    "typescript": "4.3.2",
    "yup": "0.32.9",
    "yup-phone": "1.2.19"
  },
  "scripts": {
    "start": "npx react-app-rewired start",
    "build": "npx react-app-rewired build",
    "postbuild": "cp _redirects build/",
    "build:dev": "cross-env REACT_APP_ENV=development REACT_APP_VERSION=$npm_package_version npm run build",
    "build:prod": "cross-env REACT_APP_ENV=production REACT_APP_VERSION=$npm_package_version npm run build",
    "test": "npx react-app-rewired test",
    "eject": "npx react-app-rewired eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public -o storybook-dist/"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "globalSetup": "./setupTests.js"
  },
  "devDependencies": {
    "@giphy/js-types": "3.1.0",
    "@storybook/addon-a11y": "6.2.9",
    "@storybook/addon-actions": "6.2.9",
    "@storybook/addon-knobs": "6.2.9",
    "@storybook/addon-links": "6.2.9",
    "@storybook/addon-storysource": "6.2.9",
    "@storybook/addons": "6.2.9",
    "@storybook/preset-create-react-app": "3.1.7",
    "@storybook/react": "6.2.9",
    "@testing-library/dom": "^7.31.2",
    "@testing-library/jest-dom": "5.13.0",
    "@testing-library/react": "11.2.7",
    "@testing-library/user-event": "13.1.9",
    "@types/amplitude-js": "5.11.1",
    "@types/jest": "26.0.23",
    "@types/jwt-decode": "3.1.0",
    "@types/react": "17.0.11",
    "@types/react-beforeunload": "2.1.0",
    "@types/react-dom": "17.0.7",
    "@types/react-redux": "7.1.16",
    "@types/react-router-dom": "5.1.7",
    "@types/redux-logger": "3.0.8",
    "@types/store": "2.0.2",
    "@types/theme-ui": "0.6.0",
    "@types/yup": "0.29.11",
    "@typescript-eslint/eslint-plugin": "^4.26.1",
    "@typescript-eslint/parser": "^4.26.1",
    "cross-env": "7.0.3",
    "react-app-rewired": "2.1.8",
    "react-docgen": "^5.4.0",
    "testdouble": "3.16.1",
    "testdouble-jest": "2.0.0"
  },
  "resolutions": {
    "babel-loader": "8.1.0",
    "@emotion/styled": "^11.0.0"
  }
}

[hasparus]

Hey @hoffination 👋 Thanks for the issue!

Could you send me your lockfile? (package-lock.json or yarn.lock)
Also, does it break on Theme UI 0.5.0 or 0.6.0? We updated to Emotion 11 in 0.5 I think, but I'm using keyframes in my projects and didn't see this problem 🤔

A workaround I see is calling that toString manually, but it's less than ideal...

[hoffination]

Hey @hasparus! Thanks for getting back so fast!

Sure! Here's my lockfile
yarn.lock

Trying things out I still get the issue on 0.6.0 and 0.6.2. I'll try the 0.5.0 alpha but I'll need to revert some of the other changes

[hasparus]

I'll try the 0.5.0 alpha but I'll need to revert some of the other changes

I think you'd need to try 0.4-alpha, actually. We bumped to 0.5 because of Emotion version update.
I'll give a shot fixing this soon and add a test case for animationName: keyframe.

Meanwhile — does

animation: `0.5s ${keyframe}`

syntax work for you?

[hoffination]

Oh yeah!

animation: `0.5s ${keyframe}`

totally fixes it for me!

I had some other usages though that broke initially until I took the name out of the description:

const fadeInDown = keyframes({
  name: 'fadeInDown',
  from: { opacity: 0, transform: "translate3d(0, -100%, 0)" },
  to: { opacity: 1, transform: "translate3d(0, 0, 0)" },
});

[TranquilMarmot]

I ran into this as well, using:

• theme-ui version 0.13.1
• @emotion/react version 11.7.1

Can confirm that doing...

animation: `0.5s ${animation}`

Fixes it

I wonder if the "object syntax" example should be removed/changed on this page? https://theme-ui.com/guides/keyframes#usage

[lachlanjc]

Excellent callout @TranquilMarmot! Just made a PR updating that page.

[hasparus]

🚀 Issue was released in v0.14.0-develop.3 🚀

[hasparus]

🚀 Issue was released in v0.14.0 🚀