postcss-selector-parser 7.1.1: className

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 postcss-selector-parser.className in pkg:npm/postcss-selector-parser@7.1.1
Kind: HOW

Use EXACTLY these public packages and versions:
  - pkg:npm/postcss-selector-parser@7.1.1
Demonstrate these symbols/APIs:
  - postcss-selector-parser.className

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:be447da5e3848f5d7a1c488a9f446d8644d8019c36d7e95493147931875987e6","contract":["className creates a class selector node with the specified value and stringifies to dot-prefixed selector","className supports updating value property dynamically","className supports custom spacing via spaces before and after properties","className supports raw value formatting via raws","className node can be cloned with preserved type and value","className node attaches to parent selector container AST hierarchy","findClasses extracts all class nodes from complex CSS selectors using walkClasses","renameClasses transforms class selector values across complex selectors"],"goal":"verify postcss-selector-parser.className in pkg:npm/postcss-selector-parser@7.1.1","kind":"HOW","packages":["pkg:npm/postcss-selector-parser@7.1.1"],"schemaVersion":1,"symbols":["postcss-selector-parser.className"]},"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/postcss-selector-parser@7.1.1"],"schemaVersion":1,"subject":"pkg:npm/postcss-selector-parser@7.1.1","symbols":["postcss-selector-parser.className"],"verifierAdapter":"node-typescript@1"}

import parser from 'postcss-selector-parser';

/**
 * Creates a class selector node programmatically.
 *
 * @param {object} [props] - Properties for the class node.
 * @returns {object} Class selector node.
 */
export function createClassName(props) {
  return parser.className(props);
}

/**
 * Parses a CSS selector string and returns all class selector nodes found.
 *
 * @param {string} selector - CSS selector string.
 * @returns {Array<object>} Array of class nodes.
 */
export function findClasses(selector) {
  const classes = [];
  parser((selectors) => {
    selectors.walkClasses((node) => {
      classes.push(node);
    });
  }).processSync(selector);
  return classes;
}

/**
 * Parses a CSS selector string and renames matching class selectors.
 *
 * @param {string} selector - CSS selector string.
 * @param {function(string): string} transform - Function to rename class values.
 * @returns {string} Transformed selector string.
 */
export function renameClasses(selector, transform) {
  return parser((selectors) => {
    selectors.walkClasses((node) => {
      node.value = transform(node.value);
    });
  }).processSync(selector);
}

export default parser;

{
  "name": "sample-postcss-selector-parser-classname",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-postcss-selector-parser-classname",
      "version": "1.0.0",
      "license": "MIT-0",
      "dependencies": {
        "postcss-selector-parser": "7.1.1"
      }
    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
      "license": "MIT",
      "bin": {
        "cssesc": "bin/cssesc"
      },
      "engines": {
        "node": ">=4"
      }
    },
    "node_modules/postcss-selector-parser": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
      "license": "MIT",
      "dependencies": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
      },
      "engines": {
        "node": ">=4"
      }
    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "license": "MIT"
    }
  }
}

{
  "name": "sample-postcss-selector-parser-classname",
  "version": "1.0.0",
  "type": "module",
  "main": "index.mjs",
  "license": "MIT-0",
  "scripts": {
    "test": "node test/contract.mjs"
  },
  "dependencies": {
    "postcss-selector-parser": "7.1.1"
  }
}

{
  "schemaVersion": 1,
  "goal": "verify postcss-selector-parser.className in pkg:npm/postcss-selector-parser@7.1.1",
  "kind": "HOW",
  "packages": [
    "pkg:npm/postcss-selector-parser@7.1.1"
  ],
  "symbols": [
    "postcss-selector-parser.className"
  ]
}

import assert from 'node:assert/strict';
import parser, { createClassName, findClasses, renameClasses } from '../index.mjs';

// 1. className creates a class selector node with the specified value and stringifies to dot-prefixed selector
const cls = createClassName({ value: 'btn' });
assert.equal(cls.type, 'class');
assert.equal(cls.value, 'btn');
assert.equal(cls.toString(), '.btn');

// 2. className supports updating value property dynamically
cls.value = 'btn-active';
assert.equal(cls.value, 'btn-active');
assert.equal(cls.toString(), '.btn-active');

// 3. className supports custom spacing via spaces before and after properties
const clsSpaces = createClassName({
  value: 'spaced',
  spaces: { before: ' ', after: ' ' }
});
assert.equal(clsSpaces.spaces.before, ' ');
assert.equal(clsSpaces.spaces.after, ' ');
assert.equal(clsSpaces.toString(), ' .spaced ');

// 4. className supports raw value formatting via raws
const clsRaw = createClassName({
  value: 'foo:bar',
  raws: { value: 'foo\\:bar' }
});
assert.equal(clsRaw.value, 'foo:bar');
assert.equal(clsRaw.raws.value, 'foo\\:bar');
assert.equal(clsRaw.toString(), '.foo\\:bar');

// 5. className node can be cloned with preserved type and value
const original = createClassName({ value: 'cloned' });
const cloned = original.clone();
assert.equal(cloned.type, 'class');
assert.equal(cloned.value, 'cloned');
assert.equal(cloned.toString(), '.cloned');
assert.notEqual(cloned, original);

// 6. className node attaches to parent selector container AST hierarchy
const selectorContainer = parser.selector();
const tag = parser.tag({ value: 'button' });
const classNode = parser.className({ value: 'primary' });
selectorContainer.append(tag);
selectorContainer.append(classNode);
assert.equal(selectorContainer.toString(), 'button.primary');
assert.equal(classNode.parent, selectorContainer);

// 7. findClasses extracts all class nodes from complex CSS selectors using walkClasses
const found = findClasses('nav.menu-bar > ul.nav-list li.item.active');
assert.equal(found.length, 4);
assert.equal(found[0].value, 'menu-bar');
assert.equal(found[1].value, 'nav-list');
assert.equal(found[2].value, 'item');
assert.equal(found[3].value, 'active');

// 8. renameClasses transforms class selector values across complex selectors
const renamed = renameClasses('div.card.card-large > a.link-btn:hover', (val) => `prefix-${val}`);
assert.equal(renamed, 'div.prefix-card.prefix-card-large > a.prefix-link-btn:hover');

console.log('All postcss-selector-parser.className contract tests passed successfully.');