rrweb-cssom 0.7.1: parse

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 parse 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:
  - parse
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:90e94a5b1a7bbe5281a41caa8a8ac23d4265449309f64595f043cd3faee5705b","constraints":{"executionContext":"node"},"contract":["rrweb-cssom package.json declares main entry point and version 0.7.1","rrweb-cssom exports parse as a function","parse returns a CSSStyleSheet instance containing parsed CSSStyleRules with selectors and style properties","parse correctly handles multiple style rules in a single CSS stylesheet","parse returns an empty CSSStyleSheet when given an empty CSS string","parse parses @media at-rules into CSSMediaRule with mediaText and nested rules","parse parses @import at-rules into CSSImportRule with href and media","parse parses @keyframes at-rules into CSSKeyframesRule with animation name and keyframe rules"],"goal":"verify parse in pkg:npm/rrweb-cssom@0.7.1","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.7.1"],"schemaVersion":1,"symbols":["parse"]},"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":["parse"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-rrweb-cssom-parse",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom-parse",
      "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-parse",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "license": "MIT-0",
  "dependencies": {
    "rrweb-cssom": "0.7.1"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify parse in pkg:npm/rrweb-cssom@0.7.1",
  "kind": "HOW",
  "packages": [
    "pkg:npm/rrweb-cssom@0.7.1"
  ],
  "symbols": [
    "parse"
  ],
  "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/strict';
import fs from 'node:fs';
import { createRequire } from 'node:module';
import {
  parse,
  CSSStyleSheet,
  CSSStyleRule,
  CSSMediaRule,
  CSSImportRule,
  CSSKeyframesRule
} from 'rrweb-cssom';

const require = createRequire(import.meta.url);

// Contract 1: rrweb-cssom package.json declares main entry point and version 0.7.1
{
  const pkgJsonPath = require.resolve('rrweb-cssom/package.json');
  assert.ok(fs.existsSync(pkgJsonPath));
  const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf8'));
  assert.strictEqual(pkgJson.name, 'rrweb-cssom');
  assert.strictEqual(pkgJson.version, '0.7.1');
  assert.ok(pkgJson.main);
}

// Contract 2: rrweb-cssom exports parse as a function
{
  assert.strictEqual(typeof parse, 'function');
}

// Contract 3: parse returns a CSSStyleSheet instance containing parsed CSSStyleRules with selectors and style properties
{
  const sheet = parse('body { color: red; font-size: 16px; }');
  assert.ok(sheet instanceof CSSStyleSheet);
  assert.strictEqual(sheet.cssRules.length, 1);
  const rule = sheet.cssRules[0];
  assert.ok(rule instanceof CSSStyleRule);
  assert.strictEqual(rule.selectorText, 'body');
  assert.strictEqual(rule.style.color, 'red');
  assert.strictEqual(rule.style.getPropertyValue('font-size'), '16px');
}

// Contract 4: parse correctly handles multiple style rules in a single CSS stylesheet
{
  const css = 'h1 { margin: 0; } p { line-height: 1.5; }';
  const sheet = parse(css);
  assert.strictEqual(sheet.cssRules.length, 2);
  assert.strictEqual(sheet.cssRules[0].selectorText, 'h1');
  assert.strictEqual(sheet.cssRules[0].style.margin, '0');
  assert.strictEqual(sheet.cssRules[1].selectorText, 'p');
  assert.strictEqual(sheet.cssRules[1].style.getPropertyValue('line-height'), '1.5');
}

// Contract 5: parse returns an empty CSSStyleSheet when given an empty CSS string
{
  const sheet = parse('');
  assert.ok(sheet instanceof CSSStyleSheet);
  assert.strictEqual(sheet.cssRules.length, 0);
}

// Contract 6: parse parses @media at-rules into CSSMediaRule with mediaText and nested rules
{
  const css = '@media screen and (min-width: 600px) { .container { width: 100%; } }';
  const sheet = parse(css);
  assert.strictEqual(sheet.cssRules.length, 1);
  const mediaRule = sheet.cssRules[0];
  assert.ok(mediaRule instanceof CSSMediaRule);
  assert.strictEqual(mediaRule.media.mediaText, 'screen and (min-width: 600px)');
  assert.strictEqual(mediaRule.cssRules.length, 1);
  assert.strictEqual(mediaRule.cssRules[0].selectorText, '.container');
  assert.strictEqual(mediaRule.cssRules[0].style.width, '100%');
}

// Contract 7: parse parses @import at-rules into CSSImportRule with href and media
{
  const css = '@import url("style.css") screen;';
  const sheet = parse(css);
  assert.strictEqual(sheet.cssRules.length, 1);
  const importRule = sheet.cssRules[0];
  assert.ok(importRule instanceof CSSImportRule);
  assert.strictEqual(importRule.href, 'style.css');
  assert.strictEqual(importRule.media.mediaText, 'screen');
}

// Contract 8: parse parses @keyframes at-rules into CSSKeyframesRule with animation name and keyframe rules
{
  const css = '@keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } }';
  const sheet = parse(css);
  assert.strictEqual(sheet.cssRules.length, 1);
  const keyframesRule = sheet.cssRules[0];
  assert.ok(keyframesRule instanceof CSSKeyframesRule);
  assert.strictEqual(keyframesRule.name, 'slidein');
  assert.strictEqual(keyframesRule.cssRules.length, 2);
  assert.strictEqual(keyframesRule.cssRules[0].keyText, 'from');
  assert.strictEqual(keyframesRule.cssRules[1].keyText, 'to');
}

console.log('All rrweb-cssom parse contract tests passed.');