Briklab Docs

StyleSheet Class Reference ​

Learn to use the StyleSheet class for managing CSS rules programmatically.

Creating Style Rules ​

Define CSS rules with set(name, style):

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

const sheet = new StyleSheet();

sheet
  .set(
    "body",
    new InlineStyle({
      fontFamily: "Arial, sans-serif",
      margin: "0",
      padding: "0"
    })
  )
  .set(
    ".container",
    new InlineStyle({
      maxWidth: "1200px",
      margin: "0 auto",
      padding: "20px"
    })
  )
  .set(
    ".button",
    new InlineStyle({
      padding: "10px 20px",
      backgroundColor: "#0066cc",
      color: "white",
      border: "none",
      borderRadius: "4px",
      cursor: "pointer"
    })
  );

console.log(sheet.generate());

Live demo of StyleSheet usage:

Console
No logs yet.

Class-Based Organization ​

Organize stylesheet rules by responsibility:

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

class StyleGuide {
  static sheet = new StyleSheet();

  static initializeButtons() {
    this.sheet
      .set(
        ".btn-primary",
        new InlineStyle({
          backgroundColor: "#0066cc",
          color: "white",
          padding: "10px 20px"
        })
      )
      .set(
        ".btn-secondary",
        new InlineStyle({
          backgroundColor: "#666666",
          color: "white",
          padding: "10px 20px"
        })
      )
      .set(
        ".btn-danger",
        new InlineStyle({
          backgroundColor: "#dc3545",
          color: "white",
          padding: "10px 20px"
        })
      );
  }

  static initializeCards() {
    this.sheet
      .set(
        ".card",
        new InlineStyle({
          border: "1px solid #e0e0e0",
          borderRadius: "8px",
          padding: "16px",
          boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
        })
      )
      .set(
        ".card-header",
        new InlineStyle({
          borderBottom: "1px solid #e0e0e0",
          paddingBottom: "12px",
          marginBottom: "12px",
          fontWeight: "bold"
        })
      )
      .set(
        ".card-body",
        new InlineStyle({
          padding: "0"
        })
      );
  }

  static initialize() {
    this.initializeButtons();
    this.initializeCards();
  }
}

StyleGuide.initialize();
console.log(StyleGuide.sheet.toString());

Pseudo-Class Styling ​

Use pseudo-class selectors as rule names:

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

class InteractiveStyles {
  static sheet = new StyleSheet();

  static initialize() {
    this.sheet
      .set(
        "a",
        new InlineStyle({
          color: "#0066cc",
          textDecoration: "none",
          transition: "color 0.2s ease"
        })
      )
      .set(
        "a:hover",
        new InlineStyle({
          color: "#0052a3",
          textDecoration: "underline"
        })
      )
      .set(
        "a:visited",
        new InlineStyle({
          color: "#551a8b"
        })
      )
      .set(
        "a:focus",
        new InlineStyle({
          outline: "2px solid #0066cc",
          outlineOffset: "2px"
        })
      );
  }
}

InteractiveStyles.initialize();
console.log(InteractiveStyles.sheet.generate());

Read, Update, and Remove Rules ​

Manage existing selectors with get and remove:

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

const sheet = new StyleSheet();

sheet
  .set(".alert", new InlineStyle({ padding: "12px", borderRadius: "4px" }))
  .set(
    ".alert-warning",
    new InlineStyle({ backgroundColor: "#fff3cd", color: "#856404" })
  );

const warningStyle = sheet.get(".alert-warning");
console.log(warningStyle?.generate());

sheet.remove(".alert-warning");
sheet.set(
  ".alert-danger",
  new InlineStyle({ backgroundColor: "#f8d7da", color: "#721c24" })
);

console.log(sheet.toString());

Dynamic Rule Updates ​

Update rules at runtime by reusing set:

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

class DynamicStyles {
  static sheet = new StyleSheet();

  static updateButtonStyle(color: string, hoverShade: string) {
    this.sheet
      .set(
        ".dynamic-btn",
        new InlineStyle({
          backgroundColor: color,
          color: "white",
          padding: "10px 20px",
          border: "none",
          borderRadius: "4px",
          cursor: "pointer"
        })
      )
      .set(
        ".dynamic-btn:hover",
        new InlineStyle({
          backgroundColor: hoverShade
        })
      );
  }

  static updateThemeColor(name: string, value: string) {
    this.sheet.set(
      ":root",
      new InlineStyle({
        [`--theme-${name}`]: value
      } as Record<string, string>)
    );
  }
}

DynamicStyles.updateButtonStyle("#007bff", "#0056b3");
DynamicStyles.updateThemeColor("primary", "#ff6b6b");
console.log(DynamicStyles.sheet.generate());

Important API Note ​

StyleSheet supports rule-level operations:

  • set(name, style)
  • get(name)
  • remove(name)
  • generate() / toString()

For viewport-specific behaviors (for example breakpoints), compose selectors/rules yourself or combine StyleSheet with runtime logic from the Responsive Styles tutorial.

Next Steps ​