tessl/npm-cssstyle

CSSStyleDeclaration Object Model implementation for Node.js

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

CSS Style Declaration

Name: tessl/npm-cssstyle
Author: tessl

The CSSStyleDeclaration class is the core component that implements the W3C CSS Object Model CSSStyleDeclaration interface, providing property management, CSS text serialization, and change tracking.

Capabilities

CSSStyleDeclaration Constructor

Creates a new CSSStyleDeclaration instance with optional change callback and context configuration.

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

Usage Examples:

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 Property

Gets or sets the CSS text representation of all declared properties in the style declaration.

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

Usage Examples:

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; ..."

Length Property

Returns the number of properties declared in the style declaration.

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

Usage Examples:

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

Parent Rule Property

Returns the CSS rule that contains this declaration block (readonly).

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

CSS Float Property

Special property for accessing the CSS float property, which is a JavaScript reserved word.

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

Usage Examples:

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"

Dynamic Property Access

All CSS properties are available as both camelCase and kebab-case properties with automatic getter/setter generation.

// 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

Property Categories:

Standard CSS Properties: All W3C CSS properties (color, margin, padding, etc.)
Shorthand Properties: Properties that expand to multiple longhands (margin, border, font, etc.)
Vendor Prefixed: WebKit, Mozilla, and other vendor prefixes
Custom Properties: CSS custom properties (--custom-property)
Legacy Properties: Deprecated but still supported properties

Context-Aware Behavior

The CSSStyleDeclaration behavior changes based on the provided context:

// 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