@briklab/lib/stylesheet

Create and manage inline styles in JavaScript/TypeScript with protection levels for DOM manipulation.

CSS-in-JS

The InlineStyle and StyleSheet classes provide a type-safe way to manipulate styles programmatically.

API

• Classes: InlineStyle, StyleSheet

Quick Start

import { InlineStyle, StyleSheet } from "@briklab/lib/stylesheet";

const style = new InlineStyle({ color: "red", fontSize: "16px" }, "boundary");
style
  .addStyleWithObject({ backgroundColor: "blue" })
  .removeStyle("fontSize")
  .applyTo(document.getElementById("myElement"));

const sheet = new StyleSheet();
sheet.set(".title", new InlineStyle({ fontWeight: "bold" }));
console.log(sheet.generate());

Features

• InlineStyle: Build and apply inline styles with chainable methods
• StyleSheet: Create and manage CSS rules programmatically
• Protection Levels: Control style manipulation strictness
• Chainable API: Fluent interface for style modifications

Diagram

100%Ctrl + wheel to zoom

Live Demo

Recommended to test it in your browser. The test here might not work properly

import { InlineStyle } from "@briklab/lib/stylesheet";
const style = new InlineStyle({ color: "purple", fontWeight: "bold" }, "boundary");
style.applyTo(document.getElementById("style-intro"));

import { InlineStyle } from "@briklab/lib/stylesheet"; const style = new InlineStyle({ color: "purple", fontWeight: "bold" }, "boundary"); style.applyTo(document.getElementById("style-intro"));

Console

No logs yet.