rrweb-cssom 0.7.1: CSSRule

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

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:b57b91de063e668b756a01db51eaa0087083b9d64617575b86157f5e9ce9501f","contract":["CSSRule exposes standard rule type constants including STYLE_RULE, MEDIA_RULE, and IMPORT_RULE","CSSRule instantiates with default null parentRule and parentStyleSheet references","Parsed stylesheet rules inherit from CSSRule and expose matching type constants","Nested rules maintain parentRule linkage pointing to their enclosing grouping rule","Top-level stylesheet rules maintain parentStyleSheet linkage pointing to owner stylesheet"],"goal":"verify rrweb-cssom.CSSRule in pkg:npm/rrweb-cssom@0.7.1","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.7.1"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSRule"]},"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.7.1"],"schemaVersion":1,"subject":"pkg:npm/rrweb-cssom@0.7.1","symbols":["rrweb-cssom.CSSRule"],"verifierAdapter":"node-typescript@1"}

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

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

import {
  CSSRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSImportRule,
  CSSGroupingRule,
  parse,
} from 'rrweb-cssom';

/**
 * Creates a base CSSRule instance.
 * @returns {CSSRule}
 */
export function createRule() {
  return new CSSRule();
}

/**
 * Resolves the string name of a CSSRule type constant.
 * @param {number} type
 * @returns {string}
 */
export function getRuleTypeName(type) {
  switch (type) {
    case CSSRule.UNKNOWN_RULE:
      return 'UNKNOWN_RULE';
    case CSSRule.STYLE_RULE:
      return 'STYLE_RULE';
    case CSSRule.CHARSET_RULE:
      return 'CHARSET_RULE';
    case CSSRule.IMPORT_RULE:
      return 'IMPORT_RULE';
    case CSSRule.MEDIA_RULE:
      return 'MEDIA_RULE';
    case CSSRule.FONT_FACE_RULE:
      return 'FONT_FACE_RULE';
    case CSSRule.PAGE_RULE:
      return 'PAGE_RULE';
    case CSSRule.KEYFRAMES_RULE:
      return 'KEYFRAMES_RULE';
    case CSSRule.KEYFRAME_RULE:
      return 'KEYFRAME_RULE';
    case CSSRule.MARGIN_RULE:
      return 'MARGIN_RULE';
    case CSSRule.NAMESPACE_RULE:
      return 'NAMESPACE_RULE';
    case CSSRule.COUNTER_STYLE_RULE:
      return 'COUNTER_STYLE_RULE';
    case CSSRule.SUPPORTS_RULE:
      return 'SUPPORTS_RULE';
    case CSSRule.DOCUMENT_RULE:
      return 'DOCUMENT_RULE';
    case CSSRule.FONT_FEATURE_VALUES_RULE:
      return 'FONT_FEATURE_VALUES_RULE';
    case CSSRule.VIEWPORT_RULE:
      return 'VIEWPORT_RULE';
    case CSSRule.REGION_STYLE_RULE:
      return 'REGION_STYLE_RULE';
    case CSSRule.CONTAINER_RULE:
      return 'CONTAINER_RULE';
    case CSSRule.STARTING_STYLE_RULE:
      return 'STARTING_STYLE_RULE';
    default:
      return 'CUSTOM_RULE';
  }
}

/**
 * Checks whether an object is an instance of CSSRule.
 * @param {unknown} value
 * @returns {boolean}
 */
export function isCSSRule(value) {
  return value instanceof CSSRule;
}

/**
 * Returns parent hierarchy information for a rule.
 * @param {CSSRule} rule
 * @returns {{ parentRule: CSSRule | null, parentStyleSheet: unknown }}
 */
export function getRuleHierarchy(rule) {
  return {
    parentRule: rule.parentRule,
    parentStyleSheet: rule.parentStyleSheet,
  };
}

/**
 * Recursively collects rules matching the given rule type from a stylesheet or grouping rule.
 * @param {{ cssRules: CSSRule[] }} container
 * @param {number} type
 * @returns {CSSRule[]}
 */
