rrweb-cssom 0.8.0: CSSMediaRule

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.CSSMediaRule 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.CSSMediaRule
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:a26e072483d7109e68a24959e70de1cf48737740c902be1cc52d0fc1d11a41c1","constraints":{"executionContext":"node"},"contract":["parse extracts CSSMediaRule with MEDIA_RULE type (4), conditionText, and MediaList","CSSMediaRule supports media list manipulation via appendMedium and deleteMedium","CSSMediaRule supports dynamic child rule manipulation via insertRule and deleteRule","CSSMediaRule serializes nested rules to cssText format"],"goal":"verify rrweb-cssom.CSSMediaRule in pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSMediaRule"]},"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.8.0"],"schemaVersion":1,"subject":"pkg:npm/rrweb-cssom@0.8.0","symbols":["rrweb-cssom.CSSMediaRule"],"verifierAdapter":"node-typescript@1"}

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

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

'use strict';

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

function parseMediaRules(cssText) {
  const stylesheet = parse(cssText);
  return Array.from(stylesheet.cssRules).filter(
    (rule) => rule instanceof CSSMediaRule
  );
}

function createMediaRule(mediaQuery) {
  const rule = new CSSMediaRule();
  if (mediaQuery) {
    rule.media.mediaText = mediaQuery;
  }
  return rule;
}

function addMediaCondition(mediaRule, medium) {
  mediaRule.media.appendMedium(medium);
  return mediaRule.media.mediaText;
}

function removeMediaCondition(mediaRule, medium) {
  mediaRule.media.deleteMedium(medium);
  return mediaRule.media.mediaText;
}

function insertChildRule(mediaRule, ruleText, index = 0) {
  return mediaRule.insertRule(ruleText, index);
}

function deleteChildRule(mediaRule, index = 0) {
  mediaRule.deleteRule(index);
}

module.exports = {
  parseMediaRules,
  createMediaRule,
  addMediaCondition,
  removeMediaCondition,
  insertChildRule,
  deleteChildRule,
  CSSMediaRule,
  CSSRule,
  CSSStyleRule,
};

'use strict';

const assert = require('node:assert');
const {
  parseMediaRules,
  createMediaRule,
  addMediaCondition,
  removeMediaCondition,
  insertChildRule,
  deleteChildRule,
  CSSMediaRule,
  CSSRule,
  CSSStyleRule,
} = require('../src/index.js');

function testParseMediaRule() {
  const css = '@media screen and (min-width: 768px) { .header { display: flex; } .nav { width: 100%; } }';
  const mediaRules = parseMediaRules(css);

  assert.strictEqual(mediaRules.length, 1, 'Should find exactly 1 CSSMediaRule');
  const mediaRule = mediaRules[0];

  assert(mediaRule instanceof CSSMediaRule, 'Rule must be instance of CSSMediaRule');
  assert.strictEqual(mediaRule.type, CSSRule.MEDIA_RULE, 'type must equal CSSRule.MEDIA_RULE (4)');
  assert.strictEqual(mediaRule.type, 4, 'type must be numeric 4');
  assert.strictEqual(mediaRule.conditionText, 'screen and (min-width: 768px)', 'conditionText must match');
  assert.strictEqual(mediaRule.media.mediaText, 'screen and (min-width: 768px)', 'mediaText must match');
  assert.strictEqual(mediaRule.media.length, 1, 'media.length must be 1');
  assert.strictEqual(mediaRule.media[0], 'screen and (min-width: 768px)', 'media[0] must match');

  assert.strictEqual(mediaRule.cssRules.length, 2, 'cssRules must contain 2 child rules');
  const firstChild = mediaRule.cssRules[0];
  assert(firstChild instanceof CSSStyleRule, 'firstChild must be CSSStyleRule');
  assert.strictEqual(firstChild.selectorText, '.header', 'selectorText must match');
  assert.strictEqual(firstChild.style.getPropertyValue('display'), 'flex', 'style property must match');
}

function testMediaListManipulation() {
  const mediaRule = createMediaRule('screen');
  assert.strictEqual(mediaRule.media.mediaText, 'screen');
  assert.strictEqual(mediaRule.media.length, 1);

  const updated1 = addMediaCondition(mediaRule, 'print');
  assert.strictEqual(updated1, 'screen, print', 'appendMedium should append medium to mediaText');
  assert.strictEqual(mediaRule.media.length, 2);
  assert.strictEqual(mediaRule.media[1], 'print');

  const updated2 = removeMediaCondition(mediaRule, 'screen');
  assert.strictEqual(updated2, 'print', 'deleteMedium should remove medium from mediaText');
  assert.strictEqual(mediaRule.media.length, 1);
  assert.strictEqual(mediaRule.media[0], 'print');
}

function testChildRuleManipulation() {
  const mediaRule = createMediaRule('(max-width: 600px)');
  assert.strictEqual(mediaRule.cssRules.length, 0, 'Initially empty child rules');

  const idx0 = insertChildRule(mediaRule, '.sidebar { display: none; }', 0);
  assert.strictEqual(idx0, 0);
  assert.strictEqual(mediaRule.cssRules.length, 1);
  assert.strictEqual(mediaRule.cssRules[0].selectorText, '.sidebar');

  const idx1 = insertChildRule(mediaRule, '.content { width: 100%; }', 1);
  assert.strictEqual(idx1, 1);
  assert.strictEqual(mediaRule.cssRules.length, 2);
  assert.strictEqual(mediaRule.cssRules[1].selectorText, '.content');

  deleteChildRule(mediaRule, 0);
  assert.strictEqual(mediaRule.cssRules.length, 1);
  assert.strictEqual(mediaRule.cssRules[0].selectorText, '.content');
}

function testSerialization() {
  const mediaRule = createMediaRule('screen and (orientation: landscape)');
  insertChildRule(mediaRule, '.view { flex-direction: row; }', 0);

  const cssText = mediaRule.cssText;
  assert.strictEqual(typeof cssText, 'string');
  assert(cssText.startsWith('@media screen and (orientation: landscape)'));
  assert(cssText.includes('.view {flex-direction: row;}'));
}

function runAll() {
  testParseMediaRule();
  testMediaListManipulation();
  testChildRuleManipulation();
  testSerialization();
  console.log('Contract tests passed successfully.');
}

runAll();