Skip to content
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition
JavaScript TypeScript HTML
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.changeset ci(changeset): generate PR with changelog & version updates (#1832) Apr 3, 2020
.circleci Upgrade preconstruct (#1170) Apr 11, 2019
.github Update release.yml Dec 19, 2019
__mocks__ Emotion Native (#759) Jul 28, 2018
docs Use explicit & when defining styles for pseudo-classes in docs exampl… Apr 3, 2020
flow-typed/npm renderStyleToString: Skip undefined styles (#1021) Nov 16, 2018
packages ci(changeset): generate PR with changelog & version updates (#1832) Apr 3, 2020
playgrounds Add bolt-check (#1390) Jun 9, 2019
scripts Fix babel plugin crashing when called programmatically without provid… Oct 26, 2019
site Bump webpack-bundle-analyzer from 2.13.1 to 3.3.2 (#1585) Nov 1, 2019
test Pass null to insertBefore (#980) Nov 2, 2018
.eslintignore Migrate next packages (#763) Jul 13, 2018
.flowconfig Fixed styled Flow types (#1570) Oct 27, 2019
.flowconfig-ci Fixed styled Flow types (#1570) Oct 27, 2019
.gitignore Push source maps & labels to cooked/raw arrays in TS-transpiled tagge… Oct 5, 2019
.nvmrc [WIP] - Site Redesign (#1201) Feb 14, 2019
.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
CHANGELOG.md Use changesets (#1343) May 9, 2019
CODE_OF_CONDUCT.md Add CODE_OF_CONDUCT.md (#65) Jul 1, 2017
CONTRIBUTING.md Use changesets (#1343) May 9, 2019
LICENSE Add LICENSE files (#1698) Dec 22, 2019
README.md Fix circuit-ui github and Storybook link (#1763) Feb 15, 2020
RELEASING.md Use changesets (#1343) May 9, 2019
babel.config.js Make site use MDX (#1449) Jul 29, 2019
codecov.yml Add codecov.yml (#371) Oct 2, 2017
emotion.png update to logo instead of bob ross 😭 Jul 10, 2017
jest.config.js Use preconstruct dev command (#1317) Apr 17, 2019
jest.dist.js Upgrade preconstruct (#1170) Apr 11, 2019
netlify.toml [WIP] - Site Redesign (#1201) Feb 14, 2019
package.json chore: update husky to v3.0.9 (#1619) Nov 8, 2019
yarn.lock chore: update husky to v3.0.9 (#1619) Nov 8, 2019

README.md

emotion

emotion

The Next Generation of CSS-in-JS

Need support upgrading to Emotion 10? See the migration guide

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 (
    <div
      css={{
        color: 'hotpink'
      }}
      {...props}
    />
  )
}

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

Examples

Ecosystem

In the Wild

Contributors

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

Backers

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

Sponsors

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

Thinkmill

You can’t perform that action at this time.