CSS & Styling

/**
 * 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;
}

/**
 * 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;
}

/**
 * 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;
}

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

/**
 * 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;
}

/**
 * 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;
}

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

/**
 * 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;
}

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'

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);
}