# @dynamicss/dynamicss > Manage CSS style sheets with javascript Latest version **2.2.8** (published 2022-09-27) · MIT license · 0 weekly downloads ## Install ```sh npm install @dynamicss/dynamicss pnpm add @dynamicss/dynamicss yarn add @dynamicss/dynamicss bun add @dynamicss/dynamicss ``` ## Health **Score 40/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned. ## Facts | | | |---|---| | Version | 2.2.8 | | Published | 2022-09-27 | | First published | 2021-08-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 58.9 KB | | Known vulnerabilities | 0 | | Install scripts | yes | | GitHub stars | 65 | | Author | JinSSJ3 | | Maintainers | jin_ssj3 | | Keywords | css, jss, dynamic, style, sheet, stylesheet, inject css, typescript, front-end, framework | ## Links - npm: https://www.npmjs.com/package/@dynamicss/dynamicss - Repository: https://github.com/JinSSJ3/dynamicss - Homepage: https://github.com/JinSSJ3/dynamicss#readme - Issues: https://github.com/JinSSJ3/dynamicss/issues - npm.io page: https://npm.io/package/@dynamicss/dynamicss ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 2.2.8 (latest) — 2022-09-27 - 2.2.4 — 2022-09-27 - 2.2.2 — 2022-08-17 - 2.2.0 — 2021-10-12 - 2.1.0 — 2021-08-11 - 2.0.2 — 2021-08-10 - 2.0.1 — 2021-08-10 - 2.0.0 — 2021-08-09 - 1.0.8 — 2021-08-09 - 1.0.7 — 2021-08-08 - 1.0.6 — 2021-08-08 - 1.0.5 — 2021-08-08 - 1.0.4 — 2021-08-05 - 1.0.3 — 2021-08-05 - 1.0.2 — 2021-08-05 - … 2 more at https://npm.io/package/@dynamicss/dynamicss/versions ## README

Unlimited React components logologo

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/JinSSJ3/react-drop-zone-responsive/blob/HEAD/LICENSE) [![npm latest package](https://img.shields.io/npm/v/@dynamicss/dynamicss.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen)](https://www.npmjs.com/package/@dynamicss/dynamicss) [![install size](https://packagephobia.com/badge?p=@dynamicss/dynamicss)](https://packagephobia.com/result?p=@dynamicss/dynamicss) [![Build Status](https://www.travis-ci.com/JinSSJ3/dynamicss.svg?branch=master)](https://www.travis-ci.com/JinSSJ3/dynamicss) [![Coverage Status](https://coveralls.io/repos/github/JinSSJ3/dynamicss/badge.svg?branch=master&t=NYfAAW)](https://coveralls.io/github/JinSSJ3/dynamicss?branch=master) [![Total alerts](https://img.shields.io/lgtm/alerts/g/JinSSJ3/dynamicss.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/JinSSJ3/dynamicss/alerts/) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/unlimited-react-components/react-drop-zone.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/unlimited-react-components/react-drop-zone/context:javascript) [![Known Vulnerabilities](https://snyk.io/test/github/jinSSJ3/dynamicss/badge.svg)](https://snyk.io/test/github/jinssj3/dynamicss) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) ## Description With DinamiCSS you can manage CSS style sheets dynamically ## Installation DinamiCSS is available as an [npm package](https://www.npmjs.com/package/dinamicss). ```sh // with npm npm i @dynamicss/dynamicss ``` ## Main Features: - Insert style sheets from javascript files. - Edit stylesheets at run-time. - Remove style sheet. - Check whether a style sheet has already been inserted into the DOM - Create a DynamicSheet object rpresentation ## Usage (basic example) Here is a quick example to get you started, **it's all you need**: Interactive and live demo: [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/dynamicss-react-h5zie) ## DynamiCSS Types: | Name | Description | Attributes | | ------------------ | --------------------------------------------------------- | --------------------------------------------------------------- | | `DynamicSheet` | Object that represents a css style sheet | `id`: string; | | | | `content?`: string; | | | | `sheetRules?`: DynamicSheetRule[]; | | `DynamicSheetRule` | Object that represents a set of css rules for a classname | `className`: string; | | | | `rules`: DynamicStyle \| DynamicPseudoNested \| DynamicHyphens; | ## DynamiCSS namespace Functions: | Function | Description | | ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | `function insertStyleSheet(dynamicSheet: DynamicSheet): string` | Inserts the stylesheet into the DOM | | `function editStyleSheet(id: string, sheetRules: DynamicSheetRule[]): string` | Edits an existing stylesheet in the DOM | | `function removeStyleSheet(id: string): string` | Removes an existing stylesheet in the DOM | | `function existStyleSheet(id: string): boolean` | Returns true if a match is found with the given id | | `function makeStyleSheet(styleSheet: DynamicSheet): DynamicSheet` | Returns the same DynamicSheet object (probably useless, but helps in JS) | ## License This project is licensed under the terms of the [MIT license](/LICENSE). --- _Source: https://npm.io/package/@dynamicss/dynamicss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._