rrweb-cssom 0.7.1

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.7.1
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/rrweb-cssom@0.7.1
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:017983f3ed92470f36c904d1cb3c245463c7ae4446df58f77a5c69e11429ee79","constraints":{"executionContext":"node"},"contract":["parse parses CSS @import rules into CSSImportRule with href and media queries","parse extracts CSSKeyframesRule and child CSSKeyframeRule keyframes with styles","parse handles CSSSupportsRule and CSSContainerRule with conditionText and nested rules","parse extracts CSSFontFaceRule font descriptors into style declaration","CSSStyleDeclaration supports setting and removing properties with important priority"],"goal":"verify pkg:npm/rrweb-cssom@0.7.1","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.7.1"],"schemaVersion":1},"contractCommand":["node","test/contract.js"],"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","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.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",
  "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.7.1"
  },
  "license": "MIT-0"
}

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

'use strict';

const {
  parse,
  CSSRule,
  CSSImportRule,
  CSSKeyframesRule,
  CSSKeyframeRule,
  CSSSupportsRule,
  CSSContainerRule,
  CSSFontFaceRule,
  CSSStyleRule,
  CSSStyleDeclaration,
  CSSStyleSheet,
} = require('rrweb-cssom');

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

function extractAtRules(stylesheet) {
  const result = {
    imports: [],
    keyframes: [],
    supports: [],
    containers: [],
    fontFaces: [],
    styles: [],
  };

  for (let i = 0; i < stylesheet.cssRules.length; i++) {
    const rule = stylesheet.cssRules[i];
    if (rule instanceof CSSImportRule) {
      result.imports.push({
        href: rule.href,
        mediaText: rule.media ? rule.media.mediaText : '',
        cssText: rule.cssText,
      });
    } else if (rule instanceof CSSKeyframesRule) {
      const keyframes = [];
      for (let j = 0; j < rule.cssRules.length; j++) {
        const kf = rule.cssRules[j];
        keyframes.push({
          keyText: kf.keyText,
          cssText: kf.cssText,
        });
      }
      result.keyframes.push({
        name: rule.name,
        keyframes,
        cssText: rule.cssText,
      });
    } else if (rule instanceof CSSSupportsRule) {
      result.supports.push({
        conditionText: rule.conditionText,
        rulesCount: rule.cssRules.length,
        cssText: rule.cssText,
      });
    } else if (rule instanceof CSSContainerRule) {
      result.containers.push({
        conditionText: rule.conditionText,
        rulesCount: rule.cssRules.length,
        cssText: rule.cssText,
      });
    } else if (rule instanceof CSSFontFaceRule) {
      result.fontFaces.push({
        fontFamily: rule.style.getPropertyValue('font-family'),
        fontWeight: rule.style.getPropertyValue('font-weight'),
        cssText: rule.cssText,
      });
    } else if (rule instanceof CSSStyleRule) {
      result.styles.push({
        selectorText: rule.selectorText,
        cssText: rule.cssText,
      });
    }
  }

  return result;
}

module.exports = {
  parseCss,
  extractAtRules,
  parse,
  CSSRule,
  CSSImportRule,
  CSSKeyframesRule,
  CSSKeyframeRule,
  CSSSupportsRule,
  CSSContainerRule,
  CSSFontFaceRule,
  CSSStyleRule,
  CSSStyleDeclaration,
  CSSStyleSheet,
};

'use strict';

const assert = require('node:assert');
const {
  CSSRule,
  CSSImportRule,
  CSSKeyframesRule,
  CSSKeyframeRule,
  CSSSupportsRule,
  CSSContainerRule,
  CSSFontFaceRule,
  CSSStyleRule,
} = require('rrweb-cssom');
const { parseCss, extractAtRules } = require('../src/index.js');

function testImportRules() {
  const css = "@import url('theme.css') screen and (min-width: 600px);";
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 1, 'Should contain 1 rule');
  const rule = sheet.cssRules[0];
  assert(rule instanceof CSSImportRule, 'Should be CSSImportRule');
  assert.strictEqual(rule.type, CSSRule.IMPORT_RULE);
  assert.strictEqual(rule.href, 'theme.css');
  assert.strictEqual(rule.media.mediaText, 'screen and (min-width: 600px)');

  const extracted = extractAtRules(sheet);
  assert.strictEqual(extracted.imports.length, 1);
  assert.strictEqual(extracted.imports[0].href, 'theme.css');
  assert.strictEqual(extracted.imports[0].mediaText, 'screen and (min-width: 600px)');
}

