@dynamicss/dynamicss

Manage CSS style sheets with javascript

Usage no npm install needed!

<script type="module">
  import dynamicssDynamicss from 'https://cdn.skypack.dev/@dynamicss/dynamicss';
</script>

README

Unlimited React components logologo

license npm latest package npm latest package dependencies Status install size Build Status Coverage Status Total alerts Language grade: JavaScript Known Vulnerabilities PRs Welcome

Description

With DinamiCSS you can manage CSS style sheets dynamically

Installation

DinamiCSS is available as an npm package.

// 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

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.