k1r0s / preact-stylesheet-decorator

This decorator allows to easily style Preact/React (since 1.6.*) components through adding a scoped stylesheet inside that component and defined styles only get applied to it and its descendants.

Basically it allows to style preact/react like Angular or Vue does by adding a scoped stylesheet

Demo (Preact)

Getting started

install npm install stylesheet-decorator --save

usage:

1. import

import { stylesheet } from "stylesheet-decorator[/preact]"
import { stylesheet } from "stylesheet-decorator/react"

2. define a string with raw CSS content

const style = `
  span { font-size: 20px; color: lightblue; }
`

3. Plug it on render fn of some Preact/React component

@stylesheet(style)
render() {
  return <span>something</span>
}

or

stylesheet(style, props => <span>something</span>)

That's all.

This decorator supports all CSS capabilities defined here: https://www.npmjs.com/package/scope-css

This development is related on this conversation: Twitter Link and this issue GH preact issue