rrweb-cssom 0.8.0: CSSStyleSheet

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.CSSStyleSheet 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.CSSStyleSheet
Constraints:
  - executionContext: node
Required runtime conditions:
  - ecosystem: npm
  - language: javascript
  - moduleSystem: cjs
  - packageManager: npm@10.9.8
  - runtime: node@22.23.2

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:baf85275bc5c2f0de6674ad434ca4f940be1ffa6963af6ea2ca22c7265b310b2","constraints":{"executionContext":"node"},"contract":["new CSSStyleSheet() initializes an empty stylesheet with empty cssRules and null parentStyleSheet","insertRule parses and inserts CSSStyleRule into cssRules and sets parentStyleSheet reference","insertRule supports inserting CSSMediaRule at specific index maintaining rule order","insertRule throws RangeError INDEX_SIZE_ERR when insert index is out of bounds or negative","deleteRule removes rule at index and updates cssRules list","deleteRule throws RangeError INDEX_SIZE_ERR when target index is out of bounds or negative","toString serializes all rules in cssRules to newline-delimited CSS text"],"goal":"verify rrweb-cssom.CSSStyleSheet in pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSStyleSheet"]},"contractCommand":["node","test/contract.js"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"cjs","os":"linux","osVersionBucket":"24","packageManager":"npm","packageManagerVersion":"10.9.8","runtime":"node","runtimeVersion":"22.23.2","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.CSSStyleSheet"],"verifierAdapter":"node-typescript@1"}

{
  "name": "verify-rrweb-cssom-cssstylesheet",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "verify-rrweb-cssom-cssstylesheet",
      "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": "verify-rrweb-cssom-cssstylesheet",
  "version": "1.0.0",
  "private": true,
  "description": "Clean-room verification sample for rrweb-cssom.CSSStyleSheet",
  "main": "src/index.js",
  "scripts": {
    "test": "node test/contract.js"
  },
  "dependencies": {
    "rrweb-cssom": "0.8.0"
  },
  "license": "MIT-0"
}

{
  "schemaVersion": 1,
  "goal": "verify rrweb-cssom.CSSStyleSheet in pkg:npm/rrweb-cssom@0.8.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/rrweb-cssom@0.8.0"
  ],
  "symbols": [
    "rrweb-cssom.CSSStyleSheet"
  ],
  "constraints": {
    "executionContext": "node"
  },
  "runtimeConditions": {
    "ecosystem": "npm",
    "language": "javascript",
    "moduleSystem": "cjs",
    "packageManager": "npm@10.9.8",
    "runtime": "node@22.23.2"
  }
}

'use strict';

const { CSSStyleSheet, CSSStyleRule, CSSMediaRule } = require('rrweb-cssom');

/**
 * Creates an empty CSSStyleSheet instance.
 * @returns {CSSStyleSheet}
 */
function createStyleSheet() {
  return new CSSStyleSheet();
}

/**
 * Adds a CSS rule to a stylesheet at the specified index.
 * @param {CSSStyleSheet} sheet
 * @param {string} ruleText
 * @param {number} [index=0]
 * @returns {number}
 */
function addRule(sheet, ruleText, index = 0) {
  return sheet.insertRule(ruleText, index);
}

/**
 * Removes a CSS rule from a stylesheet at the specified index.
 * @param {CSSStyleSheet} sheet
 * @param {number} index
 */
function removeRule(sheet, index) {
  sheet.deleteRule(index);
}

/**
 * Serializes a CSSStyleSheet to CSS text.
 * @param {CSSStyleSheet} sheet
 * @returns {string}
 */
function serializeStyleSheet(sheet) {
  return sheet.toString();
}

module.exports = {
  createStyleSheet,
  addRule,
  removeRule,
  serializeStyleSheet,
  CSSStyleSheet,
  CSSStyleRule,
  CSSMediaRule,
};

'use strict';

const assert = require('node:assert');
const { CSSStyleSheet, CSSStyleRule, CSSMediaRule } = require('rrweb-cssom');
const {
  createStyleSheet,
  addRule,
  removeRule,
  serializeStyleSheet,
} = require('../src/index.js');

function testCreateEmptyStyleSheet() {
  const sheet = createStyleSheet();
  assert(sheet instanceof CSSStyleSheet, 'Instance should be CSSStyleSheet');
  assert(Array.isArray(sheet.cssRules), 'cssRules should be an array');
  assert.strictEqual(sheet.cssRules.length, 0, 'Initial cssRules should be empty');
  assert.strictEqual(sheet.parentStyleSheet, null, 'Initial parentStyleSheet should be null');
}

