userstyle

A module for adding styles to pages.

Install

npm install --save userstyle
# or
yarn add userstyle

API

addStyleSheet

function addStyleSheet(stylesheet: string): HTMLStyleElement

Add the string as a stylesheet to the current page and return the style element.

createClassname

function createClassname(): string

Create a unique CSS classname starting with userstyle-.

addClassRule

function addClassRule(classname: string, declaration: string | Partial<CSSStyleDeclaration>): HTMLStyleElement

Add the CSS declaration with classname as a style sheet to the current page and return the style element.

bindClassToSelector

function bindClassToSelector(classname: string, selector: () => Iterable<Element>): () => void

Automatically toggle the classname to elements by the selector function, also for new elements that attach in future. Return the unbind function to stop.

Elements that no longer match will remove the classname. Calling the unbind function will remove the classname.

bindStyleToSelector

function bindStyleToSelector(declaration: string | Partial<CSSStyleDeclaration>, selector: () => Iterable<Element>): () => void

Equivalent to:

const classname = createClassname()
addClassRule(classname, declaration)
return bindClassToSelector(classname, selector)