@emotion/babel-preset-css-prop

What is @emotion/babel-preset-css-prop?

@emotion/babel-preset-css-prop is a Babel preset that allows you to use the css prop when writing React components. This preset makes it easier to style components using Emotion's powerful CSS-in-JS library, enabling you to write CSS directly within your JavaScript code.

What are @emotion/babel-preset-css-prop's main functionalities?

Using css prop for styling

This feature allows you to use the css prop to style React components directly. The css prop accepts a CSS-in-JS object or template literal, making it easy to apply styles.

import React from 'react';
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: hotpink;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
`;

const Button = () => (
  <button css={buttonStyle}>Click Me</button>
);

export default Button;

Theming with css prop

This feature demonstrates how to use the css prop in conjunction with Emotion's ThemeProvider to apply theme-based styles. The theme object can be accessed within the css prop to dynamically style components based on the current theme.

import React from 'react';
/** @jsxImportSource @emotion/react */
import { css, ThemeProvider } from '@emotion/react';

const theme = {
  colors: {
    primary: 'hotpink',
    secondary: 'blue'
  }
};

const buttonStyle = theme => css`
  background-color: ${theme.colors.primary};
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
`;

const Button = () => (
  <button css={buttonStyle}>Click Me</button>
);

const App = () => (
  <ThemeProvider theme={theme}>
    <Button />
  </ThemeProvider>
);

export default App;

Other packages similar to @emotion/babel-preset-css-prop

styled-components

styled-components is another popular CSS-in-JS library that allows you to write actual CSS to style your components. It uses tagged template literals to style components and provides a similar theming capability. Unlike @emotion/babel-preset-css-prop, styled-components does not use the css prop but instead uses the styled function to create styled components.

linaria

Linaria is a zero-runtime CSS-in-JS library that allows you to write CSS in JavaScript without any runtime overhead. It extracts the CSS at build time, ensuring that your styles are fast and efficient. Linaria uses tagged template literals similar to styled-components but focuses on zero-runtime performance, unlike @emotion/babel-preset-css-prop which allows for runtime theming and dynamic styles.

aphrodite

Aphrodite is a CSS-in-JS library developed by Khan Academy that focuses on performance and ease of use. It generates atomic CSS classes to minimize style recalculations and reflows. Aphrodite does not use the css prop but instead provides a StyleSheet.create method to define styles and a css function to apply them to components.

README

@emotion/babel-preset-css-prop

A babel preset to automatically enable emotion's css prop

• Install
• Usage
• Features
• Options

Install

yarn add @emotion/babel-preset-css-prop

Usage

.babelrc

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

@emotion/babel-preset-css-prop includes the emotion plugin. The babel-plugin-emotion entry should be be removed from your config and any options moved to the preset. If you use @babel/preset-react or @babel/preset-typescript ensure that @emotion/babel-preset-css-prop is inserted after them in your babel config.

{
+ "presets": [
+   [
+     "@emotion/babel-preset-css-prop",
+     {
+       "autoLabel": true,
+       "labelFormat": "[local]"
+     }
+   ]
+ ],
- "plugins": [
-   [
-     "emotion",
-     {
-       "autoLabel": true,
-       "labelFormat": "[local]"
-     }
-   ]
- ]
}

See the options documentation for more information.

Via CLI

babel --presets @emotion/babel-preset-css-prop script.js

Via Node API

require('@babel/core').transform(code, {
  presets: ['@emotion/babel-preset-css-prop']
})

Features

This preset enables the css prop for an entire project via a single entry to the babel configuration. After adding the preset, compiled jsx code will use emotion's jsx function instead of React.createElement.

	Input	Output
Before	<img src="avatar.png" />	React.createElement('img', { src: 'avatar.png' })
After	<img src="avatar.png" />	jsx('img', { src: 'avatar.png' })

import { jsx } from '@emotion/core' is automatically added to the top of files where required.

Example

In

const Link = props => (
  <a
    css={{
      color: 'hotpink',
      '&:hover': {
        color: 'darkorchid'
      }
    }}
    {...props}
  />
)

Out

import { jsx as ___EmotionJSX } from '@emotion/core'

function _extends() {
  /* babel Object.assign polyfill */
}

var _ref =
  process.env.NODE_ENV === 'production'
    ? {
        name: '1fpk7dx-Link',
        styles: 'color:hotpink;&:hover{color:darkorchid;}label:Link;'
      }
    : {
        name: '1fpk7dx-Link',
        styles: 'color:hotpink;&:hover{color:darkorchid;}label:Link;',
        map:
          '/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImF1dG9tYXRpYy1pbXBvcnQuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRUkiLCJmaWxlIjoiYXV0b21hdGljLWltcG9ydC5qcyIsInNvdXJjZXNDb250ZW50IjpbImNvbnN0IExpbmsgPSBwcm9wcyA9PiAoXG4gIDxhXG4gICAgY3NzPXt7XG4gICAgICBjb2xvcjogJ2hvdHBpbmsnLFxuICAgICAgJyY6aG92ZXInOiB7XG4gICAgICAgIGNvbG9yOiAnZGFya29yY2hpZCdcbiAgICAgIH1cbiAgICB9fVxuICAgIHsuLi5wcm9wc31cbiAgLz5cbilcbiJdfQ== */'
      }

const Link = props =>
  ___EmotionJSX(
    'a',
    _extends(
      {
        css: _ref
      },
      props
    )
  )

In addition to the custom pragma, this example includes babel-plugin-emotion transforms that are enabled by default.

Options

Options for both babel-plugin-emotion and @babel/plugin-transform-react-jsx are supported and will be forwarded to their respective plugin.

Refer to the plugin's documentation for full option documentation.

• babel-plugin-emotion

• @babel/plugin-transform-react-jsx

Examples

{
  "presets": [
    "@emotion/babel-preset-css-prop",
    {
      "autoLabel": true,
      "labelFormat": "[local]",
      "useBuiltIns": false,
      "throwIfNamespace": true
    }
  ]
}

Options set to default values for demonstration purposes.