node package manager

stylesheet-decorator

This decorator allows to easily style Preact 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 in preact like Angular or Vue does by adding a scoped stylesheet

Example

preact-stylesheet-example https://gist.github.com/k1r0s/6167eab946514d6aab4b9ce6943bb443#file-my-selector-tsx-L80

Getting started

install npm install stylesheet-decorator --save

usage:

  1. import
import { stylesheet } from "stylesheet-decorator"
  1. define a string with raw CSS content
const style = `
  span { font-size: 20px }
`
  1. Plug it on render fn of some Preact component
 
@stylesheet(style)
render() {
  return <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