rrweb-cssom 0.8.0: CSSStyleDeclaration

Clean-room public code sample — generation instructions

Write a brand-new, minimal, self-contained code sample in this clean-room directory.
Do not copy, paraphrase, or reference any existing project source. Work only from this spec.

A csx.json manifest scaffold already exists. Do not recreate it from memory. Preserve its case.goal, packages and symbols; fill its empty case.contract with exact assertions and correct its environment, commands and verifierAdapter for the files you generate.

Goal: verify rrweb-cssom.CSSStyleDeclaration in pkg:npm/rrweb-cssom@0.8.0
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/rrweb-cssom@0.8.0
Demonstrate these symbols/APIs:
  - rrweb-cssom.CSSStyleDeclaration

Rules:
  - One focused purpose; the smallest project that proves the goal.
  - Include a contract test (test/contract.*) that runs OFFLINE and exits 0 exactly when the goal behavior works.
  - Pin every dependency with a lockfile so resolution is reproducible.
  - No secrets, credentials, or tokens. No real URLs (only example.com or localhost). No absolute paths.
  - No personal names, emails, company names, or project identifiers of any kind.
  - No binaries and no generated output (node_modules, dist, target, venv, .git, .env).
  - Keep it under 200 files and 256KB packed.

{"case":{"caseId":"case:sha256:f56da664707edd91e0f61f52be148dc5c730dd5cc3c03e866014ed387dc680db","contract":["CSSStyleDeclaration parses cssText declarations into indexed properties, values, and priority","CSSStyleDeclaration.getPropertyValue retrieves property values and returns empty string for missing properties","CSSStyleDeclaration.getPropertyPriority returns important for important declarations and empty string otherwise","CSSStyleDeclaration.setProperty adds or updates CSS properties with optional priority","CSSStyleDeclaration.removeProperty removes existing property, returns old value, and updates declaration length","CSSStyleDeclaration.cssText getter serializes declaration list to CSS format","CSSStyleDeclaration is attached as style property on parsed CSSStyleRule instances","Helper functions createStyleDeclaration and inspectStyleDeclaration provide convenient declaration creation and inspection"],"goal":"verify rrweb-cssom.CSSStyleDeclaration in pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSStyleDeclaration"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","libc":"glibc","libcVersion":"2.39","os":"linux","osVersionBucket":"24","packageManager":"npm","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"subject":"pkg:npm/rrweb-cssom@0.8.0","symbols":["rrweb-cssom.CSSStyleDeclaration"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-rrweb-cssom",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "rrweb-cssom": "0.8.0"
      }
    },
    "node_modules/rrweb-cssom": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
      "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
      "license": "MIT"
    }
  }
}

{
  "name": "sample-rrweb-cssom",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "license": "MIT-0",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "rrweb-cssom": "0.8.0"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify rrweb-cssom.CSSStyleDeclaration in pkg:npm/rrweb-cssom@0.8.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/rrweb-cssom@0.8.0"
  ],
  "symbols": [
    "rrweb-cssom.CSSStyleDeclaration"
  ]
}

import { CSSStyleDeclaration, parse } from 'rrweb-cssom';

/**
 * Creates a CSSStyleDeclaration instance optionally initialized with cssText.
 * @param {string} [cssText=''] Optional CSS declaration string.
 * @returns {CSSStyleDeclaration} Initialized style declaration instance.
 */
export function createStyleDeclaration(cssText = '') {
  const style = new CSSStyleDeclaration();
  if (cssText) {
    style.cssText = cssText;
  }
  return style;
}

/**
 * Inspects all declarations in a CSSStyleDeclaration instance.
 * @param {CSSStyleDeclaration} style
 * @returns {Record<string, { value: string, priority: string }>}
 */
export function inspectStyleDeclaration(style) {
  const result = {};
  for (let i = 0; i < style.length; i++) {
    const prop = style[i];
    result[prop] = {
      value: style.getPropertyValue(prop),
      priority: style.getPropertyPriority(prop),
    };
  }
  return result;
}

export { CSSStyleDeclaration, parse };
export default CSSStyleDeclaration;

import assert from 'node:assert/strict';
import { CSSStyleDeclaration, parse } from 'rrweb-cssom';
import { createStyleDeclaration, inspectStyleDeclaration } from '../src/index.mjs';

