StyleSheetMap

A StyleSheetMap instance is a Map-like object that allows adding, updating, and deleting CSS rules through key-value pairs. It provides a convenient way to manage and manipulate CSS stylesheets, simplifying the handling of dynamic styles.

Installation

1# npm
2npm i style-sheet-map
3
4# yarn
5yarn add style-sheet-map
6
7# pnpm
8pnpm add style-sheet-map

Usage

1import StyleSheetMap from "style-sheet-map";
2
3// Create a new StyleSheetMap instance
4const styleMap = new StyleSheetMap({
5  rules: [
6    ["header", "header { color: blue; }"],
7    ["paragraph", "p { font-size: 16px; }"],
8  ],
9  onCreated: (sheet) => {
10    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
11  },
12});
13
14// Dynamically adding new CSS rules
15styleMap.set("button", "button { background-color: green; }");
16
17// Update existing CSS rules
18styleMap.set("header", "header { color: red; }");
19
20// Deleting a CSS rule
21styleMap.delete("paragraph");
22
23// Disable the entire stylesheet
24styleMap.disable = true;

Project Origin

The concept and code for StyleSheetMap were initially developed as part of the Anything Copilot project. This project extracts and refines that functionality into a standalone, general-purpose module.

Discover more about its origins: Anything Copilot

License

This project is licensed under the MIT License.