rrweb-cssom 0.7.1: CSSOM.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 CSSOM.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:
  - CSSOM.parse

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:8af8cbf4a3addcdc069c0496cfc7f714a8b9f4c6745945e6de7f41fcd667e64d","contract":["assert CSSOM.parse returns a CSSStyleSheet with 0 rules for an empty string","assert CSSOM.parse parses CSS style rules and populates selectorText, style declarations, and parentStyleSheet","assert CSSOM.parse parses multiple CSS rules and ignores comments","assert CSSOM.parse parses @media at-rules and populates nested rules and parentRule","assert CSSOM.parse parses @keyframes at-rules and populates keyframes name and keyText","assert CSSOM.parse parses @import at-rules and populates href and media query","assert CSSOM.parse parses @supports at-rules and populates conditionText and nested rules","assert extractStyleRules and extractMediaRules helper functions extract matching rule types from parsed stylesheets"],"goal":"verify CSSOM.parse in pkg:npm/rrweb-cssom@0.7.1","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.7.1"],"schemaVersion":1,"symbols":["CSSOM.parse"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"esm","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":["CSSOM.parse"],"verifierAdapter":"node-typescript@1"}

import CSSOM, { parse } from 'rrweb-cssom';

/**
 * Parses CSS text into a CSSStyleSheet AST using CSSOM.parse.
 *
 * @param {string} cssText - Raw CSS stylesheet string.
 * @returns {import('rrweb-cssom').CSSStyleSheet} Parsed CSSStyleSheet object.
 */
export function parseStylesheet(cssText) {
  return CSSOM.parse(cssText);
}

/**
 * Extracts all CSSStyleRule instances from a CSS stylesheet string using CSSOM.parse.
 *
 * @param {string} cssText - Raw CSS stylesheet string.
 * @returns {Array<import('rrweb-cssom').CSSStyleRule>} List of style rules.
 */
export function extractStyleRules(cssText) {
  const stylesheet = CSSOM.parse(cssText);
  const rules = [];
  for (let i = 0; i < stylesheet.cssRules.length; i++) {
    const rule = stylesheet.cssRules[i];
    if (rule.type === 1 || rule.constructor.name === 'CSSStyleRule') {
      rules.push(rule);
    }
  }
  return rules;
}

/**
 * Finds all media rules (@media) from a CSS stylesheet string using CSSOM.parse.
 *
 * @param {string} cssText - Raw CSS stylesheet string.
 * @returns {Array<import('rrweb-cssom').CSSMediaRule>} List of media rules.
 */
export function extractMediaRules(cssText) {
  const stylesheet = CSSOM.parse(cssText);
  const rules = [];
  for (let i = 0; i < stylesheet.cssRules.length; i++) {
    const rule = stylesheet.cssRules[i];
    if (rule.type === 4 || rule.constructor.name === 'CSSMediaRule') {
      rules.push(rule);
    }
  }
  return rules;
}

export { CSSOM, parse };
export default CSSOM;

{
  "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",
  "description": "Clean-room sample verifying CSSOM.parse in rrweb-cssom",
  "type": "module",
  "main": "index.js",
  "license": "MIT-0",
  "dependencies": {
    "rrweb-cssom": "0.7.1"
  }
}

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

import assert from 'node:assert/strict';
import CSSOM, { parse, parseStylesheet, extractStyleRules, extractMediaRules } from '../index.js';

// 1. CSSOM.parse returns a CSSStyleSheet with 0 rules for an empty string
const emptySheet = CSSOM.parse('');
assert.equal(emptySheet.cssRules.length, 0, 'empty CSS should produce 0 rules');
assert.equal(typeof emptySheet.insertRule, 'function', 'stylesheet should have insertRule method');
assert.equal(typeof emptySheet.deleteRule, 'function', 'stylesheet should have deleteRule method');

// 2. CSSOM.parse parses basic CSS style rules and populates selectorText, style declarations, and parentStyleSheet
const basicCss = 'body { color: red; margin: 10px; background-color: #ffffff; }';
const basicSheet = parseStylesheet(basicCss);
assert.equal(basicSheet.cssRules.length, 1, 'should parse single CSSStyleRule');
const basicRule = basicSheet.cssRules[0];
assert.equal(basicRule.type, 1, 'rule type must be STYLE_RULE (1)');
assert.equal(basicRule.selectorText, 'body', 'selector text must match');
assert.equal(basicRule.style.color, 'red', 'style color must match');
assert.equal(basicRule.style.margin, '10px', 'style margin must match');
assert.equal(basicRule.style['background-color'], '#ffffff', 'style background-color must match');
assert.equal(basicRule.style.getPropertyValue('background-color'), '#ffffff', 'getPropertyValue must match');
assert.equal(basicRule.parentStyleSheet, basicSheet, 'parentStyleSheet must point to owner stylesheet');

