postcss-selector-parser 7.1.1: attribute

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

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:b193fb18e076892cefe56d02abfaa07942bc10266276d9c71630e30e5023b13d","contract":["attribute creates an attribute node with specified attribute name and stringifies to bracketed selector","attribute supports comparison operators and quoted values with single and double quote marks","attribute supports unquoted values for valid CSS identifiers","attribute supports case-insensitivity flag with insensitive property and insensitiveFlag getter","attribute supports namespaces and qualifiedAttribute property","attribute calculates character offsets of constituent parts via offsetOf","attribute allows updating value and quote options via setValue and getQuotedValue","findAttribute parses CSS selectors and extracts attribute nodes with matching properties"],"goal":"verify postcss-selector-parser.attribute 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.attribute"]},"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.attribute"],"verifierAdapter":"node-typescript@1"}

import parser from 'postcss-selector-parser';

/**
 * Creates an attribute selector node programmatically.
 *
 * @param {object} [props] - Properties for the attribute node.
 * @returns {object} Attribute selector node.
 */
export function createAttribute(props) {
  return parser.attribute(props);
}

/**
 * Parses a CSS selector string and returns the first attribute selector node found.
 *
 * @param {string} selector - CSS selector string.
 * @returns {object|null} Attribute node or null if not found.
 */
export function findAttribute(selector) {
  let found = null;
  parser((selectors) => {
    selectors.walkAttributes((node) => {
      if (!found) {
        found = node;
      }
    });
  }).processSync(selector);
  return found;
}

export default parser;

{
  "name": "sample-postcss-selector-parser-attribute",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sample-postcss-selector-parser-attribute",
      "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-attribute",
  "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.attribute in pkg:npm/postcss-selector-parser@7.1.1",
  "kind": "HOW",
  "packages": [
    "pkg:npm/postcss-selector-parser@7.1.1"
  ],
  "symbols": [
    "postcss-selector-parser.attribute"
  ]
}

import assert from 'node:assert/strict';
import parser, { createAttribute, findAttribute } from '../index.mjs';

// 1. attribute creates an attribute node with specified attribute name and stringifies to bracketed selector
const attr1 = createAttribute({ attribute: 'disabled' });
assert.equal(attr1.type, 'attribute');
assert.equal(attr1.attribute, 'disabled');
assert.equal(attr1.toString(), '[disabled]');

// 2. attribute supports comparison operators and quoted values with single and double quote marks
const attr2 = createAttribute({
  attribute: 'href',
  operator: '=',
  value: 'https://example.com',
  quoteMark: '"',
  raws: { value: '"https://example.com"' }
});
assert.equal(attr2.operator, '=');
assert.equal(attr2.value, 'https://example.com');
assert.equal(attr2.quoted, true);
assert.equal(attr2.quoteMark, '"');
assert.equal(attr2.toString(), '[href="https://example.com"]');

const attr3 = createAttribute({
  attribute: 'class',
  operator: '~=',
  value: 'btn',
  quoteMark: "'",
  raws: { value: "'btn'" }
});
assert.equal(attr3.quoted, true);
assert.equal(attr3.quoteMark, "'");
assert.equal(attr3.toString(), "[class~='btn']");

// 3. attribute supports unquoted values for valid CSS identifiers
const attr4 = createAttribute({
  attribute: 'data-num',
  operator: '=',
  value: '123',
  quoteMark: null
});
assert.equal(attr4.quoted, false);
assert.equal(attr4.quoteMark, null);
assert.equal(attr4.toString(), '[data-num=123]');

// 4. attribute supports case-insensitivity flag with insensitive property and insensitiveFlag getter
const attr5 = createAttribute({
  attribute: 'data-env',
  operator: '=',
  value: 'prod',
  quoteMark: null,
  insensitive: true
});
assert.equal(attr5.insensitive, true);
assert.equal(attr5.insensitiveFlag, 'i');
assert.equal(attr5.toString(), '[data-env=prod i]');

// 5. attribute supports namespaces and qualifiedAttribute property
const attr6 = createAttribute({ namespace: 'svg', attribute: 'href' });
assert.equal(attr6.namespace, 'svg');
assert.equal(attr6.qualifiedAttribute, 'svg|href');
assert.equal(attr6.toString(), '[svg|href]');

// 6. attribute calculates character offsets of constituent parts via offsetOf
const attr7 = createAttribute({
  attribute: 'href',
  operator: '=',
  value: 'url',
  quoteMark: '"',
  raws: { value: '"url"' }
});
assert.equal(attr7.offsetOf('attribute'), 1);
assert.equal(attr7.offsetOf('operator'), 5);
assert.equal(attr7.offsetOf('value'), 6);

// 7. attribute allows updating value and quote options via setValue and getQuotedValue
const attr8 = createAttribute({ attribute: 'title', operator: '=' });
attr8.setValue('hello world', { quoteMark: '"' });
assert.equal(attr8.value, 'hello world');
assert.equal(attr8.quoteMark, '"');
assert.equal(attr8.toString(), '[title="hello world"]');
assert.equal(attr8.getQuotedValue({ quoteMark: "'" }), "'hello world'");

attr8.setValue('singleword', { smart: true });
assert.equal(attr8.quoteMark, null);
assert.equal(attr8.toString(), '[title=singleword]');

// 8. findAttribute parses CSS selectors and extracts attribute nodes with matching properties
const parsedAttr = findAttribute('div[data-role="navigation"] > span');
assert.notEqual(parsedAttr, null);
assert.equal(parsedAttr.type, 'attribute');
assert.equal(parsedAttr.attribute, 'data-role');
assert.equal(parsedAttr.operator, '=');
assert.equal(parsedAttr.value, 'navigation');
assert.equal(parsedAttr.quoted, true);
assert.equal(parsedAttr.quoteMark, '"');

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