rrweb-cssom 0.8.0: CSSKeyframeRule

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

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:b2452f6df165e6e3d07f9779b283bf233d1ff05b57b421fa87f9cd19f97e3d01","contract":["assert CSSKeyframeRule has rule type 8 (KEYFRAME_RULE)","assert CSSKeyframeRule can be instantiated directly with empty keyText and style","assert CSSKeyframeRule keyText and style properties can be set and serialize to cssText","assert createKeyframeRule constructs a configured CSSKeyframeRule instance","assert parse parses @keyframes into CSSKeyframeRule instances with parent references","assert extractKeyframeRules extracts all CSSKeyframeRule items from keyframes block"],"goal":"verify rrweb-cssom.CSSKeyframeRule in pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSKeyframeRule"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","distro":"ubuntu","ecosystem":"npm","executionContext":"node","language":"javascript","libc":"glibc","libcVersion":"2.39","moduleSystem":"esm","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.CSSKeyframeRule"],"verifierAdapter":"node-typescript@1"}

import { CSSKeyframeRule, parse } from 'rrweb-cssom';

/**
 * Creates a CSSKeyframeRule instance with the given keyText and style properties.
 *
 * @param {string} keyText - Keyframe selector, e.g., '0%', 'from', 'to', '100%'.
 * @param {Record<string, string>} [declarations={}] - CSS property-value pairs.
 * @returns {CSSKeyframeRule} The configured CSSKeyframeRule instance.
 */
export function createKeyframeRule(keyText, declarations = {}) {
  const rule = new CSSKeyframeRule();
  rule.keyText = keyText;
  for (const [property, value] of Object.entries(declarations)) {
    rule.style.setProperty(property, value);
  }
  return rule;
}

/**
 * Extracts all CSSKeyframeRule instances from the first @keyframes rule in a CSS string.
 *
 * @param {string} cssText - CSS containing an @keyframes rule.
 * @returns {CSSKeyframeRule[]} Array of CSSKeyframeRule objects.
 */
export function extractKeyframeRules(cssText) {
  const stylesheet = parse(cssText);
  const keyframes = [];
  for (let i = 0; i < stylesheet.cssRules.length; i++) {
    const rule = stylesheet.cssRules[i];
    if (rule.type === 7 || rule.constructor.name === 'CSSKeyframesRule') {
      for (let j = 0; j < rule.cssRules.length; j++) {
        const kf = rule.cssRules[j];
        if (kf.type === 8 || kf.constructor.name === 'CSSKeyframeRule') {
          keyframes.push(kf);
        }
      }
    }
  }
  return keyframes;
}

export { CSSKeyframeRule };

{
  "name": "sample-rrweb-cssom-csskeyframerule",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom-csskeyframerule",
      "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-csskeyframerule",
  "version": "1.0.0",
  "description": "Clean-room sample verifying rrweb-cssom.CSSKeyframeRule functionality",
  "type": "module",
  "main": "index.js",
  "license": "MIT-0",
  "dependencies": {
    "rrweb-cssom": "0.8.0"
  }
}

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

import assert from 'node:assert';
import { CSSKeyframeRule, parse } from 'rrweb-cssom';
import { createKeyframeRule, extractKeyframeRules } from '../index.js';

// 1. Assert CSSKeyframeRule type constant equals 8
const rule = new CSSKeyframeRule();
assert.strictEqual(rule.type, 8, 'CSSKeyframeRule type should be 8 (KEYFRAME_RULE)');
assert.strictEqual(CSSKeyframeRule.prototype.type, 8, 'CSSKeyframeRule.prototype.type should be 8');

// 2. Assert direct instantiation initializes default properties
assert.strictEqual(rule.keyText, '', 'Default keyText should be empty string');
assert.strictEqual(rule.parentRule, null, 'Default parentRule should be null');
assert.strictEqual(rule.parentStyleSheet, null, 'Default parentStyleSheet should be null');
assert.ok(rule.style, 'rule.style should be initialized');
assert.strictEqual(rule.style.length, 0, 'Initial style declaration count should be 0');

// 3. Assert setting keyText and styles reflects in properties and cssText
rule.keyText = '50%';
rule.style.setProperty('opacity', '0.5');
rule.style.setProperty('transform', 'scale(1.2)');
assert.strictEqual(rule.keyText, '50%', 'keyText should update to 50%');
assert.strictEqual(rule.style.getPropertyValue('opacity'), '0.5', 'opacity should be 0.5');
assert.strictEqual(rule.style.getPropertyValue('transform'), 'scale(1.2)', 'transform should match');
assert.strictEqual(rule.cssText, '50% {opacity: 0.5; transform: scale(1.2);} ', 'cssText should serialize correctly');

// 4. Assert helper createKeyframeRule constructs and populates a CSSKeyframeRule
const customRule = createKeyframeRule('to', { color: 'blue', display: 'none' });
assert.ok(customRule instanceof CSSKeyframeRule, 'Should be an instance of CSSKeyframeRule');
assert.strictEqual(customRule.keyText, 'to', 'keyText should be to');
assert.strictEqual(customRule.style.getPropertyValue('color'), 'blue');
assert.strictEqual(customRule.style.getPropertyValue('display'), 'none');
assert.strictEqual(customRule.cssText, 'to {color: blue; display: none;} ');

// 5. Assert parse parses @keyframes rules into CSSKeyframeRule items
const css = '@keyframes bounce { from { top: 0px; } 50% { top: -20px; } to { top: 0px; } }';
const stylesheet = parse(css);
assert.strictEqual(stylesheet.cssRules.length, 1, 'Stylesheet should have 1 rule');
const keyframesRule = stylesheet.cssRules[0];
assert.strictEqual(keyframesRule.name, 'bounce', 'Keyframes name should match');
assert.strictEqual(keyframesRule.cssRules.length, 3, 'Keyframes should contain 3 keyframe rules');

const kf0 = keyframesRule.cssRules[0];
assert.ok(kf0 instanceof CSSKeyframeRule, 'kf0 should be CSSKeyframeRule');
assert.strictEqual(kf0.keyText, 'from', 'kf0 keyText should be from');
assert.strictEqual(kf0.style.top, '0px', 'kf0 style top should be 0px');
assert.strictEqual(kf0.parentRule, keyframesRule, 'kf0 parentRule should be keyframesRule');
assert.strictEqual(kf0.parentStyleSheet, stylesheet, 'kf0 parentStyleSheet should be owner stylesheet');

const kf1 = keyframesRule.cssRules[1];
assert.ok(kf1 instanceof CSSKeyframeRule, 'kf1 should be CSSKeyframeRule');
assert.strictEqual(kf1.keyText, '50%', 'kf1 keyText should be 50%');
assert.strictEqual(kf1.style.top, '-20px', 'kf1 style top should be -20px');

const kf2 = keyframesRule.cssRules[2];
assert.ok(kf2 instanceof CSSKeyframeRule, 'kf2 should be CSSKeyframeRule');
assert.strictEqual(kf2.keyText, 'to', 'kf2 keyText should be to');
assert.strictEqual(kf2.style.top, '0px', 'kf2 style top should be 0px');

// 6. Assert extractKeyframeRules extracts all keyframes across stylesheet
const extracted = extractKeyframeRules(css);
assert.strictEqual(extracted.length, 3, 'extractKeyframeRules should extract 3 keyframe rules');
assert.strictEqual(extracted[0].keyText, 'from');
assert.strictEqual(extracted[1].keyText, '50%');
assert.strictEqual(extracted[2].keyText, 'to');

console.log('All rrweb-cssom.CSSKeyframeRule contract assertions passed.');