import { css } from @motion/core upgrade issue

[JustFly1984]

I have react.js project with emotion, and I'm upgrading it to current versions.

The issue for me is that css from @emotion/core had been returning a string with css, but new version @emotion/css's css returns a classname instead of minified css string.

css from @emotion/react returns SerializedStyles, which is not a string at all, so my code and tests breaks for both exports.

Is there some way to get previous behavior in new version?

[Andarist]

css from @emotion/core has been returning SerializedStyles. Since @emotion/core has been renamed to @emotion/react the css from the latter returns SerializedStyles. Nothing has changed on that front.

css from emotion has been returning a class name as a string. Since emotion has been renamed to @emotion/css the css from the latter returns a class name as a string. Nothing has changed on that front either.

Note that previously @emotion/css was reexporting css from @emotion/core - but that means it has also been returning SerializedStyles

[JustFly1984]

@Andarist Thank you for fast response!

I definitely have jest snapshot tests running before update: "emotion": "10.0.27", "emotion-server": "10.0.27", "emotion-theming": "10.0.27", "@emotion/babel-preset-css-prop": "10.1.0", and `import { css } from '@emotion/core';

the code returning the string with css:

  return css`
    // any pixel density (1x)
    background-image: url(${mediaApiUrl({
      url: smUrl,
      format,
      [resizeDimension]: sm,
    })});
    @media (min-width: 768px) {
      background-image: url(${mediaApiUrl({
        url: mdUrl,
        format,
        [resizeDimension]: md,
      })});
      // etc
    }`

I found a workaround with "@emotion/react": "11.4.1":

  return css`
    // any pixel density (1x)
    background-image: url(${mediaApiUrl({
      url: smUrl || '',
      format,
      [resizeDimension]: sm,
    })});

    @media (min-width: 768px) {
      background-image: url(${mediaApiUrl({
        url: mdUrl || '',
        format,
        [resizeDimension]: md,
      })});
    }`.styles

but in tests snapshot diff I see inconsistencies. First - it is a lot of empty spaces in css, and at the end of the string there is dangling invalid css attached: ;label:responsiveBackgroundImage;, which is not exists in previous version.

Snapshot: "background-image:url(https://example.com/images/12345~rt_auto-rs_w.460?ordering=explicit);@media (min-width:768px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.768?ordering=explicit);}@media (min-width:1024px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1024?ordering=explicit);}@media (min-width:1280px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1280?ordering=explicit);}@media (min-resolution:144dpi),(-webkit-min-device-pixel-ratio:1.5){background-image:url(https://example.com/images/12345~rt_auto-rs_w.690?ordering=explicit);}@media (min-resolution:144dpi) and (min-width:768px),(-webkit-min-device-pixel-ratio:1.5) and (min-width:768px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1152?ordering=explicit);}@media (min-resolution:144dpi) and (min-width:1024px),(-webkit-min-device-pixel-ratio:1.5) and (min-width:1024px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1536?ordering=explicit);}@media (min-resolution:144dpi) and (min-width:1280px),(-webkit-min-device-pixel-ratio:1.5) and (min-width:1280px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1920?ordering=explicit);}@media (min-resolution:192dpi),(-webkit-min-device-pixel-ratio:2){background-image:url(https://example.com/images/12345~rt_auto-rs_w.920?ordering=explicit);}@media (min-resolution:192dpi) and (min-width:768px),(-webkit-min-device-pixel-ratio:2) and (min-width:768px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1536?ordering=explicit);}@media (min-resolution:192dpi) and (min-width:1024px),(-webkit-min-device-pixel-ratio:2) and (min-width:1024px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.2048?ordering=explicit);}@media (min-resolution:192dpi) and (min-width:1280px),(-webkit-min-device-pixel-ratio:2) and (min-width:1280px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.2560?ordering=explicit);}"
Received: "background-image:url(https://example.com/images/12345~rt_auto-rs_w.460?ordering=explicit);@media (min-width: 768px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.768?ordering=explicit);}@media (min-width: 1024px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1024?ordering=explicit);}@media (min-width: 1280px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1280?ordering=explicit);}@media (min-resolution: 144dpi),(-webkit-min-device-pixel-ratio: 1.5){background-image:url(https://example.com/images/12345~rt_auto-rs_w.690?ordering=explicit);}@media (min-resolution: 144dpi) and (min-width: 768px),(-webkit-min-device-pixel-ratio: 1.5) and (min-width: 768px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1152?ordering=explicit);}@media (min-resolution: 144dpi) and (min-width: 1024px),(-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1024px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1536?ordering=explicit);}@media (min-resolution: 144dpi) and (min-width: 1280px),(-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1280px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1920?ordering=explicit);}@media (min-resolution: 192dpi),(-webkit-min-device-pixel-ratio: 2){background-image:url(https://example.com/images/12345~rt_auto-rs_w.920?ordering=explicit);}@media (min-resolution: 192dpi) and (min-width: 768px),(-webkit-min-device-pixel-ratio: 2) and (min-width: 768px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.1536?ordering=explicit);}@media (min-resolution: 192dpi) and (min-width: 1024px),(-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.2048?ordering=explicit);}@media (min-resolution: 192dpi) and (min-width: 1280px),(-webkit-min-device-pixel-ratio: 2) and (min-width: 1280px){background-image:url(https://example.com/images/12345~rt_auto-rs_w.2560?ordering=explicit);};label:responsiveBackgroundImage;"

extra spaces I can live with, but dangling label is too weird.

[Andarist]

A dangling label can be disabled with autoLabel option.

[JustFly1984]

@Andarist Thank you, this fixed an issue!