rrweb-cssom 0.8.0

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 pkg:npm/rrweb-cssom@0.8.0
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/rrweb-cssom@0.8.0

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:88517cf3aa7a59405c039c6ee99dc3d0f6606e871ace72ea8c6307eabdd6637b","contract":["parse parses CSS declarations and style rules into CSSStyleSheet","parse parses nested @media rules and preserves inner style rules","parse parses @supports and @keyframes rules","CSSStyleSheet supports inserting and deleting CSS rules dynamically","CSSStyleSheet serializes modified stylesheet back to CSS string"],"goal":"verify pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1},"contractCommand":["node","test/contract.js"],"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.8.0"],"schemaVersion":1,"subject":"pkg:npm/rrweb-cssom@0.8.0","verifierAdapter":"node-typescript@1"}

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

{
  "schemaVersion": 1,
  "goal": "verify pkg:npm/rrweb-cssom@0.8.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/rrweb-cssom@0.8.0"
  ]
}

'use strict';

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

function parseCss(cssText) {
  return parse(cssText);
}

function createStyleSheet() {
  return new CSSStyleSheet();
}

function extractRules(stylesheet) {
  return Array.from(stylesheet.cssRules).map((rule) => {
    if (rule instanceof CSSStyleRule) {
      const styles = {};
      for (let i = 0; i < rule.style.length; i++) {
        const prop = rule.style[i];
        styles[prop] = rule.style.getPropertyValue(prop);
      }
      return {
        type: 'style',
        selectorText: rule.selectorText,
        style: styles,
        cssText: rule.cssText,
      };
    } else if (rule instanceof CSSMediaRule) {
      return {
        type: 'media',
        mediaText: rule.media.mediaText,
        rulesCount: rule.cssRules.length,
        cssText: rule.cssText,
      };
    } else if (rule instanceof CSSSupportsRule) {
      return {
        type: 'supports',
        conditionText: rule.conditionText,
        rulesCount: rule.cssRules.length,
        cssText: rule.cssText,
      };
    } else if (rule instanceof CSSKeyframesRule) {
      return {
        type: 'keyframes',
        name: rule.name,
        rulesCount: rule.cssRules.length,
        cssText: rule.cssText,
      };
    }
    return {
      type: 'unknown',
      cssText: rule.cssText,
    };
  });
}

function serializeStyleSheet(stylesheet) {
  return stylesheet.toString();
}

module.exports = {
  parseCss,
  createStyleSheet,
  extractRules,
  serializeStyleSheet,
  CSSStyleSheet,
  CSSStyleRule,
  CSSMediaRule,
  CSSSupportsRule,
  CSSKeyframesRule,
  parse,
};

'use strict';

const assert = require('node:assert');
const {
  parse,
  CSSStyleSheet,
  CSSStyleRule,
  CSSMediaRule,
  CSSSupportsRule,
  CSSKeyframesRule,
} = require('rrweb-cssom');
const {
  parseCss,
  createStyleSheet,
  extractRules,
  serializeStyleSheet,
} = require('../src/index.js');

function testParsingStyleRules() {
  const css = 'h1.title { color: red; font-size: 24px; margin: 0; }';
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 1, 'Should have 1 rule');
  const rule = sheet.cssRules[0];
  assert(rule instanceof CSSStyleRule, 'Rule should be CSSStyleRule');
  assert.strictEqual(rule.selectorText, 'h1.title', 'Selector should match');
  assert.strictEqual(rule.style.getPropertyValue('color'), 'red', 'Color property should match');
  assert.strictEqual(rule.style.getPropertyValue('font-size'), '24px', 'Font-size property should match');
  assert.strictEqual(rule.style.getPropertyValue('margin'), '0', 'Margin property should match');
  assert.strictEqual(rule.style.length, 3, 'Style declaration length should be 3');

  const extracted = extractRules(sheet);
  assert.strictEqual(extracted.length, 1);
  assert.strictEqual(extracted[0].type, 'style');
  assert.strictEqual(extracted[0].selectorText, 'h1.title');
  assert.deepStrictEqual(extracted[0].style, {
    color: 'red',
    'font-size': '24px',
    margin: '0',
  });
}