function testKeyframesRules() {
  const css = `
    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(1.1); opacity: 0.8; }
    }
  `;
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 1);
  const keyframesRule = sheet.cssRules[0];
  assert(keyframesRule instanceof CSSKeyframesRule);
  assert.strictEqual(keyframesRule.type, CSSRule.KEYFRAMES_RULE);
  assert.strictEqual(keyframesRule.name, 'pulse');
  assert.strictEqual(keyframesRule.cssRules.length, 2);

  const kf0 = keyframesRule.cssRules[0];
  assert(kf0 instanceof CSSKeyframeRule);
  assert.strictEqual(kf0.type, CSSRule.KEYFRAME_RULE);
  assert.strictEqual(kf0.keyText, '0%');
  assert.strictEqual(kf0.style.getPropertyValue('transform'), 'scale(1)');
  assert.strictEqual(kf0.style.getPropertyValue('opacity'), '1');

  const kf1 = keyframesRule.cssRules[1];
  assert(kf1 instanceof CSSKeyframeRule);
  assert.strictEqual(kf1.type, CSSRule.KEYFRAME_RULE);
  assert.strictEqual(kf1.keyText, '100%');
  assert.strictEqual(kf1.style.getPropertyValue('transform'), 'scale(1.1)');
  assert.strictEqual(kf1.style.getPropertyValue('opacity'), '0.8');

  const extracted = extractAtRules(sheet);
  assert.strictEqual(extracted.keyframes.length, 1);
  assert.strictEqual(extracted.keyframes[0].name, 'pulse');
  assert.strictEqual(extracted.keyframes[0].keyframes.length, 2);
}

function testConditionalAndContainerRules() {
  const css = `
    @supports (display: flex) {
      .flex-box { display: flex; align-items: center; }
    }
    @container (min-width: 400px) {
      .card-item { padding: 16px; }
    }
  `;
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 2);

  // @supports
  const supportsRule = sheet.cssRules[0];
  assert(supportsRule instanceof CSSSupportsRule);
  assert.strictEqual(supportsRule.type, CSSRule.SUPPORTS_RULE);
  assert.strictEqual(supportsRule.conditionText, '(display: flex)');
  assert.strictEqual(supportsRule.cssRules.length, 1);
  assert(supportsRule.cssRules[0] instanceof CSSStyleRule);
  assert.strictEqual(supportsRule.cssRules[0].selectorText, '.flex-box');
  assert.strictEqual(supportsRule.cssRules[0].style.getPropertyValue('display'), 'flex');
  assert.strictEqual(supportsRule.cssRules[0].style.getPropertyValue('align-items'), 'center');

  // @container
  const containerRule = sheet.cssRules[1];
  assert(containerRule instanceof CSSContainerRule);
  assert.strictEqual(containerRule.conditionText, '(min-width: 400px)');
  assert.strictEqual(containerRule.cssRules.length, 1);
  assert(containerRule.cssRules[0] instanceof CSSStyleRule);
  assert.strictEqual(containerRule.cssRules[0].selectorText, '.card-item');
  assert.strictEqual(containerRule.cssRules[0].style.getPropertyValue('padding'), '16px');

  const extracted = extractAtRules(sheet);
  assert.strictEqual(extracted.supports.length, 1);
  assert.strictEqual(extracted.supports[0].conditionText, '(display: flex)');
  assert.strictEqual(extracted.containers.length, 1);
  assert.strictEqual(extracted.containers[0].conditionText, '(min-width: 400px)');
}

function testFontFaceRules() {
  const css = `
    @font-face {
      font-family: 'Roboto';
      src: url('roboto.woff2') format('woff2');
      font-weight: 400;
    }
  `;
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 1);
  const fontFaceRule = sheet.cssRules[0];
  assert(fontFaceRule instanceof CSSFontFaceRule);
  assert.strictEqual(fontFaceRule.type, CSSRule.FONT_FACE_RULE);
  assert.strictEqual(fontFaceRule.style.getPropertyValue('font-family'), "'Roboto'");
  assert.strictEqual(fontFaceRule.style.getPropertyValue('font-weight'), '400');

  const extracted = extractAtRules(sheet);
  assert.strictEqual(extracted.fontFaces.length, 1);
  assert.strictEqual(extracted.fontFaces[0].fontFamily, "'Roboto'");
  assert.strictEqual(extracted.fontFaces[0].fontWeight, '400');
}

function testStyleDeclarationPriorityAndMutation() {
  const css = '.banner { color: #333333 !important; padding: 10px; }';
  const sheet = parseCss(css);

  assert.strictEqual(sheet.cssRules.length, 1);
  const styleRule = sheet.cssRules[0];
  assert(styleRule instanceof CSSStyleRule);
  assert.strictEqual(styleRule.selectorText, '.banner');
  assert.strictEqual(styleRule.style.getPropertyValue('color'), '#333333');
  assert.strictEqual(styleRule.style.getPropertyPriority('color'), 'important');
  assert.strictEqual(styleRule.style.getPropertyPriority('padding'), '');

  styleRule.style.setProperty('margin', '20px', 'important');
  assert.strictEqual(styleRule.style.getPropertyValue('margin'), '20px');
  assert.strictEqual(styleRule.style.getPropertyPriority('margin'), 'important');

  styleRule.style.removeProperty('padding');
  assert.strictEqual(styleRule.style.getPropertyValue('padding'), '');
}

function runAll() {
  testImportRules();
  testKeyframesRules();
  testConditionalAndContainerRules();
  testFontFaceRules();
  testStyleDeclarationPriorityAndMutation();
  console.log('Contract tests passed successfully.');
}

runAll();