An open API service indexing awesome lists of open source software.

https://github.com/blackglory/userstyle

🌲 A module for adding styles to pages.
https://github.com/blackglory/userstyle

browser library npm-package typescript

Last synced: 9 days ago
JSON representation

🌲 A module for adding styles to pages.

Awesome Lists containing this project

README

          

# userstyle

A module for adding styles to pages.

## Install

```sh
npm install --save userstyle
# or
yarn add userstyle
```

## API

### addStyleSheet

```ts
function addStyleSheet(stylesheet: string): HTMLStyleElement
```

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

### createClassname

```ts
function createClassname(): string
```

Create a unique CSS classname starting with `userstyle-`.

### addClassRule

```ts
function addClassRule(classname: string, declaration: string | Partial): HTMLStyleElement
```

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

### bindClassToSelector

```ts
function bindClassToSelector(classname: string, selector: () => Iterable): () => 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

```ts
function bindStyleToSelector(declaration: string | Partial, selector: () => Iterable): () => void
```

Equivalent to:

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