Babel Plugin

@emotion/babel-plugin is highly recommended. All of the options that can be provided to @emotion/babel-plugin are documented in @emotion/babel-plugin’s README.

Install

In emotion version 8 and above, installation is optional. In older versions, installation is required. See the installation instructions.

Features which are enabled with the babel plugin

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.

Components as selectors

The ability to refer to another component to apply override styles depending on nesting context. Learn more in the styled docs.