function testParsingMediaRules() {
  const css = '@media (min-width: 768px) { .container { width: 750px; } }';
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 1, 'Should have 1 media rule');
  const mediaRule = sheet.cssRules[0];
  assert(mediaRule instanceof CSSMediaRule, 'Rule should be CSSMediaRule');
  assert.strictEqual(mediaRule.media.mediaText, '(min-width: 768px)', 'Media text should match');
  assert.strictEqual(mediaRule.cssRules.length, 1, 'Nested rules length should be 1');

  const innerRule = mediaRule.cssRules[0];
  assert(innerRule instanceof CSSStyleRule, 'Inner rule should be CSSStyleRule');
  assert.strictEqual(innerRule.selectorText, '.container', 'Inner selector should match');
  assert.strictEqual(innerRule.style.getPropertyValue('width'), '750px', 'Inner style width should match');

  const extracted = extractRules(sheet);
  assert.strictEqual(extracted.length, 1);
  assert.strictEqual(extracted[0].type, 'media');
  assert.strictEqual(extracted[0].mediaText, '(min-width: 768px)');
  assert.strictEqual(extracted[0].rulesCount, 1);
}

function testParsingSupportsAndKeyframesRules() {
  const css = '@supports (display: grid) { .grid { display: grid; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }';
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 2, 'Should have 2 rules');
  const supportsRule = sheet.cssRules[0];
  assert(supportsRule instanceof CSSSupportsRule, 'First rule should be CSSSupportsRule');
  assert.strictEqual(supportsRule.conditionText, '(display: grid)', 'Condition text should match');
  assert.strictEqual(supportsRule.cssRules.length, 1, 'Supports rule should contain 1 nested rule');

  const keyframesRule = sheet.cssRules[1];
  assert(keyframesRule instanceof CSSKeyframesRule, 'Second rule should be CSSKeyframesRule');
  assert.strictEqual(keyframesRule.name, 'fadeIn', 'Keyframes name should match');
  assert.strictEqual(keyframesRule.cssRules.length, 2, 'Keyframes rule should contain 2 keyframe rules');

  const extracted = extractRules(sheet);
  assert.strictEqual(extracted.length, 2);
  assert.strictEqual(extracted[0].type, 'supports');
  assert.strictEqual(extracted[0].conditionText, '(display: grid)');
  assert.strictEqual(extracted[1].type, 'keyframes');
  assert.strictEqual(extracted[1].name, 'fadeIn');
}

function testDynamicRuleManipulation() {
  const sheet = createStyleSheet();
  assert.strictEqual(sheet.cssRules.length, 0, 'Initial sheet should be empty');

  sheet.insertRule('body { background-color: #ffffff; }', 0);
  assert.strictEqual(sheet.cssRules.length, 1, 'Sheet should have 1 rule after insert');
  assert.strictEqual(sheet.cssRules[0].selectorText, 'body');

  sheet.insertRule('p { line-height: 1.5; }', 1);
  assert.strictEqual(sheet.cssRules.length, 2, 'Sheet should have 2 rules');
  assert.strictEqual(sheet.cssRules[1].selectorText, 'p');

  sheet.deleteRule(0);
  assert.strictEqual(sheet.cssRules.length, 1, 'Sheet should have 1 rule after deletion');
  assert.strictEqual(sheet.cssRules[0].selectorText, 'p');
  assert.strictEqual(sheet.cssRules[0].style.getPropertyValue('line-height'), '1.5');
}

function testSerialization() {
  const css = 'a.link { color: blue; text-decoration: none; }';
  const sheet = parse(css);
  const serialized = serializeStyleSheet(sheet);

  assert(typeof serialized === 'string', 'Serialized output should be string');
  assert(serialized.includes('a.link'), 'Serialized output should contain selector');
  assert(serialized.includes('color: blue;'), 'Serialized output should contain color');
  assert(serialized.includes('text-decoration: none;'), 'Serialized output should contain text-decoration');
}

function runAll() {
  testParsingStyleRules();
  testParsingMediaRules();
  testParsingSupportsAndKeyframesRules();
  testDynamicRuleManipulation();
  testSerialization();
  console.log('Contract tests passed successfully.');
}

runAll();