css-tree 3.2.1: clone, find, fromPlainObject

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 pkg:npm/css-tree@3.2.1
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/css-tree@3.2.1
Demonstrate these symbols/APIs:
  - clone
  - find
  - fromPlainObject
  - generate
  - lexer
  - parse
  - toPlainObject
  - walk

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:9577f11d74c8f1606c4a18e7bb8620899effab012b934cf171dce3d3065ca5ef","contract":["parse parses CSS strings into AST with StyleSheet root and AST node structures","walk traverses AST nodes and supports visitor callbacks and visit node type filters","find finds the first AST node matching a predicate function","generate serializes AST nodes back into standard CSS text","lexer validates CSS property declarations and returns error status","toPlainObject converts AST structures into plain JavaScript objects","fromPlainObject reconstructs AST structures from plain JavaScript objects","clone creates deep clones of AST nodes"],"goal":"verify pkg:npm/css-tree@3.2.1","kind":"HOW","packages":["pkg:npm/css-tree@3.2.1"],"schemaVersion":1,"symbols":["clone","find","fromPlainObject","generate","lexer","parse","toPlainObject","walk"]},"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/css-tree@3.2.1"],"schemaVersion":1,"subject":"pkg:npm/css-tree@3.2.1","symbols":["clone","find","fromPlainObject","generate","lexer","parse","toPlainObject","walk"],"verifierAdapter":"node-typescript@1"}

import * as csstree from 'css-tree';

export function parseCss(css, options = {}) {
  return csstree.parse(css, options);
}

export function generateCss(ast, options = {}) {
  return csstree.generate(ast, options);
}

export function walkAst(ast, visitor) {
  return csstree.walk(ast, visitor);
}

export function findNode(ast, predicate) {
  return csstree.find(ast, predicate);
}

export function validateProperty(property, value) {
  return csstree.lexer.matchProperty(property, value);
}

export function cloneAst(ast) {
  return csstree.clone(ast);
}

export function toPlain(ast) {
  return csstree.toPlainObject(ast);
}

export function fromPlain(plain) {
  return csstree.fromPlainObject(plain);
}

export { csstree };

{
  "name": "sample-css-tree-verify",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-css-tree-verify",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "css-tree": "3.2.1"
      }
    },
    "node_modules/css-tree": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
      "license": "MIT",
      "dependencies": {
        "mdn-data": "2.27.1",
        "source-map-js": "^1.2.1"
      },
      "engines": {
        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
      }
    },
    "node_modules/mdn-data": {
      "version": "2.27.1",
      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
      "license": "CC0-1.0"
    },
    "node_modules/source-map-js": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=0.10.0"
      }
    }
  }
}

{
  "name": "sample-css-tree-verify",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "description": "verify pkg:npm/css-tree@3.2.1",
  "main": "index.js",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "css-tree": "3.2.1"
  },
  "license": "MIT-0"
}

{
  "schemaVersion": 1,
  "goal": "verify pkg:npm/css-tree@3.2.1",
  "kind": "HOW",
  "packages": [
    "pkg:npm/css-tree@3.2.1"
  ],
  "symbols": [
    "clone",
    "find",
    "fromPlainObject",
    "generate",
    "lexer",
    "parse",
    "toPlainObject",
    "walk"
  ]
}

import assert from 'node:assert/strict';
import * as csstree from 'css-tree';
import {
  parseCss,
  generateCss,
  walkAst,
  findNode,
  validateProperty,
  cloneAst,
  toPlain,
  fromPlain
} from '../index.js';

// Sample CSS for verification
const sampleCss = `
  /* Main navigation */
  .nav {
    display: flex;
    color: #ff0000;
    font-size: 14px;
    margin: 8px 16px;
  }
  @media (min-width: 768px) {
    .nav {
      font-size: 18px;
    }
  }
`;

// 1. Symbol: parse
const ast = parseCss(sampleCss, { positions: true });
assert.equal(ast.type, 'StyleSheet', 'parse must return a StyleSheet AST root');
assert.ok(ast.loc !== null, 'parse with positions: true must populate location info');

