CSS Style Declaration

/**
 * Creates a new CSSStyleDeclaration instance
 * @param onChangeCallback - Optional callback function called when cssText changes
 * @param opt - Optional configuration object
 * @param opt.context - Window, Element, or CSSRule context for computed styles
 */
constructor(onChangeCallback?: Function, opt?: {
  context?: Window | Element | CSSRule;
});

const { CSSStyleDeclaration } = require("cssstyle");

// Basic style declaration
const style = new CSSStyleDeclaration();

// With change callback
const style2 = new CSSStyleDeclaration((cssText) => {
  console.log("Style changed:", cssText);
});

// With context (for computed styles)
const computedStyle = new CSSStyleDeclaration(null, {
  context: window // or element, or cssRule
});

/**
 * CSS text representation of all declared properties
 * @returns Complete CSS text as a string
 */
get cssText(): string;

/**
 * Sets CSS text, parsing and applying all properties
 * @param value - CSS text to parse and apply
 */
set cssText(value: string);

const style = new CSSStyleDeclaration();

// Set CSS text
style.cssText = "color: red; font-size: 16px; margin: 10px 20px;";

// Get CSS text
console.log(style.cssText);
// Output: "color: red; font-size: 16px; margin: 10px 20px;"

// CSS text maintains shorthand properties when possible
style.setProperty("margin-top", "5px");
console.log(style.cssText);
// Shorthand may be expanded: "color: red; font-size: 16px; margin-top: 5px; margin-right: 20px; ..."

/**
 * Number of declared properties
 * @returns Count of properties in the declaration
 */
get length(): number;

/**
 * Sets the length, removing properties if new length is smaller
 * @param len - New length value
 */
set length(len: number);

const style = new CSSStyleDeclaration();
console.log(style.length); // 0

style.color = "red";
style.fontSize = "16px";
console.log(style.length); // 2

// Setting length removes properties
style.length = 1;
console.log(style.length); // 1
// One property was removed

/**
 * The CSS rule that contains this declaration (readonly)
 * @returns CSSRule instance or null
 */
get parentRule(): CSSRule | null;

/**
 * Gets the CSS float property value
 * @returns Float property value
 */
get cssFloat(): string;

/**
 * Sets the CSS float property value
 * @param value - Float property value ("left", "right", "none", etc.)
 */
set cssFloat(value: string);

const style = new CSSStyleDeclaration();

// Set float using cssFloat
style.cssFloat = "left";
console.log(style.cssFloat); // "left"

// This is equivalent to:
style.setProperty("float", "left");
console.log(style.getPropertyValue("float")); // "left"

// Camel case property access
style.backgroundColor = "blue";
style.fontSize = "14px";
style.borderTopWidth = "2px";

// Kebab case property access  
style["background-color"] = "blue";
style["font-size"] = "14px";
style["border-top-width"] = "2px";

// WebKit prefixed properties support both formats
style.webkitTransform = "rotate(45deg)";
style.WebkitTransform = "rotate(45deg)"; // Pascal case also supported

// Window context (computed styles)
const computedStyle = new CSSStyleDeclaration(null, { context: window });
// - cssText returns empty string
// - Properties are readonly
// - Attempts to modify throw DOMException

// Element context (inline styles)
const inlineStyle = new CSSStyleDeclaration(null, { context: element });
// - Associated with element's style attribute
// - Changes reflect on the element

// CSSRule context (rule styles)
const ruleStyle = new CSSStyleDeclaration(null, { context: cssRule });
// - Associated with CSS rule
// - Parent stylesheet context available