// CSSStyleDeclaration parses cssText declarations into indexed properties, values, and priority
{
  const style = new CSSStyleDeclaration();
  style.cssText = 'color: red; background-color: blue !important; font-size: 14px;';
  assert.equal(style.length, 3);
  assert.equal(style[0], 'color');
  assert.equal(style[1], 'background-color');
  assert.equal(style[2], 'font-size');
  assert.equal(style.getPropertyValue('color'), 'red');
  assert.equal(style.getPropertyValue('background-color'), 'blue');
  assert.equal(style.getPropertyPriority('background-color'), 'important');
  assert.equal(style.getPropertyPriority('color'), '');
}

// CSSStyleDeclaration.getPropertyValue retrieves property values and returns empty string for missing properties
{
  const style = new CSSStyleDeclaration();
  style.cssText = 'display: flex; margin-top: 10px;';
  assert.equal(style.getPropertyValue('display'), 'flex');
  assert.equal(style.getPropertyValue('margin-top'), '10px');
  assert.equal(style.getPropertyValue('non-existent-prop'), '');
}

// CSSStyleDeclaration.getPropertyPriority returns important for important declarations and empty string otherwise
{
  const style = new CSSStyleDeclaration();
  style.cssText = 'color: red !important; width: 100px;';
  assert.equal(style.getPropertyPriority('color'), 'important');
  assert.equal(style.getPropertyPriority('width'), '');
}

// CSSStyleDeclaration.setProperty adds or updates CSS properties with optional priority
{
  const style = new CSSStyleDeclaration();
  style.setProperty('margin', '10px');
  assert.equal(style.getPropertyValue('margin'), '10px');
  assert.equal(style.length, 1);
  assert.equal(style[0], 'margin');

  style.setProperty('opacity', '0.5', 'important');
  assert.equal(style.getPropertyValue('opacity'), '0.5');
  assert.equal(style.getPropertyPriority('opacity'), 'important');
  assert.equal(style.length, 2);

  style.setProperty('margin', '20px');
  assert.equal(style.getPropertyValue('margin'), '20px');
}

// CSSStyleDeclaration.removeProperty removes existing property, returns old value, and updates declaration length
{
  const style = new CSSStyleDeclaration();
  style.cssText = 'color: red; padding: 5px;';
  assert.equal(style.length, 2);

  const removed = style.removeProperty('color');
  assert.equal(removed, 'red');
  assert.equal(style.getPropertyValue('color'), '');
  assert.equal(style.length, 1);
  assert.equal(style[0], 'padding');

  const missing = style.removeProperty('non-existent');
  assert.equal(missing, '');
  assert.equal(style.length, 1);
}

// CSSStyleDeclaration.cssText getter serializes declaration list to CSS format
{
  const style = new CSSStyleDeclaration();
  style.setProperty('color', 'red');
  style.setProperty('font-weight', 'bold', 'important');
  assert.equal(style.cssText, 'color: red; font-weight: bold !important;');
}

// CSSStyleDeclaration is attached as style property on parsed CSSStyleRule instances
{
  const stylesheet = parse('.card { color: #fff; padding: 8px !important; }');
  assert.equal(stylesheet.cssRules.length, 1);
  const rule = stylesheet.cssRules[0];
  assert.equal(rule.style instanceof CSSStyleDeclaration, true);
  assert.equal(rule.style.parentRule, rule);
  assert.equal(rule.style.getPropertyValue('color'), '#fff');
  assert.equal(rule.style.getPropertyPriority('padding'), 'important');
  assert.equal(rule.style.length, 2);
}

// Helper functions createStyleDeclaration and inspectStyleDeclaration provide convenient declaration creation and inspection
{
  const emptyStyle = createStyleDeclaration();
  assert.equal(emptyStyle instanceof CSSStyleDeclaration, true);
  assert.equal(emptyStyle.length, 0);

  const initialStyle = createStyleDeclaration('border: 1px solid black; opacity: 1 !important;');
  assert.equal(initialStyle.getPropertyValue('border'), '1px solid black');
  assert.equal(initialStyle.getPropertyPriority('opacity'), 'important');

  const inspected = inspectStyleDeclaration(initialStyle);
  assert.deepEqual(inspected, {
    border: { value: '1px solid black', priority: '' },
    opacity: { value: '1', priority: 'important' },
  });
}

console.log('Contract tests passed successfully.');