Home

Awesome

Awesome CSS in JS Awesome Build Status

A collection of awesome things regarding to CSS in JS approach

δΈ­ζ–‡ README

Table of Contents

Libraries

NOTE table is still not completed. If there is bug or need to add another library - please suggest PR.

How to read the table:

As Object - When declare CSS using Objects.

{
  color: 'red',
}

As TL - When declare CSS using Template Literals.

`
  color: red;
`

SSR - Server Side Rendering.

RN Support - React Native support.

Agnostic - Framework agnostic. Means that library could used with any framework.

Dynamic - When it is possible to write CSS that depends on runtime values like component props.

{
  color: props =>  props.color
}
props => ({
  color: props.color
})
`
  color: ${props => props.color}
`

Babel plugins - If there are any babel plugins for performance optimization.

Bindings - If there are packages that provide bindings for another framework or library.

PackageAs ObjectAs TLSSRRN SupportAgnosticDynamicBabel pluginsBindings
emotionβœ…βœ…βœ…βœ…βœ…βœ…βœ…react-emotion, preact-emotion
felaβœ…βœ…βœ…βœ…βœ…react-fela native-fela preact-fela inferno-fela
jssβœ…βœ…βœ…βœ…βœ…βœ…react-jss styled-jss
rockeyβœ…βœ…βœ…rockey-react
styled-componentsβœ…βœ…βœ…βœ…βœ…
aphroditeβœ…βœ…βœ…
csxβœ…βœ…βœ…
glamβœ…βœ…βœ…βœ…
glamorβœ…βœ…βœ…βœ…
glamorousβœ…βœ…βœ…βœ…
styletronβœ…βœ…βœ…βœ…styletron-react
aestheticβœ…βœ…
j2cβœ…βœ…βœ…

Articles

Videos

Benchmarks and comparison