importing the CSS helper from @emotion/css instead of @emotion/react seems to not work

[osdiab]

Current behavior:

If I have @emotion/css as a dependency (which I do because I need to disable speedy for puppeteer/prerender.io runs) then whenever I try to use the css prop with the css helper, TypeScript suggests to import the css helper from @emotion/css instead of @emotion/react. but if I actually use that, it has no effect on the actual page.

I'm using the emotion babel plugin, in a CRA app that uses craco to edit the babel config.

I work around this by adding a restricted import ESLint rule to yell at any and all who try to use the css helper from a @emotion/css import.

To reproduce:

https://www.github.com/osdiab/emotion-css-prop-repro

Expected behavior:

It works to avoid confusing my teammates

Environment information:

  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@emotion/core": "^11.0.0",
    "@emotion/css": "^11.1.3",
    "@emotion/react": "^11.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
  },

[Andarist]

If I have @emotion/css as a dependency (which I do because I need to disable speedy for puppeteer/prerender.io runs)

Well, this alone doesn't sound completely right. You do not need @emotion/css to disable speedy mode - you can disable speedy just fine using CacheProvider appropriately.

[osdiab]

@Andarist just doing what the docs told me to! https://emotion.sh/docs/ssr#puppeteer I'll try doing that instead, but not exactly sure how to use CacheProvider.

[osdiab]

Also one other reason I end up with @emotion/css is because I use the CSSInterpolation type to type CSS mixins throughout my app, but that's not exported from @emotion/react, just from @emotion/css; and I set up an ESLint rule that warns if I use a dev dep in prod (even though it's just a type, it warns on that import). Would be nice if that were exported from the react package too.

[chunlaw]

@Andarist just doing what the docs told me to! https://emotion.sh/docs/ssr#puppeteer I'll try doing that instead, but not exactly sure how to use CacheProvider.

Hope below code fragment help you or anyone

import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

// if you are using mui v5
import { ThemeProvider } from '@mui/material/styles';

const emotionCache = createCache({
  key: "emotion-cache-no-speedy",
  speedy: false,
});

const theme = createTheme();

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CacheProvider value={emotionCache}>
        <div>Your app here</div>
      </CacheProvider>
    </ThemeProvider>
  )
}

[dylanmate]

@Andarist just doing what the docs told me to! https://emotion.sh/docs/ssr#puppeteer I'll try doing that instead, but not exactly sure how to use CacheProvider.

Hope below code fragment help you or anyone

import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

// if you are using mui v5
import { ThemeProvider } from '@mui/material/styles';

const emotionCache = createCache({
  key: "emotion-cache-no-speedy",
  speedy: false,
});

const theme = createTheme();

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CacheProvider value={emotionCache}>
        <div>Your app here</div>
      </CacheProvider>
    </ThemeProvider>
  )
}

@Andarist - can you add this (or a link to it) to the SSR documentation? The puppeteer solution in the doco did not work for me but this did.

Sorry OP for hijacking your ticket.