emotion

What is emotion?

Emotion is a performant and flexible CSS-in-JS library that allows you to style applications quickly and efficiently with JavaScript. It provides powerful and flexible tools for writing CSS styles with JavaScript, including support for styled components, CSS prop, and keyframes for animations.

What are emotion's main functionalities?

Styled Components

Styled components allow you to create React components with styles attached to them. This makes it easy to manage styles in a modular and reusable way.

const Button = styled.button`
  color: hotpink;
`;

<Button>Click me</Button>

CSS Prop

The CSS prop allows you to style elements using a prop directly in your JSX. This is useful for applying styles conditionally or dynamically.

<div css={{ color: 'hotpink' }}>Hello World</div>

Keyframes for Animations

Emotion provides support for keyframes, allowing you to define animations in your JavaScript code. This makes it easy to create complex animations and apply them to your components.

import { keyframes } from '@emotion/react';

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }
  70% {
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
`;

const BouncingDiv = styled.div`
  animation: ${bounce} 1s ease infinite;
`;

<BouncingDiv>Bounce!</BouncingDiv>

Other packages similar to emotion

styled-components

Styled-components is another popular CSS-in-JS library that allows you to write plain CSS in your JavaScript. It offers a similar API to Emotion's styled components and is widely used in the React community.

aphrodite

Aphrodite is a CSS-in-JS library developed by Khan Academy. It focuses on performance and provides a straightforward API for defining styles in JavaScript. It is less feature-rich compared to Emotion but is known for its simplicity and performance.

jss

JSS is a library for generating CSS from JavaScript. It provides a powerful and flexible API for defining styles and supports various plugins for additional functionality. JSS is highly customizable and can be used with various frameworks, not just React.

README

emotion

high performance js for your css

• Install
• Example Project

Install

npm install -S emotion

.babelrc

{
  "plugins": [
    "emotion/babel"
  ]
}

Extract Mode

The default settings enable css extraction.

This js file, h1.js

import styled from 'emotion/styled'

const H1 = styled('h1')`
  color: #ffd43b;
`

During babel compilation emotion will create h1.emotion.css and add import './h1.emotion.css' to the top of h1.js

.css-H1-duiy4a {
  color: blue
}

h1.js after babel compilation

import './h1.emotion.css'
import styled from 'emotion/styled'

const H1 = styled('h1', 'css-H1-duiy4a')

Browser Support no ie11 support (css vars)

Inline Mode

Inline mode does not extract css into external files.

.babelrc

{
  "plugins": [
    ["emotion/babel", { inline: true }]
  ]
}

This js file, h1.js

import styled from 'emotion/styled'

const H1 = styled('h1')`
  color: #ffd43b;
`

h1.js after babel compilation

import './h1.emotion.css'
import styled from 'emotion/styled'

const H1 = styled('h1', 'css-H1-duiy4a', [], function createEmotionStyles() {
  return ['.css-H1-duiy4a {color:blue}']
})

Browser Support anything React supports

API

styled

import styled from 'emotion/styled'

const H1 = styled('h1')`
  color: blue;
  font-size: 48px;
  transform: scale(${props => props.scale});
`

function Greeting ({ name }) {
  return <H1 scale={2}>Hello {name}</H1> // blue, 48px, and scaled 2x text
}


// You can also pass components in

const H2 = styled(H1)`
  font-size: ${fontSize * 2/3}px;
  color: red;
`

function Greeting ({ name }) {
  return <H2>Hello {name}</H2> // red, 32px, and scaled 2x text
}

// this works too

const H3 = styled.h3`
  font-size: ${fontSize * 1/3}px;
  color: red;
`

function Greeting ({ name }) {
  return <H3>Hello {name}</H3> // red, 16px text
}

// You can also pass refs down using innerRef
const H1 = styled('h1')`
  color: red;
`

function Greeting ({ name }) {
  // will turn into to <h1 className="generated-className" ref={() => console.log('hello!')}>Hello {name}</h1>
  return <H1 innerRef={() => console.log('hello!')}>Hello {name}</H1> 
}

vue styled

<template>
  <div id="app">
    <styled-div>This should have a blue background.</styled-div>
    <styled-component></styled-component>
  </div>
</template>

<script>
import BoringComponent from './components/BoringComponent'
// Import styled from emotion/vue instead of emotion/styled
import styled from 'emotion/vue'

// You can use styled.* just like with React
const StyledDiv = styled.div`
  background: blue;
`

// You can also pass components in
const StyledComponent = styled(BoringComponent)`
  display: flex;
  justify-content: center;
`

export default {
  name: 'app',
  components: {
    'styled-div': StyledDiv,
    'styled-component': StyledComponent
  }
}
</script>

attr

The attr CSS function is supported in a basic capacity.

/* get value from `width` prop */
width: attr(width vw);

/* specify type or unit to apply to value */
width: attr(width vw);

/* fallback value if props.width is falsey */
width: attr(width vw, 50);

const H1 = styled.h1`
  font-size: attr(fontSize px);
  margin: attr(margin rem, 4);
  font-family: sans-serif;
  color: ${colors.pink[5]};
  @media (min-width: 680px) {
    color: attr(desktopColor);
  }
`

const Title = ({ title, scale }) => {
  return (
    <H1 fontSize={16 * scale} desktopColor={colors.gray[5]}>
      {title}
    </H1>
  )
}

Supported value types

em|ex|px|rem|vw|vh|vmin|vmax|mm|cm|in|pt|pc|%