rrweb-cssom 0.7.1: CSSGroupingRule

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.CSSGroupingRule in pkg:npm/rrweb-cssom@0.7.1
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/rrweb-cssom@0.7.1
Demonstrate these symbols/APIs:
  - rrweb-cssom.CSSGroupingRule
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:c643375c72592cf265807811a41590bbbe35ba4396d676f5f345d7987c38e04f","constraints":{"executionContext":"node"},"contract":["CSSGroupingRule initializes with empty cssRules array and inherits from CSSRule with null parent references","insertRule parses and inserts CSS rules at specified indices and links parentRule","deleteRule removes CSS rules at specified indices and unlinks parentRule","insertRule and deleteRule throw RangeError INDEX_SIZE_ERR for out-of-bounds indices","grouping rule subclasses including CSSMediaRule and CSSSupportsRule inherit from CSSGroupingRule"],"goal":"verify rrweb-cssom.CSSGroupingRule in pkg:npm/rrweb-cssom@0.7.1","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.7.1"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSGroupingRule"]},"contractCommand":["node","test/contract.mjs"],"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.7.1"],"schemaVersion":1,"subject":"pkg:npm/rrweb-cssom@0.7.1","symbols":["rrweb-cssom.CSSGroupingRule"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-rrweb-cssom-cssgroupingrule",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom-cssgroupingrule",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "rrweb-cssom": "0.7.1"
      }
    },
    "node_modules/rrweb-cssom": {
      "version": "0.7.1",
      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
      "license": "MIT"
    }
  }
}

{
  "name": "sample-rrweb-cssom-cssgroupingrule",
  "version": "1.0.0",
  "private": true,
  "description": "Clean-room verification sample for rrweb-cssom CSSGroupingRule",
  "main": "src/index.js",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "rrweb-cssom": "0.7.1"
  },
  "license": "MIT-0"
}

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

'use strict';

const {
  CSSRule,
  CSSGroupingRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSSupportsRule,
  parse,
} = require('rrweb-cssom');

function createGroupingRule() {
  return new CSSGroupingRule();
}

function insertGroupingChildRule(groupingRule, ruleText, index = 0) {
  return groupingRule.insertRule(ruleText, index);
}

function deleteGroupingChildRule(groupingRule, index = 0) {
  groupingRule.deleteRule(index);
}

function parseGroupingRules(cssText) {
  const stylesheet = parse(cssText);
  return Array.from(stylesheet.cssRules).filter(
    (rule) => rule instanceof CSSGroupingRule
  );
}

module.exports = {
  CSSRule,
  CSSGroupingRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSSupportsRule,
  parse,
  createGroupingRule,
  insertGroupingChildRule,
  deleteGroupingChildRule,
  parseGroupingRules,
};

import assert from 'node:assert/strict';
import { createRequire } from 'node:module';

const require = createRequire(import.meta.url);
const {
  CSSRule,
  CSSGroupingRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSSupportsRule,
  parseGroupingRules,
  createGroupingRule,
  insertGroupingChildRule,
  deleteGroupingChildRule,
} = require('../src/index.js');

// 1. CSSGroupingRule initializes with empty cssRules array and inherits from CSSRule with null parent references
{
  const groupingRule = createGroupingRule();
  assert(groupingRule instanceof CSSGroupingRule, 'rule must be instance of CSSGroupingRule');
  assert(groupingRule instanceof CSSRule, 'rule must be instance of CSSRule');
  assert(Array.isArray(groupingRule.cssRules), 'cssRules must be an array');
  assert.strictEqual(groupingRule.cssRules.length, 0, 'initial cssRules length must be 0');
  assert.strictEqual(groupingRule.parentRule, null, 'parentRule must be null initially');
  assert.strictEqual(groupingRule.parentStyleSheet, null, 'parentStyleSheet must be null initially');
}

// 2. insertRule parses and inserts CSS rules at specified indices and links parentRule
{
  const groupingRule = createGroupingRule();
  const idx0 = insertGroupingChildRule(groupingRule, 'header { display: flex; }', 0);
  assert.strictEqual(idx0, 0, 'first insert at index 0 must return 0');
  assert.strictEqual(groupingRule.cssRules.length, 1, 'cssRules length must be 1');
  assert(groupingRule.cssRules[0] instanceof CSSStyleRule, 'inserted rule must be CSSStyleRule');
  assert.strictEqual(groupingRule.cssRules[0].selectorText, 'header', 'selectorText must match');
  assert.strictEqual(groupingRule.cssRules[0].parentRule, groupingRule, 'parentRule must link to groupingRule');

  const idx1 = insertGroupingChildRule(groupingRule, 'footer { margin: 0; }', 1);
  assert.strictEqual(idx1, 1, 'second insert at index 1 must return 1');
  assert.strictEqual(groupingRule.cssRules.length, 2, 'cssRules length must be 2');
  assert.strictEqual(groupingRule.cssRules[1].selectorText, 'footer');

  const idxPrepend = insertGroupingChildRule(groupingRule, 'nav { width: 100%; }', 0);
  assert.strictEqual(idxPrepend, 0, 'insert at beginning must return 0');
  assert.strictEqual(groupingRule.cssRules.length, 3, 'cssRules length must be 3');
  assert.strictEqual(groupingRule.cssRules[0].selectorText, 'nav');
  assert.strictEqual(groupingRule.cssRules[1].selectorText, 'header');
  assert.strictEqual(groupingRule.cssRules[2].selectorText, 'footer');
}

