rrweb-cssom 0.8.0: CSSStyleRule

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.CSSStyleRule 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.CSSStyleRule

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:54b4499d5e0671d1cd194f94341c647b74f541c46dc7f6cef7f1069594641154","contract":["CSSStyleRule instantiates with STYLE_RULE type (1) and null parent linkage","CSSStyleRule.parse parses CSS style rule text into selectorText and CSSStyleDeclaration properties and priorities","CSSStyleRule supports modifying selectorText and setting or removing style properties","CSSStyleRule.cssText dynamically parses CSS rule strings and serializes declarations back to CSS text","CSSStyleRule maintains parentStyleSheet linkage when attached to a CSSStyleSheet"],"goal":"verify rrweb-cssom.CSSStyleRule in pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSStyleRule"]},"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.CSSStyleRule"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-rrweb-cssom-style-rule",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom-style-rule",
      "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-style-rule",
  "version": "1.0.0",
  "private": true,
  "description": "Clean-room verification sample for rrweb-cssom CSSStyleRule",
  "type": "module",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "rrweb-cssom": "0.8.0"
  },
  "license": "MIT-0"
}

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

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

/**
 * Creates a CSSStyleRule instance with given selector and styles.
 * @param {string} selector
 * @param {Record<string, string | { value: string, priority?: string }>} [declarations]
 * @returns {CSSStyleRule}
 */
export function createStyleRule(selector, declarations = {}) {
  const rule = new CSSStyleRule();
  if (selector) {
    rule.selectorText = selector;
  }
  for (const [prop, val] of Object.entries(declarations)) {
    if (typeof val === 'object' && val !== null) {
      rule.style.setProperty(prop, val.value, val.priority || '');
    } else {
      rule.style.setProperty(prop, String(val));
    }
  }
  return rule;
}

/**
 * Parses a single CSS style rule text into a CSSStyleRule.
 * @param {string} ruleText
 * @returns {CSSStyleRule}
 */
export function parseStyleRule(ruleText) {
  return CSSStyleRule.parse(ruleText);
}

/**
 * Updates an existing CSSStyleRule with new selector and styles.
 * @param {CSSStyleRule} rule
 * @param {string} selector
 * @param {Record<string, string>} [styles]
 * @returns {CSSStyleRule}
 */
export function updateStyleRule(rule, selector, styles) {
  if (selector !== undefined) {
    rule.selectorText = selector;
  }
  if (styles) {
    for (const [prop, value] of Object.entries(styles)) {
      if (value === null || value === undefined) {
        rule.style.removeProperty(prop);
      } else {
        rule.style.setProperty(prop, value);
      }
    }
  }
  return rule;
}

/**
 * Serializes a CSSStyleRule to string.
 * @param {CSSStyleRule} rule
 * @returns {string}
 */
export function formatStyleRule(rule) {
  return rule.cssText;
}

export {
  CSSStyleRule,
  CSSStyleDeclaration,
  CSSRule,
  CSSStyleSheet,
  parse,
};

import assert from 'node:assert';
import { CSSStyleRule, CSSRule, parse, CSSStyleSheet } from 'rrweb-cssom';
import {
  createStyleRule,
  parseStyleRule,
  updateStyleRule,
  formatStyleRule,
} from '../src/index.js';

function testInstantiationAndDefaults() {
  const rule = new CSSStyleRule();
  assert.strictEqual(rule.type, 1, 'CSSStyleRule type must be 1 (STYLE_RULE)');
  assert.strictEqual(CSSRule.STYLE_RULE, 1, 'CSSRule.STYLE_RULE constant must be 1');
  assert.strictEqual(rule.parentRule, null, 'Initial parentRule must be null');
  assert.strictEqual(rule.parentStyleSheet, null, 'Initial parentStyleSheet must be null');
  assert.strictEqual(rule.selectorText, '', 'Default selectorText should be empty');
  assert.strictEqual(rule.style.length, 0, 'Default style declaration length should be 0');
}

function testParseStaticMethod() {
  const css = '.card-header > h2.title { font-size: 1.5rem; color: #333333; margin-bottom: 8px !important; }';
  const rule = parseStyleRule(css);

  assert(rule instanceof CSSStyleRule, 'Parsed result must be an instance of CSSStyleRule');
  assert.strictEqual(rule.selectorText, '.card-header > h2.title');
  assert.strictEqual(rule.style.getPropertyValue('font-size'), '1.5rem');
  assert.strictEqual(rule.style.getPropertyValue('color'), '#333333');
  assert.strictEqual(rule.style.getPropertyValue('margin-bottom'), '8px');
  assert.strictEqual(rule.style.getPropertyPriority('margin-bottom'), 'important');
  assert.strictEqual(rule.style.getPropertyPriority('font-size'), '');
  assert.strictEqual(rule.style.length, 3);
  assert.strictEqual(rule.style.parentRule, rule, 'style.parentRule should reference the parent CSSStyleRule');
}

function testPropertyModificationsAndSelector() {
  const rule = createStyleRule('.btn', {
    display: 'inline-block',
    padding: '6px 12px',
    'background-color': { value: '#007bff', priority: 'important' },
  });

  assert.strictEqual(rule.selectorText, '.btn');
  assert.strictEqual(rule.style.getPropertyValue('display'), 'inline-block');
  assert.strictEqual(rule.style.getPropertyValue('padding'), '6px 12px');
  assert.strictEqual(rule.style.getPropertyValue('background-color'), '#007bff');
  assert.strictEqual(rule.style.getPropertyPriority('background-color'), 'important');

  updateStyleRule(rule, '.btn-primary', {
    'background-color': '#0056b3',
    padding: null,
    'border-radius': '4px',
  });

  assert.strictEqual(rule.selectorText, '.btn-primary');
  assert.strictEqual(rule.style.getPropertyValue('background-color'), '#0056b3');
  assert.strictEqual(rule.style.getPropertyValue('padding'), '');
  assert.strictEqual(rule.style.getPropertyValue('border-radius'), '4px');
}

function testCssTextGetterAndSetter() {
  const rule = new CSSStyleRule();
  rule.cssText = 'nav.menu li a:active { color: #ff0000; text-decoration: underline; }';

  assert.strictEqual(rule.selectorText, 'nav.menu li a:active');
  assert.strictEqual(rule.style.getPropertyValue('color'), '#ff0000');
  assert.strictEqual(rule.style.getPropertyValue('text-decoration'), 'underline');

  const serialized = formatStyleRule(rule);
  assert.strictEqual(serialized, 'nav.menu li a:active {color: #ff0000; text-decoration: underline;}');
}

function testParentStyleSheetLinkage() {
  const stylesheet = parse('header { opacity: 0.9; } main { width: 100%; }');
  assert.strictEqual(stylesheet.cssRules.length, 2);

  const firstRule = stylesheet.cssRules[0];
  assert(firstRule instanceof CSSStyleRule);
  assert.strictEqual(firstRule.selectorText, 'header');
  assert.strictEqual(firstRule.parentStyleSheet, stylesheet, 'parentStyleSheet must point to owner stylesheet');
  assert.strictEqual(firstRule.style.parentRule, firstRule);
}

function runContract() {
  testInstantiationAndDefaults();
  testParseStaticMethod();
  testPropertyModificationsAndSelector();
  testCssTextGetterAndSetter();
  testParentStyleSheetLinkage();
  console.log('Contract verification passed successfully.');
}

runContract();