function testInsertRuleStyleRule() {
  const sheet = createStyleSheet();
  const index = addRule(sheet, '.card { padding: 16px; margin: 8px; }', 0);
  assert.strictEqual(index, 0, 'Insert index should be 0');
  assert.strictEqual(sheet.cssRules.length, 1, 'cssRules should contain 1 rule');

  const rule = sheet.cssRules[0];
  assert(rule instanceof CSSStyleRule, 'Rule should be CSSStyleRule');
  assert.strictEqual(rule.selectorText, '.card', 'Selector should match');
  assert.strictEqual(rule.style.getPropertyValue('padding'), '16px');
  assert.strictEqual(rule.style.getPropertyValue('margin'), '8px');
  assert.strictEqual(rule.parentStyleSheet, sheet, 'parentStyleSheet should reference stylesheet');
}

function testInsertRuleMediaRuleAndOrdering() {
  const sheet = createStyleSheet();
  sheet.insertRule('body { background: #fff; }', 0);
  sheet.insertRule('h1 { font-size: 2rem; }', 1);
  sheet.insertRule('@media (min-width: 1024px) { body { background: #eee; } }', 1);

  assert.strictEqual(sheet.cssRules.length, 3, 'Should have 3 rules after inserts');
  assert.strictEqual(sheet.cssRules[0].selectorText, 'body');
  assert(sheet.cssRules[1] instanceof CSSMediaRule, 'Second rule should be CSSMediaRule');
  assert.strictEqual(sheet.cssRules[1].media.mediaText, '(min-width: 1024px)');
  assert.strictEqual(sheet.cssRules[1].cssRules.length, 1);
  assert.strictEqual(sheet.cssRules[1].parentStyleSheet, sheet);
  assert.strictEqual(sheet.cssRules[2].selectorText, 'h1');
}

function testInsertRuleOutOfBounds() {
  const sheet = createStyleSheet();
  assert.throws(
    () => {
      sheet.insertRule('p { color: black; }', 5);
    },
    (err) => {
      return err instanceof RangeError && err.message === 'INDEX_SIZE_ERR';
    },
    'Should throw RangeError INDEX_SIZE_ERR for out-of-bounds insert index'
  );

  assert.throws(
    () => {
      sheet.insertRule('p { color: black; }', -1);
    },
    (err) => {
      return err instanceof RangeError && err.message === 'INDEX_SIZE_ERR';
    },
    'Should throw RangeError INDEX_SIZE_ERR for negative insert index'
  );
}

function testDeleteRule() {
  const sheet = createStyleSheet();
  sheet.insertRule('.item-1 { display: flex; }', 0);
  sheet.insertRule('.item-2 { display: block; }', 1);
  sheet.insertRule('.item-3 { display: none; }', 2);

  assert.strictEqual(sheet.cssRules.length, 3);
  removeRule(sheet, 1);

  assert.strictEqual(sheet.cssRules.length, 2, 'Should have 2 rules after deletion');
  assert.strictEqual(sheet.cssRules[0].selectorText, '.item-1');
  assert.strictEqual(sheet.cssRules[1].selectorText, '.item-3');
}

function testDeleteRuleOutOfBounds() {
  const sheet = createStyleSheet();
  assert.strictEqual(sheet.cssRules.length, 0);

  assert.throws(
    () => {
      removeRule(sheet, 0);
    },
    (err) => {
      return err instanceof RangeError && err.message === 'INDEX_SIZE_ERR';
    },
    'Should throw RangeError INDEX_SIZE_ERR when deleting from empty sheet'
  );

  sheet.insertRule('span { color: green; }', 0);
  assert.throws(
    () => {
      removeRule(sheet, 1);
    },
    (err) => {
      return err instanceof RangeError && err.message === 'INDEX_SIZE_ERR';
    },
    'Should throw RangeError INDEX_SIZE_ERR when deleting non-existent index'
  );

  assert.throws(
    () => {
      removeRule(sheet, -1);
    },
    (err) => {
      return err instanceof RangeError && err.message === 'INDEX_SIZE_ERR';
    },
    'Should throw RangeError INDEX_SIZE_ERR when deleting negative index'
  );
}

function testToStringSerialization() {
  const emptySheet = createStyleSheet();
  assert.strictEqual(serializeStyleSheet(emptySheet), '', 'Empty sheet toString should be empty string');

  const sheet = createStyleSheet();
  sheet.insertRule('nav { background-color: #333333; }', 0);
  sheet.insertRule('nav a { color: #ffffff; }', 1);

  const serialized = serializeStyleSheet(sheet);
  assert.strictEqual(typeof serialized, 'string');
  const expected = 'nav {background-color: #333333;}\nnav a {color: #ffffff;}\n';
  assert.strictEqual(serialized, expected, 'Serialized CSS should match inserted rules');
}

function runAll() {
  testCreateEmptyStyleSheet();
  testInsertRuleStyleRule();
  testInsertRuleMediaRuleAndOrdering();
  testInsertRuleOutOfBounds();
  testDeleteRule();
  testDeleteRuleOutOfBounds();
  testToStringSerialization();
  console.log('Contract tests passed successfully.');
}

runAll();