scoped-style

The https://github.com/sadick254/scoped-style repository on GitHub

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