@emotion/core keyframes missing scope after update

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…

[hasparus]

🚀 Issue was released in v0.14.0 🚀