Registry / web-framework / babel-plugin-emotion

babel-plugin-emotion

library11.0.0jsnpmunverified

A Babel plugin for Emotion, the CSS-in-JS library, that enables automatic JSX pragma, source maps, and minification of styles. The current stable version is 11.14.0 (last updated late 2024). It is released regularly alongside the main Emotion monorepo. Unlike the older `babel-plugin-emotion` (v10), this package is scoped under `@emotion` and requires Babel 7+. Key differentiator: it is the recommended plugin for Emotion v11+, providing optimizations like label generation and dead code elimination.

web-framework

npm install babel-plugin-emotion

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · BABEL-PLUGIN-EMOTI

babel-plugin-emotion

web-frameworkjavascriptv11.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

@emotion/babel-plugin

✓ module.exports = { presets: ['@emotion/babel-plugin'] }

✗ module.exports = { presets: ['babel-plugin-emotion'] }

In v10 the package was named `babel-plugin-emotion`, in v11+ it is `@emotion/babel-plugin`. Use the scoped name.

babel-plugin-emotion

✓ npm install @emotion/babel-plugin@11

✗ npm install babel-plugin-emotion@11

The old package `babel-plugin-emotion` only goes up to v10. The v11 version is `@emotion/babel-plugin`.

config for Babel

✓ { "plugins": ["@emotion"] }

✗ { "plugins": ["babel-plugin-emotion"] }

In babel config, use the string `"@emotion"` as plugin name for v11+.

Shows Babel config with @emotion plugin and basic styled component using css prop.

// Install: npm install --save-dev @emotion/babel-plugin // .babelrc { "presets": [ ["@babel/preset-react", { "runtime": "automatic" }] ], "plugins": ["@emotion"] } // Component import { css } from '@emotion/react' const style = css` color: hotpink; ` function App() { return <div css={style}>Hello Emotion</div> }

Debug

Known issues

breakingThe package was renamed from `babel-plugin-emotion` to `@emotion/babel-plugin` in v11. Old imports will not work.

fix

Replace all references from 'babel-plugin-emotion' to '@emotion/babel-plugin'.

affects: >=11.0.0

breakingOptions API changed between v10 and v11. For example, `sourceMap` option is now under `@emotion/babel-plugin` options.

fix

Consult the new options documentation. Common options like `sourceMap` and `autoLabel` are still supported but need to be passed differently.

affects: >=11.0.0

gotchaThe plugin requires Babel 7+. Using with older Babel versions will fail.

fix

Update to Babel 7 or later. The package `@emotion/babel-plugin` does not support Babel 6.

affects: >=11.0.0

deprecatedThe `labelFormat` option is deprecated in favor of `autoLabel`.

fix

Use `autoLabel: true` or `autoLabel: 'dev-only'` instead of `labelFormat`.

affects: >=11.0.0

Errors

Common errors & fixes

Error: Cannot find module '@emotion/babel-plugin'

Package not installed or wrong name used in config.

fix

Run `npm install --save-dev @emotion/babel-plugin` and ensure config uses the scoped name.

Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: ... Support for the experimental syntax 'classProperties' isn't currently enabled

Missing Babel plugins for modern JavaScript syntax.

fix

Install `@babel/plugin-proposal-class-properties` or use the `@babel/preset-env` preset.

Warning: You are using the automatic JSX runtime with Emotion's babel plugin. If you don't...

Babel preset-react runtime mismatch.

fix

Set `runtime: 'automatic'` in `@babel/preset-react` options.

TypeError: Cannot read properties of undefined (reading 'createElement')

Missing import of React when using JSX without automatic runtime.

fix

Either add `import React from 'react'` in every file or use the automatic runtime with `@babel/preset-react`.

Upgrade

Version history

11.0.0latest on npm

Audit

Dependencies

@emotion/babel-plugin-jsx-pragmaticrequiredUsed internally for JSX pragma, must be installed for automatic JSX runtime.

Agent activity

19 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/emotion-js/emotion ↗

packagehttps://www.npmjs.com/package/babel-plugin-emotion ↗

homepagehttps://emotion.sh ↗