Gathering detailed insights and metrics for @emotion/babel-plugin
Gathering detailed insights and metrics for @emotion/babel-plugin
Gathering detailed insights and metrics for @emotion/babel-plugin
Gathering detailed insights and metrics for @emotion/babel-plugin
babel-plugin-emotion
The Next Generation of CSS-in-JS
@emotion/babel-plugin-jsx-pragmatic
Insert code to load a module corresponding to JSX pragma.
babel-plugin-emotion-rename
Babel plugin to rename old Emotion 9 import to new Emotion 10+ import
@emotion/babel-plugin-core
A babel plugin for emotion
👩🎤 CSS-in-JS library designed for high performance style composition
npm install @emotion/babel-plugin
Typescript
Module System
Node Version
NPM Version
@emotion/styled@11.14.1
Updated on Jun 26, 2025
@emotion/styled@11.14.0
Updated on Dec 09, 2024
@emotion/cache@11.14.0
Updated on Dec 09, 2024
@emotion/react@11.14.0
Updated on Dec 09, 2024
@emotion/use-insertion-effect-with-fallbacks@1.2.0
Updated on Dec 09, 2024
@emotion/css-prettifier@1.2.0
Updated on Dec 09, 2024
JavaScript (68.13%)
TypeScript (31.63%)
HTML (0.24%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
17,818 Stars
1,860 Commits
1,133 Forks
94 Watchers
26 Branches
315 Contributors
Updated on Jul 15, 2025
Latest Version
11.13.5
Package Id
@emotion/babel-plugin@11.13.5
Unpacked Size
148.76 kB
Size
35.79 kB
File Count
24
NPM Version
8.19.4
Node Version
16.20.2
Published on
Nov 20, 2024
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Babel plugin for the minification and optimization of emotion styles.
@emotion/babel-plugin
is highly recommended, but not required in version 8 and
above of Emotion.
Feature/Syntax | Native | Babel Plugin Required | Notes |
---|---|---|---|
css`` | ✅ | ||
css(...) | ✅ | Generally used for object styles. | |
components as selectors | ✅ | Allows an emotion component to be used as a CSS selector. | |
Minification | ✅ | Any leading/trailing space between properties in your css and styled blocks is removed. This can reduce the size of your final bundle. | |
Dead Code Elimination | ✅ | Uglifyjs will use the injected /*#__PURE__*/ flag comments to mark your css and styled blocks as candidates for dead code elimination. | |
Source Maps | ✅ | When enabled, navigate directly to the style declaration in your javascript file. | |
Contextual Class Names | ✅ | Generated class names include the name of the variable or component they were defined in. |
In
1const myStyles = css` 2 font-size: 20px; 3 @media (min-width: 420px) { 4 color: blue; 5 ${css` 6 width: 96px; 7 height: 96px; 8 `}; 9 line-height: 26px; 10 } 11 background: green; 12 ${{ backgroundColor: 'hotpink' }}; 13`
Out
1const myStyles = /* #__PURE__ */ css( 2 'font-size:20px;@media(min-width:420px){color:blue;', 3 /* #__PURE__ */ css('width:96px;height:96px;'), 4 ';line-height:26px;}background:green;', 5 { backgroundColor: 'hotpink' }, 6 ';' 7)
1yarn add --dev @emotion/babel-plugin
or if you prefer npm
1npm install --save-dev @emotion/babel-plugin
.babelrc
(Recommended).babelrc
Without options:
1{ 2 "plugins": ["@emotion"] 3}
With options:
Defaults Shown
1{ 2 "plugins": [ 3 [ 4 "@emotion", 5 { 6 // sourceMap is on by default but source maps are dead code eliminated in production 7 "sourceMap": true, 8 "autoLabel": "dev-only", 9 "labelFormat": "[local]", 10 "cssPropOptimization": true 11 } 12 ] 13 ] 14}
Recommended Setup
.babelrc
1{ 2 "plugins": ["@emotion"] 3}
1babel --plugins @emotion/babel-plugin script.js
1require('@babel/core').transform('code', { 2 plugins: ['@emotion/babel-plugin'] 3})
sourceMap
boolean
, defaults to true
.
This option enables the following:
Note:
Source maps are on by default in @emotion/babel-plugin but they will be removed in production builds
autoLabel
'dev-only' | 'always' | 'never'
, defaults to dev-only
.
This option enables the following:
label
property to styles so that class names
generated by css
or styled
include the name of the variable the result is
assigned to.iconStyles$1
will become iconStyles1
) because $
is not valid
CSS ClassName SelectorEach possible value for this option produces different output code:
dev-only
we optimize the production code, so there are no labels added there, but at the same time we keep labels for development environments,always
we always add labels when possible,never
we disable this entirely and no labels are added.In
1const brownStyles = css({ color: 'brown' })
Out
1const brownStyles = /*#__PURE__*/ css({ color: 'brown' }, 'label:brownStyles;')
brownStyles
's value would be css-1q8eu9e-brownStyles
labelFormat
string
, defaults to "[local]"
.
This option only works when autoLabel
is set to 'dev-only'
or 'always'
. It allows you to
define the format of the resulting label
. The format is defined via string where
variable parts are enclosed in square brackets []
.
For example labelFormat: "my-classname--[local]"
, where [local]
will be replaced
with the name of the variable the result is assigned to.
Allowed values:
[local]
- the name of the variable the result of the css
or styled
expression is assigned to.[filename]
- name of the file (without extension) where css
or styled
expression is located.[dirname]
- name of the directory containing the file where css
or styled
expression is located.This format only affects the label property of the expression, meaning that the css
prefix and hash will
be prepended automatically.
In
1// BrownView.js 2// autoLabel: 'dev-only' 3// labelFormat: '[filename]--[local]' 4const brownStyles = css({ color: 'brown' })
Out
1const brownStyles = /*#__PURE__*/ css( 2 { color: 'brown' }, 3 'label:BrownView--brownStyles;' 4)
BrownView--brownStyles
's value would be css-hash-BrownView--brownStyles
In
1const H1 = styled.h1({ 2 borderRadius: '50%', 3 transition: 'transform 400ms ease-in-out', 4 boxSizing: 'border-box', 5 display: 'flex', 6 ':hover': { 7 transform: 'scale(1.2)' 8 } 9})
Out
1const H1 = /*#__PURE__*/ styled('h1', { 2 label: 'H1' 3})({ 4 borderRadius: '50%', 5 transition: 'transform 400ms ease-in-out', 6 boxSizing: 'border-box', 7 display: 'flex', 8 ':hover': { 9 transform: 'scale(1.2)' 10 } 11})
H1
's class name attribute would be css-hash-H1
cssPropOptimization
boolean
, defaults to true
.
This option assumes that you are using something to make @emotion/react
's jsx
function work for all jsx. If you are not doing so and you do not want such optimizations to occur, disable this option.
importMap
This option allows you to tell @emotion/babel-plugin what imports it should look at to determine what it should transform so if you re-export Emotion's exports, you can still use the Babel transforms
An example file:
1import { anotherExport } from 'my-package' 2import { someExport, thisIsTheJsxExport } from 'some-package'
An example config:
1{ 2 "my-package": { 3 "anotherExport": { 4 "canonicalImport": ["@emotion/styled", "default"], 5 "styledBaseImport": ["my-package/base", "anotherExport"] 6 } 7 }, 8 "some-package": { 9 "someExport": { 10 "canonicalImport": ["@emotion/react", "css"] 11 }, 12 "thisIsTheJsxExport": { 13 "canonicalImport": ["@emotion/react", "jsx"] 14 } 15 } 16}
Instead of using @emotion/babel-plugin
, you can use emotion with babel-plugin-macros
. Add babel-plugin-macros
to your babel config (which is included in Create React App 2.0) and use the imports/packages shown below.
1import { 2 css, 3 keyframes, 4 injectGlobal, 5 flush, 6 hydrate 7} from '@emotion/css/macro' 8import { jsx, css, Global, keyframes } from '@emotion/react/macro' 9import styled from '@emotion/styled/macro'
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
GitHub workflow tokens follow principle of least privilege
Details
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 17/20 approved changesets -- score normalized to 8
Reason
2 commit(s) and 7 issue activity found in the last 90 days -- score normalized to 7
Reason
security policy file detected
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
163 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More