kylpo / emotion

⚡️ The Next Generation of CSS-in-JS

emotion

The Next Generation of CSS-in-JS

emotion is a high performance, lightweight css-in-js library. The core idea comes from Sunil Pai’s glam library and its philosophy is laid out here. The basic idea is simple. You shouldn’t have to sacrifice runtime performance for good developer experience when writing CSS. emotion minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime.

-- Introduction Article

• Install

• Demos

  • emotion website [Demo Here]
  • next-hnpwa-guide-kit [Demo Here]
  • open a PR and add yours!

• Benchmarks

• Extract Mode

• Inline Mode

• API

  • css
  • styled
  • css prop
  • composes property
  • keyframes
  • fontFace
  • injectGlobal
  • vue styled

• Usage with CSS Modules

• Usage with babel-macros