A new kid on the CSS in JS block.

Plays nicely with Preact, React, Hyperapp and InfernoJS.

An example from the readme for React:

import React from "react"
import scoped from "scoped-style"

const styled = scoped(React.createElement)


// define global css
styled.global`

  * {
    margin: 0;
  }

  html,
  body {
    width: 100%;
    height: 100%;
  }

`;

// and scoped css
const Button = styled("button")`

  background: ${props => props.primary ? "orange": "gray"};
  border: none;
  border-radius: 2px;
  :hover {
    padding: 10px;
  }

`

const App = () => (
  <div>
    <Button primary>Login</Button>
  </div>
)

// Your rendering code

This post is also available on DEV.