Emotion not compatible with styled.box

[ivanbanov]

I will just cross-post it here to set it as a known-issue.

To properly use Emotion11 with xstyled we have to use importMap and create a canonical reference to notify emotion that some internals are being re-exported. Something like this

//babel.config.js
module.exports = () => ({
  plugins: [
    [
      '@emotion/babel-plugin',
      {
        importMap: {
          '@xstyled/emotion': {
            default: {
              canonicalImport: ['@emotion/styled', 'default'],
              styledBaseImport: ['@xstyled/emotion', 'default'],
            },
          },
        },
      },
    ],
  ],
})

In xstyled it is not only re-exporting but also adding some new functionalities such as styled.box, the problem is that Emotion does not move the extras ahead, it only sticks to what the original Emotion instance would be able to do. I opened an issue in the emotions repo with an example of this problem.

emotion-js/emotion#2412

[ivanbanov]

As a workaround for that Im now using the following

import styled, { x } from '@xstyled/emotion'

const MyComponent = styled(x.div)({
  color: 'red',
})