rrweb-cssom 0.8.0: 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.8.0
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/rrweb-cssom@0.8.0
Demonstrate these symbols/APIs:
  - rrweb-cssom.CSSRule
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:ea71ae8b845ee527323d651a9ff7d08824b97d4cf499d9ffdb6fcabe9946db7f","constraints":{"executionContext":"node"},"contract":["CSSRule exposes standard rule type constants including STYLE_RULE, MEDIA_RULE, IMPORT_RULE, and LAYER_BLOCK_RULE","CSSRule instantiates with default null parentRule and parentStyleSheet references","Parsed stylesheet rules inherit from CSSRule and expose matching type constants","Nested rules in media and layer blocks maintain parentRule linkage pointing to 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.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSRule"]},"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.8.0"],"schemaVersion":1,"subject":"pkg:npm/rrweb-cssom@0.8.0","symbols":["rrweb-cssom.CSSRule"],"verifierAdapter":"node-typescript@1"}

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

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

/**
 * Resolves the string name of a CSSRule type constant.
 * @param {number} type
 * @returns {string}
 */
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.LAYER_BLOCK_RULE:
      return 'LAYER_BLOCK_RULE';
    case CSSRule.STARTING_STYLE_RULE:
      return 'STARTING_STYLE_RULE';
    default:
      return 'CUSTOM_RULE';
  }
}

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

/**
 * Returns parent hierarchy information for a rule.
 * @param {CSSRule} rule
 * @returns {{ parentRule: CSSRule | null, parentStyleSheet: unknown }}
 */
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[]}
 */
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;
}

module.exports = {
  createRule,
  getRuleTypeName,
  isCSSRule,
  getRuleHierarchy,
  findRulesByType,
  CSSRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSImportRule,
  CSSGroupingRule,
  CSSLayerBlockRule,
  parse,
};

{
  "name": "sample-rrweb-cssom-cssrule",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom-cssrule",
      "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-cssrule",
  "version": "1.0.0",
  "description": "Clean-room verification sample for rrweb-cssom CSSRule",
  "main": "index.js",
  "license": "MIT-0",
  "dependencies": {
    "rrweb-cssom": "0.8.0"
  }
}

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

import assert from 'node:assert';
import {
  CSSRule,
  CSSStyleRule,
  CSSMediaRule,
  CSSImportRule,
  CSSLayerBlockRule,
  parse,
} from 'rrweb-cssom';
import {
  createRule,
  getRuleTypeName,
  isCSSRule,
  getRuleHierarchy,
  findRulesByType,
} from '../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.LAYER_BLOCK_RULE, 18, 'LAYER_BLOCK_RULE constant must be 18');
  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');
  assert.strictEqual(getRuleTypeName(CSSRule.LAYER_BLOCK_RULE), 'LAYER_BLOCK_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; }
    }
    @layer utilities {
      .p-4 { padding: 1rem; }
    }
    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, 4, 'Expected 4 top-level rules');

  const [importRule, mediaRule, layerRule, 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');

  // Layer rule
  assert(isCSSRule(layerRule), 'layerRule must inherit from CSSRule');
  assert(layerRule instanceof CSSLayerBlockRule, 'layerRule must be CSSLayerBlockRule');
  assert.strictEqual(layerRule.type, CSSRule.LAYER_BLOCK_RULE, 'layerRule type must match CSSRule.LAYER_BLOCK_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, 3, 'Should find 3 style rules (1 top-level, 1 in media, 1 in layer)');
  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; }
    }
    @layer components {
      .card { border-radius: 4px; }
    }
  `;
  const sheet = parse(css);
  const [mediaRule, layerRule] = sheet.cssRules;

  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');
  }

  assert(layerRule instanceof CSSLayerBlockRule);
  assert.strictEqual(layerRule.cssRules.length, 1);
  for (const childRule of layerRule.cssRules) {
    assert(isCSSRule(childRule), 'Child rule must inherit from CSSRule');
    assert.strictEqual(childRule.parentRule, layerRule, 'Child rule parentRule must link to enclosing layer 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();