tessl/npm-happy-dom

Happy DOM is a JavaScript implementation of a web browser without its graphical user interface including DOM, HTML, CSS, events, and fetch APIs

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

CSS & Styling

Name: tessl/npm-happy-dom
Author: tessl

CSS parsing, rule management, and style computation. Includes support for all major CSS rule types and style declarations for comprehensive styling capabilities.

Capabilities

Style Declarations

CSSStyleDeclaration Class

Interface for manipulating CSS style properties.

/**
 * Interface for manipulating CSS style properties
 */
class CSSStyleDeclaration {
  /** CSS text representation */
  cssText: string;
  
  /** Number of properties */
  readonly length: number;
  
  /** Parent rule */
  readonly parentRule: CSSRule | null;
  
  /** Get property value */
  getPropertyValue(property: string): string;
  
  /** Set property value */
  setProperty(property: string, value: string, priority?: string): void;
  
  /** Remove property */
  removeProperty(property: string): string;
  
  /** Get property priority */
  getPropertyPriority(property: string): string;
  
  /** Get property by index */
  item(index: number): string;
  
  /** Array-like access */
  [index: number]: string;
}

Style Sheets

CSSStyleSheet Class

Represents a CSS style sheet.

/**
 * Represents a CSS style sheet
 */
class CSSStyleSheet {
  /** CSS rules */
  readonly cssRules: CSSRuleList;
  
  /** Owner rule */
  readonly ownerRule: CSSRule | null;
  
  /** Insert rule */
  insertRule(rule: string, index?: number): number;
  
  /** Delete rule */
  deleteRule(index: number): void;
  
  /** Replace sync */
  replace(text: string): Promise<CSSStyleSheet>;
  
  /** Replace sync */
  replaceSync(text: string): void;
}

CSS Rules

CSSRule Class

Base class for all CSS rules.

/**
 * Base class for all CSS rules
 */
class CSSRule {
  /** Rule type */
  readonly type: number;
  
  /** CSS text */
  cssText: string;
  
  /** Parent rule */
  readonly parentRule: CSSRule | null;
  
  /** Parent style sheet */
  readonly parentStyleSheet: CSSStyleSheet | null;
}

CSSStyleRule Class

Style rules with selectors and declarations.

/**
 * Style rules with selectors and declarations
 */
class CSSStyleRule extends CSSRule {
  /** Rule selector */
  selectorText: string;
  
  /** Style declarations */
  readonly style: CSSStyleDeclaration;
}

CSSMediaRule Class

Media query rules.

/**
 * Media query rules
 */
class CSSMediaRule extends CSSRule {
  /** Media list */
  readonly media: MediaList;
  
  /** CSS rules */
  readonly cssRules: CSSRuleList;
  
  /** Insert rule */
  insertRule(rule: string, index?: number): number;
  
  /** Delete rule */
  deleteRule(index: number): void;
}

CSSKeyframesRule Class

Keyframes animation rules.

/**
 * Keyframes animation rules
 */
class CSSKeyframesRule extends CSSRule {
  /** Animation name */
  name: string;
  
  /** CSS rules */
  readonly cssRules: CSSRuleList;
  
  /** Append rule */
  appendRule(rule: string): void;
  
  /** Delete rule */
  deleteRule(select: string): void;
  
  /** Find rule */
  findRule(select: string): CSSKeyframeRule | null;
}

CSSKeyframeRule Class

Individual keyframe rule.

/**
 * Individual keyframe rule
 */
class CSSKeyframeRule extends CSSRule {
  /** Keyframe key text */
  keyText: string;
  
  /** Style declarations */
  readonly style: CSSStyleDeclaration;
}

Other CSS Rules

/**
 * Font face rule
 */
class CSSFontFaceRule extends CSSRule {
  /** Style declarations */
  readonly style: CSSStyleDeclaration;
}

/**
 * Container query rule
 */
class CSSContainerRule extends CSSRule {
  /** Container name */
  readonly containerName: string;
  
  /** Container query */
  readonly containerQuery: string;
  
  /** CSS rules */
  readonly cssRules: CSSRuleList;
}

/**
 * Supports query rule
 */
class CSSSupportsRule extends CSSRule {
  /** Condition text */
  readonly conditionText: string;
  
  /** CSS rules */
  readonly cssRules: CSSRuleList;
}

Usage Examples

Style Manipulation

import { Window } from "happy-dom";

const window = new Window();
const document = window.document;

// Create element
const div = document.createElement('div');

// Set styles
div.style.setProperty('color', 'red');
div.style.setProperty('font-size', '16px', 'important');
div.style.backgroundColor = 'blue';

// Get styles
const color = div.style.getPropertyValue('color');
const priority = div.style.getPropertyPriority('font-size');

console.log('Color:', color); // 'red'
console.log('Priority:', priority); // 'important'

Style Sheet Management

import { Window } from "happy-dom";

const window = new Window();
const document = window.document;

// Create style element
const style = document.createElement('style');
style.textContent = `
  .container { display: flex; }
  .item { margin: 10px; }
`;
document.head.appendChild(style);

// Access style sheet
const sheet = style.sheet;
if (sheet) {
  // Add new rule
  sheet.insertRule('.new-class { color: green; }', 0);
  
  // Access rules
  console.log('Rules count:', sheet.cssRules.length);
  console.log('First rule:', sheet.cssRules[0].cssText);
}