const directAst = csstree.parse('.button { padding: 4px; }');
assert.equal(directAst.type, 'StyleSheet');

// 2. Symbol: walk
const declarations = [];
walkAst(ast, {
  visit: 'Declaration',
  enter(node) {
    declarations.push({
      property: node.property,
      value: generateCss(node.value)
    });
  }
});

assert.equal(declarations.length, 5, 'walk should find all 5 declarations');
assert.deepEqual(declarations[0], { property: 'display', value: 'flex' });
assert.deepEqual(declarations[1], { property: 'color', value: '#ff0000' });
assert.deepEqual(declarations[2], { property: 'font-size', value: '14px' });
assert.deepEqual(declarations[3], { property: 'margin', value: '8px 16px' });
assert.deepEqual(declarations[4], { property: 'font-size', value: '18px' });

// 3. Symbol: find
const colorDecl = findNode(ast, (node) => node.type === 'Declaration' && node.property === 'color');
assert.ok(colorDecl, 'find must locate the color declaration');
assert.equal(colorDecl.property, 'color');

const directFind = csstree.find(ast, (node) => node.type === 'Atrule' && node.name === 'media');
assert.ok(directFind, 'csstree.find must locate the media query atrule');

// 4. Symbol: clone
const clonedAst = cloneAst(ast);
assert.equal(clonedAst.type, 'StyleSheet');
assert.notEqual(clonedAst, ast, 'clone must produce a distinct object reference');

// Modify cloned AST only
walkAst(clonedAst, (node) => {
  if (node.type === 'Hash' && node.value === 'ff0000') {
    node.value = '0000ff';
  }
});

// 5. Symbol: generate
const originalGenerated = generateCss(ast);
const clonedGenerated = generateCss(clonedAst);
assert.equal(
  originalGenerated,
  '.nav{display:flex;color:#ff0000;font-size:14px;margin:8px 16px}@media (min-width:768px){.nav{font-size:18px}}',
  'generate must produce minified CSS matching original AST'
);
assert.equal(
  clonedGenerated,
  '.nav{display:flex;color:#0000ff;font-size:14px;margin:8px 16px}@media (min-width:768px){.nav{font-size:18px}}',
  'generate must reflect mutations made to cloned AST'
);

// 6. Symbol: lexer
const validColor = validateProperty('color', '#ff0000');
assert.equal(validColor.error, null, 'lexer.matchProperty must return null error for valid color');
assert.ok(validColor.matched !== null, 'lexer.matchProperty must return matched structure for valid color');

const invalidColor = validateProperty('color', '999px');
assert.notEqual(invalidColor.error, null, 'lexer.matchProperty must return syntax match error for invalid color');
assert.equal(invalidColor.matched, null, 'lexer.matchProperty matched must be null on failure');

const validDisplay = csstree.lexer.matchProperty('display', 'flex');
assert.equal(validDisplay.error, null, 'csstree.lexer.matchProperty must validate display: flex');

const declNode = csstree.parse('margin: 8px 16px', { context: 'declaration' });
const matchDecl = csstree.lexer.matchDeclaration(declNode);
assert.equal(matchDecl.error, null, 'csstree.lexer.matchDeclaration must validate Declaration node');

// 7. Symbol: toPlainObject
const plainObj = toPlain(clonedAst);
assert.equal(typeof plainObj, 'object');
assert.equal(plainObj.type, 'StyleSheet');
assert.ok(Array.isArray(plainObj.children), 'toPlainObject must represent children as standard arrays');

// 8. Symbol: fromPlainObject
const restoredAst = fromPlain(plainObj);
assert.equal(restoredAst.type, 'StyleSheet');
const restoredGenerated = generateCss(restoredAst);
assert.equal(restoredGenerated, clonedGenerated, 'fromPlainObject must reconstruct equivalent AST');

console.log('Contract assertions passed.');
process.exit(0);