// 3. CSSOM.parse parses multiple CSS rules and ignores comments
const multiCss = '/* header comment */ h1, h2 { font-size: 20px; } /* card comment */ .card { border: 1px solid #ccc; }';
const multiSheet = CSSOM.parse(multiCss);
assert.equal(multiSheet.cssRules.length, 2, 'should parse two rules ignoring comments');
assert.equal(multiSheet.cssRules[0].selectorText, 'h1, h2');
assert.equal(multiSheet.cssRules[0].style['font-size'], '20px');
assert.equal(multiSheet.cssRules[1].selectorText, '.card');
assert.equal(multiSheet.cssRules[1].style.border, '1px solid #ccc');

// 4. CSSOM.parse parses @media at-rules and populates nested rules and parentRule
const mediaCss = '@media screen and (min-width: 600px) { p { font-size: 14px; } .container { width: 100%; } }';
const mediaSheet = CSSOM.parse(mediaCss);
assert.equal(mediaSheet.cssRules.length, 1, 'should parse media rule');
const mediaRule = mediaSheet.cssRules[0];
assert.equal(mediaRule.type, 4, 'rule type must be MEDIA_RULE (4)');
assert.equal(mediaRule.media.mediaText, 'screen and (min-width: 600px)', 'media condition text must match');
assert.equal(mediaRule.cssRules.length, 2, 'media rule should contain 2 nested rules');
assert.equal(mediaRule.cssRules[0].selectorText, 'p');
assert.equal(mediaRule.cssRules[0].parentRule, mediaRule, 'nested rule parentRule must point to enclosing media rule');
assert.equal(mediaRule.cssRules[1].selectorText, '.container');
assert.equal(mediaRule.cssRules[1].parentRule, mediaRule);

// 5. CSSOM.parse parses @keyframes at-rules and populates keyframes name and keyText
const keyframesCss = '@keyframes fade { from { opacity: 0; } to { opacity: 1; } }';
const keyframesSheet = CSSOM.parse(keyframesCss);
assert.equal(keyframesSheet.cssRules.length, 1, 'should parse keyframes rule');
const keyframesRule = keyframesSheet.cssRules[0];
assert.equal(keyframesRule.type, 7, 'rule type must be KEYFRAMES_RULE (7)');
assert.equal(keyframesRule.name, 'fade', 'keyframes name must match');
assert.equal(keyframesRule.cssRules.length, 2, 'keyframes must contain 2 keyframe rules');
assert.equal(keyframesRule.cssRules[0].keyText, 'from');
assert.equal(keyframesRule.cssRules[0].style.opacity, '0');
assert.equal(keyframesRule.cssRules[1].keyText, 'to');
assert.equal(keyframesRule.cssRules[1].style.opacity, '1');

// 6. CSSOM.parse parses @import at-rules and populates href and media query
const importCss = '@import url("theme.css") print;';
const importSheet = CSSOM.parse(importCss);
assert.equal(importSheet.cssRules.length, 1, 'should parse import rule');
const importRule = importSheet.cssRules[0];
assert.equal(importRule.type, 3, 'rule type must be IMPORT_RULE (3)');
assert.equal(importRule.href, 'theme.css', 'import href must match');
assert.equal(importRule.media.mediaText, 'print', 'import media query must match');

// 7. CSSOM.parse parses @supports at-rules and populates conditionText and nested rules
const supportsCss = '@supports (display: flex) { .flex-box { display: flex; } }';
const supportsSheet = CSSOM.parse(supportsCss);
assert.equal(supportsSheet.cssRules.length, 1, 'should parse supports rule');
const supportsRule = supportsSheet.cssRules[0];
assert.equal(supportsRule.type, 12, 'rule type must be SUPPORTS_RULE (12)');
assert.equal(supportsRule.conditionText, '(display: flex)', 'conditionText must match');
assert.equal(supportsRule.cssRules.length, 1, 'nested rules count must match');
assert.equal(supportsRule.cssRules[0].selectorText, '.flex-box');

// 8. Helper extractStyleRules and extractMediaRules filter correctly
const mixedCss = 'body { color: blue; } @media (max-width: 480px) { div { padding: 4px; } } p { margin: 0; }';
const styleRules = extractStyleRules(mixedCss);
assert.equal(styleRules.length, 2, 'should extract 2 style rules');
assert.equal(styleRules[0].selectorText, 'body');
assert.equal(styleRules[1].selectorText, 'p');

const mediaRules = extractMediaRules(mixedCss);
assert.equal(mediaRules.length, 1, 'should extract 1 media rule');
assert.equal(mediaRules[0].media.mediaText, '(max-width: 480px)');

console.log('All CSSOM.parse contract assertions passed.');