Twin.macro: Emotion version 11 + Twin issues

[ben-rogerson]

There are some issues with the next major emotion version around imports.

See the workaround below.

[nghiepit]

Emotion 11.0.0 has been released and renamed to @emotion/react instead of @emotion/core.
Any twin updates yet?

[ben-rogerson]

Emotion moved from @emotion/core to @emotion/react so here's the upgrade instructions while we wait for the twin import presets to catch up:

npm install @emotion/react @emotion/styled
# yarn add @emotion/react @emotion/styled

# and remove core as it's unused now:

npm rm @emotion/core
# yarn remove @emotion/core

Then add these imports to your twin config:

Note: Make sure there's no preset in the twin config - that setting will override these custom imports.

// package.json
{
  "babelMacros": {
    "twin": {
      "styled": {
        "import": "default",
        "from": "@emotion/styled"
      },
      "css": {
        "import": "css",
        "from": "@emotion/react"
      },
      "global": {
        "import": "Global",
        "from": "@emotion/react"
      },
    }
  },
}

// or babel-plugin-macros.config.js
module.exports = {
  twin: {
    styled: {
      import: 'default',
      from: '@emotion/styled'
    },
    css: {
      import: 'css',
      from: '@emotion/react'
    },
    global: {
      import: 'Global',
      from: '@emotion/react'
    }
  }
}

For typescript users

Add the reference types and update your css prop import to @emotion/react:

// twin.d.ts

/// <reference types="twin.macro"/>
/// <reference types="@emotion/react/types/css-prop" />

import 'twin.macro'
import styledImport from '@emotion/styled'
import { css as cssImport } from '@emotion/react'

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport
  const css: typeof cssImport
}

For @emotion/babel-plugin-jsx-pragmatic users

Also if you're using @emotion/babel-plugin-jsx-pragmatic to get around the jsx pragma, you'll need to update the imports to use the new react package too:

// .babelrc
{
  "plugins": [
    "babel-plugin-macros",
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__cssprop",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__cssprop",
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

---

I'll update the emotion preset to use these new imports when Twin v2 rolls out.

[soilSpoon]

@ben-rogerson how to use tw prop without import "twin.macro" on Emotion 11 and Nextjs 10?

[ben-rogerson]

hey @soilSpoon, babel-plugin-macros like Twin need an import to work, there was some discussion about this a few days ago.

[mhaagens]

Possibly related, i'm getting Can't resolve '@emotion/core every time I try to use <GlobalStyle /> with Next.js.
I'm trying to use Styled Components, not emotion, this is my config;

module.exports = {
  twin: {
    config: 'tailwind.config.js',
    preset: 'styled-components',
    debugProp: true,
    debugPlugins: false,
    debug: false,
  },
}

[soilSpoon]

For Typescript users

To fix this, create a twin.d.ts file in your project root (src/twin.d.ts with create-react-app) and add these declarations:

// twin.d.ts
/// <reference types="twin.macro"/>
/// <reference types="@emotion/react/types/css-prop" />

Then add the following in tsconfig.json:

// tsconfig.json
{
  "files": ["twin.d.ts"],
  // or
  // "include": ["twin.d.ts"],
}

[soilSpoon]

Possibly related, i'm getting Can't resolve '@emotion/core every time I try to use <GlobalStyle /> with Next.js.
I'm trying to use Styled Components, not emotion, this is my config;

module.exports = {
  twin: {
    config: 'tailwind.config.js',
    preset: 'styled-components',
    debugProp: true,
    debugPlugins: false,
    debug: false,
  },
}

@mhaagens
Do you enable babel-macros?
Reference

[ben-rogerson]

Possibly related, i'm getting Can't resolve '@emotion/core every time I try to use <GlobalStyle /> with Next.js.
I'm trying to use Styled Components, not emotion, this is my config;

module.exports = {
  twin: {
    config: 'tailwind.config.js',
    preset: 'styled-components',
    debugProp: true,
    debugPlugins: false,
    debug: false,
  },
}

I think your twin config isn't being picked up and so it's falling back on the defaults (@emotion/core). Perhaps you could compare your setup against the demo.

[onceLearner]

Emotion moved from @emotion/core to @emotion/react so here's the upgrade instructions while we wait for the twin import presets to catch up:

npm install @emotion/react@11 @emotion/styled@11
# yarn add @emotion/react@11 @emotion/styled@11

# and remove core as it's unused now:

npm rm @emotion/core
# yarn remove @emotion/core

Then add these imports to your twin config:

// package.json
{
  "babelMacros": {
    "twin": {
      "styled": {
        "import": "default",
        "from": "@emotion/styled"
      },
      "css": {
        "import": "css",
        "from": "@emotion/react"
      },
      "global": {
        "import": "Global",
        "from": "@emotion/react"
      },
    }
  },
}

// or babel-plugin-macros.config.js
module.exports = {
  twin: {
    styled: {
      import: 'default',
      from: '@emotion/styled'
    },
    css: {
      import: 'css',
      from: '@emotion/react'
    },
    global: {
      import: 'Global',
      from: '@emotion/react'
    }
  }
}

Note: Make sure there's no preset in the twin config - that setting will override these custom imports.

For @emotion/babel-plugin-jsx-pragmatic users

Also if you're using @emotion/babel-plugin-jsx-pragmatic to get around the jsx pragma, you'll need to update the imports to use the new react package too:

// .babelrc
{
  "plugins": [
    "babel-plugin-macros",
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__cssprop",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__cssprop",
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

I'll update the emotion preset to use these new imports when Twin v2 rolls out.

thanks man ! I spent two hours figuring out why I have the issue even though I followed the docs for NextJs Emotion .

[ben-rogerson]

I've updated the default preset in v2 to use @emotion/react so you can remove the custom imports and rely on that now 👍