https://github.com/baotlake/stylesheet-map
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.
https://github.com/baotlake/stylesheet-map
css frontend javascript library style-sheet
Last synced: 23 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/baotlake/stylesheet-map
- Owner: baotlake
- License: mit
- Created: 2024-08-04T06:21:55.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-06-01T15:47:14.000Z (about 1 month ago)
- Last Synced: 2026-06-01T16:28:27.782Z (about 1 month ago)
- Topics: css, frontend, javascript, library, style-sheet
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/style-sheet-map
- Size: 57.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# StyleSheetMap
A Map-like wrapper around `CSSStyleSheet` for managing CSS rules by key. Add, update, and delete rules with key-value semantics — works with constructable stylesheets and `adoptedStyleSheets`.
## Installation
```shell
# npm
npm i style-sheet-map
# yarn
yarn add style-sheet-map
# pnpm
pnpm add style-sheet-map
```
## Usage
```javascript
import StyleSheetMap from "style-sheet-map";
// Create a new StyleSheetMap instance
const styleMap = new StyleSheetMap({
rules: [
["header", "header { color: blue; }"],
["paragraph", "p { font-size: 16px; }"],
],
onCreated: (sheet) => {
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
},
});
// Dynamically adding new CSS rules
styleMap.set("button", "button { background-color: green; }");
// Update existing CSS rules
styleMap.set("header", "header { color: red; }");
// Deleting a CSS rule
styleMap.delete("paragraph");
// Disable the entire stylesheet
styleMap.disable = true;
```
## Project Origin
The concept and code for StyleSheetMap were initially developed as part of the [Anything Copilot project](https://github.com/baotlake/anything-copilot). This project extracts and refines that functionality into a standalone, general-purpose module.
Discover more about its origins: [Anything Copilot](https://ziziyi.com/anything-copilot)
## License
This project is licensed under the MIT License.