export function findRulesByType(container, type) {
  const result = [];
  if (!container || !Array.isArray(container.cssRules)) {
    return result;
  }
  for (const rule of container.cssRules) {
    if (rule.type === type) {
      result.push(rule);
    }
    if (rule.cssRules && Array.isArray(rule.cssRules)) {
      result.push(...findRulesByType(rule, type));
    }
  }
  return result;
}

export {
  CSSRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSImportRule,
  CSSGroupingRule,
  parse,
};

import assert from 'node:assert';
import {
  CSSRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSImportRule,
  parse,
  createRule,
  getRuleTypeName,
  isCSSRule,
  getRuleHierarchy,
  findRulesByType,
} from '../src/index.js';

function testStandardTypeConstants() {
  assert.strictEqual(CSSRule.UNKNOWN_RULE, 0, 'UNKNOWN_RULE constant must be 0');
  assert.strictEqual(CSSRule.STYLE_RULE, 1, 'STYLE_RULE constant must be 1');
  assert.strictEqual(CSSRule.CHARSET_RULE, 2, 'CHARSET_RULE constant must be 2');
  assert.strictEqual(CSSRule.IMPORT_RULE, 3, 'IMPORT_RULE constant must be 3');
  assert.strictEqual(CSSRule.MEDIA_RULE, 4, 'MEDIA_RULE constant must be 4');
  assert.strictEqual(CSSRule.FONT_FACE_RULE, 5, 'FONT_FACE_RULE constant must be 5');
  assert.strictEqual(CSSRule.PAGE_RULE, 6, 'PAGE_RULE constant must be 6');
  assert.strictEqual(CSSRule.KEYFRAMES_RULE, 7, 'KEYFRAMES_RULE constant must be 7');
  assert.strictEqual(CSSRule.KEYFRAME_RULE, 8, 'KEYFRAME_RULE constant must be 8');
  assert.strictEqual(CSSRule.MARGIN_RULE, 9, 'MARGIN_RULE constant must be 9');
  assert.strictEqual(CSSRule.NAMESPACE_RULE, 10, 'NAMESPACE_RULE constant must be 10');
  assert.strictEqual(CSSRule.COUNTER_STYLE_RULE, 11, 'COUNTER_STYLE_RULE constant must be 11');
  assert.strictEqual(CSSRule.SUPPORTS_RULE, 12, 'SUPPORTS_RULE constant must be 12');
  assert.strictEqual(CSSRule.DOCUMENT_RULE, 13, 'DOCUMENT_RULE constant must be 13');
  assert.strictEqual(CSSRule.FONT_FEATURE_VALUES_RULE, 14, 'FONT_FEATURE_VALUES_RULE constant must be 14');
  assert.strictEqual(CSSRule.VIEWPORT_RULE, 15, 'VIEWPORT_RULE constant must be 15');
  assert.strictEqual(CSSRule.REGION_STYLE_RULE, 16, 'REGION_STYLE_RULE constant must be 16');
  assert.strictEqual(CSSRule.CONTAINER_RULE, 17, 'CONTAINER_RULE constant must be 17');
  assert.strictEqual(CSSRule.STARTING_STYLE_RULE, 1002, 'STARTING_STYLE_RULE constant must be 1002');

  assert.strictEqual(getRuleTypeName(CSSRule.STYLE_RULE), 'STYLE_RULE');
  assert.strictEqual(getRuleTypeName(CSSRule.MEDIA_RULE), 'MEDIA_RULE');
  assert.strictEqual(getRuleTypeName(CSSRule.IMPORT_RULE), 'IMPORT_RULE');
}

function testInstantiationAndDefaults() {
  const rule = createRule();
  assert(rule instanceof CSSRule, 'Must be instance of CSSRule');
  assert.strictEqual(isCSSRule(rule), true, 'isCSSRule helper must return true');
  assert.strictEqual(rule.parentRule, null, 'Default parentRule must be null');
  assert.strictEqual(rule.parentStyleSheet, null, 'Default parentStyleSheet must be null');

  const hierarchy = getRuleHierarchy(rule);
  assert.strictEqual(hierarchy.parentRule, null);
  assert.strictEqual(hierarchy.parentStyleSheet, null);
}

