rrweb-cssom 0.8.0: CSSSupportsRule

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.CSSSupportsRule 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.CSSSupportsRule

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:1fa6e3f2e4ff4cdf12cc2de5b51096a15c1b424eaf88e412fc10a497ea441339","contract":["parse extracts CSSSupportsRule with SUPPORTS_RULE type (12) and conditionText","CSSSupportsRule conditionText can be read and updated dynamically","CSSSupportsRule supports nested child rule insertion and deletion via insertRule and deleteRule","CSSSupportsRule serializes rule and nested rules into @supports cssText"],"goal":"verify rrweb-cssom.CSSSupportsRule in pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSSupportsRule"]},"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","symbols":["rrweb-cssom.CSSSupportsRule"],"verifierAdapter":"node-typescript@1"}

{
  "name": "sample-rrweb-cssom-csssupportsrule",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom-csssupportsrule",
      "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-csssupportsrule",
  "version": "1.0.0",
  "private": true,
  "description": "Clean-room verification sample for rrweb-cssom CSSSupportsRule",
  "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.CSSSupportsRule in pkg:npm/rrweb-cssom@0.8.0",
  "kind": "HOW",
  "packages": [
    "pkg:npm/rrweb-cssom@0.8.0"
  ],
  "symbols": [
    "rrweb-cssom.CSSSupportsRule"
  ]
}

'use strict';

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

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

function createSupportsRule(conditionText) {
  const rule = new CSSSupportsRule();
  if (conditionText) {
    rule.conditionText = conditionText;
  }
  return rule;
}

function setSupportsCondition(supportsRule, conditionText) {
  supportsRule.conditionText = conditionText;
  return supportsRule.conditionText;
}

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

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

module.exports = {
  parseSupportsRules,
  createSupportsRule,
  setSupportsCondition,
  insertChildRule,
  deleteChildRule,
  CSSSupportsRule,
  CSSRule,
  CSSStyleRule,
};

'use strict';

const assert = require('node:assert');
const {
  parseSupportsRules,
  createSupportsRule,
  setSupportsCondition,
  insertChildRule,
  deleteChildRule,
  CSSSupportsRule,
  CSSRule,
  CSSStyleRule,
} = require('../src/index.js');

function testParseSupportsRule() {
  const css = '@supports (display: grid) { .grid { display: grid; grid-gap: 10px; } .item { width: 100%; } }';
  const supportsRules = parseSupportsRules(css);

  assert.strictEqual(supportsRules.length, 1, 'Should find exactly 1 CSSSupportsRule');
  const supportsRule = supportsRules[0];

  assert(supportsRule instanceof CSSSupportsRule, 'Rule must be instance of CSSSupportsRule');
  assert.strictEqual(supportsRule.type, CSSRule.SUPPORTS_RULE, 'type must equal CSSRule.SUPPORTS_RULE (12)');
  assert.strictEqual(supportsRule.type, 12, 'type must be numeric 12');
  assert.strictEqual(supportsRule.conditionText, '(display: grid)', 'conditionText must match');

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

function testConditionTextUpdate() {
  const supportsRule = createSupportsRule('(display: flex)');
  assert.strictEqual(supportsRule.conditionText, '(display: flex)');

  const updated = setSupportsCondition(supportsRule, '(display: grid) and (not (display: inline-grid))');
  assert.strictEqual(updated, '(display: grid) and (not (display: inline-grid))', 'conditionText should be updated');
  assert.strictEqual(supportsRule.conditionText, '(display: grid) and (not (display: inline-grid))');
}

function testChildRuleManipulation() {
  const supportsRule = createSupportsRule('(backdrop-filter: blur(5px))');
  assert.strictEqual(supportsRule.cssRules.length, 0, 'Initially empty child rules');

  const idx0 = insertChildRule(supportsRule, '.card { backdrop-filter: blur(5px); }', 0);
  assert.strictEqual(idx0, 0);
  assert.strictEqual(supportsRule.cssRules.length, 1);
  assert.strictEqual(supportsRule.cssRules[0].selectorText, '.card');

  const idx1 = insertChildRule(supportsRule, '.modal { background: rgba(0,0,0,0.5); }', 1);
  assert.strictEqual(idx1, 1);
  assert.strictEqual(supportsRule.cssRules.length, 2);
  assert.strictEqual(supportsRule.cssRules[1].selectorText, '.modal');

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

function testSerialization() {
  const supportsRule = createSupportsRule('(display: flex)');
  insertChildRule(supportsRule, '.box { display: flex; }', 0);

  const cssText = supportsRule.cssText;
  assert.strictEqual(typeof cssText, 'string');
  assert(cssText.startsWith('@supports (display: flex)'));
  assert(cssText.includes('.box {display: flex;}'));
}

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

runAll();