// 3. deleteRule removes CSS rules at specified indices and unlinks parentRule
{
  const groupingRule = createGroupingRule();
  insertGroupingChildRule(groupingRule, 'a { color: blue; }', 0);
  insertGroupingChildRule(groupingRule, 'b { font-weight: bold; }', 1);
  insertGroupingChildRule(groupingRule, 'c { opacity: 1; }', 2);

  const removedRule = groupingRule.cssRules[1];
  deleteGroupingChildRule(groupingRule, 1);
  assert.strictEqual(groupingRule.cssRules.length, 2, 'cssRules length should decrease to 2');
  assert.strictEqual(groupingRule.cssRules[0].selectorText, 'a');
  assert.strictEqual(groupingRule.cssRules[1].selectorText, 'c');
  assert.strictEqual(removedRule.parentRule, null, 'unlinked rule parentRule must be null');

  deleteGroupingChildRule(groupingRule, 0);
  assert.strictEqual(groupingRule.cssRules.length, 1);
  assert.strictEqual(groupingRule.cssRules[0].selectorText, 'c');

  deleteGroupingChildRule(groupingRule, 0);
  assert.strictEqual(groupingRule.cssRules.length, 0);
}

// 4. insertRule and deleteRule throw RangeError INDEX_SIZE_ERR for out-of-bounds indices
{
  const groupingRule = createGroupingRule();
  assert.throws(
    () => insertGroupingChildRule(groupingRule, 'span { color: red; }', -1),
    (err) => err instanceof RangeError && err.message === 'INDEX_SIZE_ERR',
    'insertRule with negative index must throw RangeError INDEX_SIZE_ERR'
  );
  assert.throws(
    () => insertGroupingChildRule(groupingRule, 'span { color: red; }', 5),
    (err) => err instanceof RangeError && err.message === 'INDEX_SIZE_ERR',
    'insertRule with index > length must throw RangeError INDEX_SIZE_ERR'
  );
  assert.throws(
    () => deleteGroupingChildRule(groupingRule, 0),
    (err) => err instanceof RangeError && err.message === 'INDEX_SIZE_ERR',
    'deleteRule on empty list must throw RangeError INDEX_SIZE_ERR'
  );

  insertGroupingChildRule(groupingRule, 'span { color: red; }', 0);
  assert.throws(
    () => deleteGroupingChildRule(groupingRule, -1),
    (err) => err instanceof RangeError && err.message === 'INDEX_SIZE_ERR',
    'deleteRule with negative index must throw RangeError INDEX_SIZE_ERR'
  );
  assert.throws(
    () => deleteGroupingChildRule(groupingRule, 1),
    (err) => err instanceof RangeError && err.message === 'INDEX_SIZE_ERR',
    'deleteRule with index == length must throw RangeError INDEX_SIZE_ERR'
  );
}

// 5. grouping rule subclasses including CSSMediaRule and CSSSupportsRule inherit from CSSGroupingRule
{
  const mediaRule = new CSSMediaRule();
  assert(mediaRule instanceof CSSGroupingRule, 'CSSMediaRule must inherit from CSSGroupingRule');
  assert(Array.isArray(mediaRule.cssRules), 'CSSMediaRule must have cssRules array');

  const supportsRule = new CSSSupportsRule();
  assert(supportsRule instanceof CSSGroupingRule, 'CSSSupportsRule must inherit from CSSGroupingRule');
  assert(Array.isArray(supportsRule.cssRules), 'CSSSupportsRule must have cssRules array');

  const parsed = parseGroupingRules('@media screen { h1 { color: red; } }\n@supports (display: grid) { main { display: grid; } }');
  assert.strictEqual(parsed.length, 2, 'parseGroupingRules should extract 2 grouping rules');
  assert(parsed[0] instanceof CSSGroupingRule, 'first parsed rule must be CSSGroupingRule');
  assert(parsed[1] instanceof CSSGroupingRule, 'second parsed rule must be CSSGroupingRule');
  assert.strictEqual(parsed[0].cssRules.length, 1);
  assert.strictEqual(parsed[1].cssRules.length, 1);
}

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