function testParsedRulesInheritAndTypeConstants() {
  const css = `
    @import url("theme.css");
    @media (min-width: 768px) {
      .container { max-width: 720px; }
    }
    h1 { color: #111; font-size: 2rem; }
  `;
  const sheet = parse(css);
  assert(sheet && Array.isArray(sheet.cssRules), 'Stylesheet must contain cssRules array');
  assert.strictEqual(sheet.cssRules.length, 3, 'Expected 3 top-level rules');

  const [importRule, mediaRule, styleRule] = sheet.cssRules;

  // Import rule
  assert(isCSSRule(importRule), 'importRule must inherit from CSSRule');
  assert(importRule instanceof CSSImportRule, 'importRule must be CSSImportRule');
  assert.strictEqual(importRule.type, CSSRule.IMPORT_RULE, 'importRule type must match CSSRule.IMPORT_RULE');

  // Media rule
  assert(isCSSRule(mediaRule), 'mediaRule must inherit from CSSRule');
  assert(mediaRule instanceof CSSMediaRule, 'mediaRule must be CSSMediaRule');
  assert.strictEqual(mediaRule.type, CSSRule.MEDIA_RULE, 'mediaRule type must match CSSRule.MEDIA_RULE');

  // Style rule
  assert(isCSSRule(styleRule), 'styleRule must inherit from CSSRule');
  assert(styleRule instanceof CSSStyleRule, 'styleRule must be CSSStyleRule');
  assert.strictEqual(styleRule.type, CSSRule.STYLE_RULE, 'styleRule type must match CSSRule.STYLE_RULE');

  // Test findRulesByType helper
  const foundStyleRules = findRulesByType(sheet, CSSRule.STYLE_RULE);
  assert.strictEqual(foundStyleRules.length, 2, 'Should find 2 style rules (1 top-level, 1 inside media)');
  for (const r of foundStyleRules) {
    assert(isCSSRule(r), 'Each found rule must be a CSSRule');
    assert.strictEqual(r.type, CSSRule.STYLE_RULE);
  }
}

function testNestedRulesLinkage() {
  const css = `
    @media screen and (max-width: 600px) {
      .mobile-view { display: block; }
      .desktop-view { display: none; }
    }
  `;
  const sheet = parse(css);
  const mediaRule = sheet.cssRules[0];
  assert(mediaRule instanceof CSSMediaRule);
  assert.strictEqual(mediaRule.cssRules.length, 2);

  for (const childRule of mediaRule.cssRules) {
    assert(isCSSRule(childRule), 'Child rule must inherit from CSSRule');
    assert.strictEqual(childRule.parentRule, mediaRule, 'Child rule parentRule must link to enclosing media rule');
    assert.strictEqual(childRule.parentStyleSheet, sheet, 'Child rule parentStyleSheet must link to owner stylesheet');
  }
}

function testTopLevelParentStyleSheetLinkage() {
  const css = 'body { margin: 0; padding: 0; } p { line-height: 1.5; }';
  const sheet = parse(css);
  assert.strictEqual(sheet.cssRules.length, 2);

  for (const rule of sheet.cssRules) {
    assert(isCSSRule(rule));
    assert.strictEqual(rule.parentRule, null, 'Top-level rule must have parentRule === null');
    assert.strictEqual(rule.parentStyleSheet, sheet, 'Top-level rule parentStyleSheet must point to owner stylesheet');
  }
}

function runContract() {
  testStandardTypeConstants();
  testInstantiationAndDefaults();
  testParsedRulesInheritAndTypeConstants();
  testNestedRulesLinkage();
  testTopLevelParentStyleSheetLinkage();
  console.log('Contract verification passed successfully.');
}

runContract();