@emotion/babel plugin not working with `experimentalStyled as styled`

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The emotion babel plugin does not seem to be working i.e. labels are not applied to classNames.

Expected Behavior 🤔

Labels should be applied to classNames as it is with @emotion/styled

Steps to Reproduce 🕹

1. clone this repo
2. yarn install in root
3. go into /examples/create-react-app-with-typescript
4. yarn install
5. yarn eject
6. yarn add -D @emotion/babel-plugin
7. open ./config/webpack.config.js
8. go into line 391 and add '@emotion', there as babel plugin for the test: /\.(js|mjs|jsx|ts|tsx)$/, (= babel-loader)
9. open src/App.tsx and add

import { experimentalStyled as styled } from '@material-ui/core';

const Frame = styled('div')`
  background-color: green;
`

1. modify default export App by wrapping the <Container>...</Container> inside a <Frame>...</Frame>
2. yarn start
3. open browser and check class name for the App’s div, should be something like css-xyz123

–> There is no labels appended to css class names for better developer experience.

Now replace import { experimentalStyled as styled } from '@material-ui/core'; with import styled from '@emotion/styled'

And check class names again! There is now the -Frame appended to the class name.

Question: Will this experimentalStyled ever be replaced with proper @emotion/styled. And is it safe to use already now if I don’t plan on using styled-components ?

Context 🔦

Improve Developer Experience

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 11.3.1
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - ~/.yarn/bin/yarn
    npm: 7.7.0 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Edge: 90.0.818.62
    Firefox: Not Found
    Safari: 14.1
  npmPackages:
    @emotion/react: latest => 11.4.0 
    @emotion/styled: latest => 11.3.0 
    @material-ui/core: next => 5.0.0-alpha.34 
    @material-ui/private-theming:  5.0.0-alpha.33 
    @material-ui/styled-engine:  5.0.0-alpha.34 
    @material-ui/styles:  5.0.0-alpha.33 
    @material-ui/system:  5.0.0-alpha.34 
    @material-ui/types:  6.0.0 
    @material-ui/unstyled:  5.0.0-alpha.34 
    @material-ui/utils:  5.0.0-alpha.33 
    @types/react: latest => 17.0.6 
    react: latest => 17.0.2 
    react-dom: latest => 17.0.2 
    typescript: latest => 4.2.4 

[bordeo]

[
  '@emotion',
  {
    importMap: {
      '@mui/system': {
        styled: {
          canonicalImport: ['@emotion/styled', 'default'],
          styledBaseImport: ['@mui/system', 'styled'],
        },
      },
      '@mui/material/styles': {
        styled: {
          canonicalImport: ['@emotion/styled', 'default'],
          styledBaseImport: ['@mui/material/styles', 'styled'],
        },
      },
    },
  },
],

Working for MUI v5 client-side application Full example: https://codesandbox.io/s/cra-craco-mui-styled-8ji8i

[mnajdova]

Tip: I could make the styled work with :

[
    "@emotion",
    {
      "importMap": {
        '@material-ui/core/styles': {
          'styled': {
            "canonicalImport": ["@emotion/styled", "default"],
            "styledBaseImport": ["@material-ui/core/styles", "styled"]
          }
        }
      }
    }
  ]

(I used the latest beta version of @material-ui/core, note that experimentalStyled was renamed to styled)

Protip, no need to eject, you can use customize-cra for adding the plugin.