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

Use EXACTLY these public packages and versions:
  - pkg:npm/rrweb-cssom@0.7.1
Demonstrate these symbols/APIs:
  - rrweb-cssom.CSSMediaRule

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:70ea6eab0bbd0c8a84e8a39456e4af5559710b07705a8d1229889d9f9a784102","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.7.1","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.7.1"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSMediaRule"]},"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.7.1"],"schemaVersion":1,"subject":"pkg:npm/rrweb-cssom@0.7.1","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.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-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.7.1"
  },
  "license": "MIT-0"
}

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

'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();