style as a function of state
Switch branches/tags
Clone or download
whs and mitchellhamilton renderStyleToString: Skip undefined styles (#1021)
* renderStyleToString: Skip undefined styles

* Updated jest type definition

* Changed undefined style test to snapshot

* Added undefined assertion back
Latest commit 5e082a8 Nov 16, 2018
Failed to load latest commit information.
.circleci Update flow (#919) Oct 12, 2018
.github Update Oct 11, 2018
__mocks__ Emotion Native (#759) Jul 28, 2018
docs Update docs Nov 2, 2018
flow-typed/npm renderStyleToString: Skip undefined styles (#1021) Nov 16, 2018
packages renderStyleToString: Skip undefined styles (#1021) Nov 16, 2018
playgrounds Publish Nov 5, 2018
scripts Publish Nov 13, 2018
site Publish Nov 2, 2018
test Pass null to insertBefore (#980) Nov 2, 2018
.eslintignore Migrate next packages (#763) Jul 13, 2018
.flowconfig Fix flow errors in newer versions of flow (#996) Nov 13, 2018
.gitignore Update .gitignore Sep 30, 2018
.nvmrc New site with gatsby (#368) Jan 4, 2018
.prettierignore Add package.json to .prettierignore Jan 31, 2018
.prettierrc.yaml Change live code and add precommit hook for prettifying markdown (#782) Aug 1, 2018
.yarnrc Emotion Primitives (#658) Jul 6, 2018 Drop support for preact (#896) Oct 12, 2018 Update Jul 29, 2018 Add (#65) Jul 1, 2017 Emotion 10 docs (#799) Oct 8, 2018
LICENSE πŸ‘©β€πŸš€ May 27, 2017 Fix labels of size badges in README (#946) Oct 18, 2018 Update Nov 14, 2018
babel.config.js Support source maps in SSR (#989) Nov 3, 2018
codecov.yml Add codecov.yml (#371) Oct 2, 2017
emotion.png update to logo instead of bob ross 😭 Jul 10, 2017
jest.config.js Always enable source maps (#956) Oct 26, 2018
jest.dist.js Migrate next packages (#763) Jul 13, 2018
lerna.json Change to independent versioning Oct 4, 2018
netlify.toml Change build system and update Jest (#747) Jul 2, 2018
package.json Upgrade husky to 1.1.3 (#1006) Nov 12, 2018
yarn.lock Upgrade husky to 1.1.3 (#1006) Nov 12, 2018



The Next Generation of CSS-in-JS

Emotion 10 is currently in beta, there are many breaking changes between versions, for docs on Emotion 9 please go to the latest v9 tag or

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov core size core gzip size react size react gzip size slack spectrum

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

πŸ‘€ Demo Sandbox

πŸ“– Docs

Frequently viewed docs:

Quick Start

Get up and running with a single import.

npm install --save @emotion/core
/** @jsx jsx */
import { jsx } from '@emotion/core'

let SomeComponent = props => {
  return (
        color: 'hotpink'

Do I Need To Use the Babel Plugin?

The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.

Look here πŸ‘‰ emotion babel plugin feature table and documentation

Demo Sandbox

Demo Code Sandbox



In the Wild


This project exists thanks to all the people who contribute. [Contribute].


Thank you to all our backers! πŸ™ [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]