scoped-style
•
1 min read
GitHub link: https://github.com/sadick254/scoped-style 
A new kid on the CSS in JS block.
Plays nicely with Preact, React, Hyperapp and InfernoJS.
An example from the readme for React:
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
Photo by <a href="https://unsplash.com/@marcusganahl?utmsource=unsplash&utmmedium=referral&utmcontent=creditCopyText">Marcus Ganahl</a> on <a href="https://unsplash.com/photos/text-W5qgKZj-qnk?utmsource=unsplash&utmmedium=referral&utm_content=creditCopyText">Unsplash</a>