rrweb-cssom 0.8.0: CSSKeyframesRule

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

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:df774ed11bdaf2e00b626db59c50a55a31d0fb536cb03975ce63265cb57664d1","contract":["CSSKeyframesRule represents @keyframes rules with rule type 7 and extracted animation name","CSSKeyframesRule parses keyframe rules containing keyText selectors and style declarations","CSSKeyframesRule supports vendor-prefixed @-webkit-keyframes rules preserving _vendorPrefix","CSSKeyframesRule serializes keyframes and nested keyframe rules back to formatted CSS via cssText","CSSKeyframesRule can be constructed directly and populated with CSSKeyframeRule child rules"],"goal":"verify rrweb-cssom.CSSKeyframesRule in pkg:npm/rrweb-cssom@0.8.0","kind":"HOW","packages":["pkg:npm/rrweb-cssom@0.8.0"],"schemaVersion":1,"symbols":["rrweb-cssom.CSSKeyframesRule"]},"contractCommand":["node","test/contract.mjs"],"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.CSSKeyframesRule"],"verifierAdapter":"node-typescript@1"}

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

/**
 * Parses CSS text and returns all CSSKeyframesRule instances found.
 *
 * @param {string} cssText - CSS containing keyframe rules.
 * @returns {CSSKeyframesRule[]} List of parsed keyframes rules.
 */
export function parseKeyframes(cssText) {
  const stylesheet = parse(cssText);
  const keyframesRules = [];
  for (let i = 0; i < stylesheet.cssRules.length; i++) {
    const rule = stylesheet.cssRules[i];
    if (rule instanceof CSSKeyframesRule) {
      keyframesRules.push(rule);
    }
  }
  return keyframesRules;
}

/**
 * Creates a new CSSKeyframesRule programmatically with child keyframes.
 *
 * @param {string} name - The animation name.
 * @param {Record<string, Record<string, string>>} [keyframesMap] - Map of step (e.g. '0%', '100%') to declarations.
 * @param {string} [vendorPrefix] - Optional vendor prefix like '-webkit-'.
 * @returns {CSSKeyframesRule} The constructed keyframes rule.
 */
export function createKeyframesRule(name, keyframesMap = {}, vendorPrefix) {
  const rule = new CSSKeyframesRule();
  rule.name = name;
  if (vendorPrefix) {
    rule._vendorPrefix = vendorPrefix;
  }
  for (const [keyText, declarations] of Object.entries(keyframesMap)) {
    const keyframe = new CSSKeyframeRule();
    keyframe.keyText = keyText;
    keyframe.parentRule = rule;
    for (const [property, value] of Object.entries(declarations)) {
      keyframe.style.setProperty(property, value);
    }
    rule.cssRules.push(keyframe);
  }
  return rule;
}

/**
 * Serializes a keyframes rule back to its CSS text representation.
 *
 * @param {CSSKeyframesRule} rule - The keyframes rule to serialize.
 * @returns {string} Serialized CSS text.
 */
export function serializeKeyframes(rule) {
  return rule.cssText;
}

export {
  CSSKeyframesRule,
  CSSKeyframeRule,
  CSSRule,
  parse
};

{
  "name": "sample-rrweb-cssom-keyframes",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-rrweb-cssom-keyframes",
      "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-keyframes",
  "version": "1.0.0",
  "type": "module",
  "private": true,
  "license": "MIT-0",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "rrweb-cssom": "0.8.0"
  }
}

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

import assert from 'node:assert/strict';
import {
  CSSKeyframesRule,
  CSSKeyframeRule,
  CSSRule,
  parse,
  parseKeyframes,
  createKeyframesRule,
  serializeKeyframes
} from '../index.mjs';

// 1. CSSKeyframesRule represents @keyframes rules with rule type 7 and extracted animation name
{
  const css = '@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }';
  const sheet = parse(css);
  assert.equal(sheet.cssRules.length, 1);
  const rule = sheet.cssRules[0];
  assert.ok(rule instanceof CSSKeyframesRule);
  assert.equal(rule.type, CSSRule.KEYFRAMES_RULE);
  assert.equal(rule.type, 7);
  assert.equal(rule.name, 'fadeIn');

  const parsed = parseKeyframes(css);
  assert.equal(parsed.length, 1);
  assert.equal(parsed[0].name, 'fadeIn');
}

// 2. CSSKeyframesRule parses keyframe rules containing keyText selectors and style declarations
{
  const css = '@keyframes slideIn { from { transform: translateX(0); } 100% { transform: translateX(100px); } }';
  const sheet = parse(css);
  const rule = sheet.cssRules[0];
  assert.equal(rule.cssRules.length, 2);

  const kf1 = rule.cssRules[0];
  const kf2 = rule.cssRules[1];
  assert.ok(kf1 instanceof CSSKeyframeRule);
  assert.ok(kf2 instanceof CSSKeyframeRule);
  assert.equal(kf1.type, CSSRule.KEYFRAME_RULE);
  assert.equal(kf1.type, 8);
  assert.equal(kf1.keyText, 'from');
  assert.equal(kf1.style.getPropertyValue('transform'), 'translateX(0)');
  assert.equal(kf2.keyText, '100%');
  assert.equal(kf2.style.getPropertyValue('transform'), 'translateX(100px)');
}

// 3. CSSKeyframesRule supports vendor-prefixed @-webkit-keyframes rules preserving _vendorPrefix
{
  const css = '@-webkit-keyframes pulse { 0% { opacity: 0; } 100% { opacity: 1; } }';
  const sheet = parse(css);
  assert.equal(sheet.cssRules.length, 1);
  const rule = sheet.cssRules[0];
  assert.ok(rule instanceof CSSKeyframesRule);
  assert.equal(rule.name, 'pulse');
  assert.equal(rule._vendorPrefix, '-webkit-');
  assert.ok(rule.cssText.startsWith('@-webkit-keyframes pulse'));
}

// 4. CSSKeyframesRule serializes keyframes and nested keyframe rules back to formatted CSS via cssText
{
  const css = '@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }';
  const parsed = parseKeyframes(css);
  assert.equal(parsed.length, 1);
  const serialized = serializeKeyframes(parsed[0]);
  assert.ok(serialized.includes('@keyframes spin'));
  assert.ok(serialized.includes('0% {transform: rotate(0deg);}'));
  assert.ok(serialized.includes('100% {transform: rotate(360deg);}'));
}

// 5. CSSKeyframesRule can be constructed directly and populated with CSSKeyframeRule child rules
{
  const manualRule = createKeyframesRule('bounce', {
    '0%': { transform: 'translateY(0)' },
    '50%': { transform: 'translateY(-20px)' },
    '100%': { transform: 'translateY(0)' }
  });
  assert.ok(manualRule instanceof CSSKeyframesRule);
  assert.equal(manualRule.type, 7);
  assert.equal(manualRule.name, 'bounce');
  assert.equal(manualRule.cssRules.length, 3);
  assert.equal(manualRule.cssRules[1].keyText, '50%');
  assert.equal(manualRule.cssRules[1].style.getPropertyValue('transform'), 'translateY(-20px)');
  const cssText = serializeKeyframes(manualRule);
  assert.ok(cssText.includes('@keyframes bounce'));
  assert.ok(cssText.includes('50% {transform: translateY(-20px);}'));
}

console.log('Contract tests passed successfully.');