{"library":"postcss-selector-parser","title":"PostCSS Selector Parser","description":"postcss-selector-parser is a utility library designed to parse CSS selector strings into an abstract syntax tree (AST), providing a structured API for inspecting and manipulating these selectors. It is an integral tool within the PostCSS ecosystem, enabling advanced selector transformations, linting, and optimizations by allowing plugins to programmatically interact with selector structures. The current stable version is 7.1.1, with a release cadence that responds to feature demands and bug fixes within the broader PostCSS community. Its key differentiators include a robust AST representation, comprehensive traversal methods (like `walk`), and support for both synchronous and asynchronous processing, making it highly flexible for various build environments. It also includes full TypeScript type definitions to enhance developer experience and ensure type safety.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-selector-parser"],"cli":null},"imports":["import parser from 'postcss-selector-parser';","import { Root, Selector, Node } from 'postcss-selector-parser';","import type { Root, Selector, Node, Combinator } from 'postcss-selector-parser';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import parser from 'postcss-selector-parser';\n\n// This example demonstrates parsing a CSS selector string into an AST,\n// traversing its nodes, and performing a simple transformation by\n// converting all element selectors to uppercase. It also shows both\n// synchronous and asynchronous processing.\nasync function processSelectors() {\n  const transform = (selectors: parser.Root) => {\n    selectors.walkTags((tag) => {\n      // Example transformation: convert all tag names to uppercase\n      tag.value = tag.value.toUpperCase();\n      console.log(`Transformed tag: ${tag.value}`);\n    });\n    selectors.walkCombinators((combinator) => {\n      console.log(`Found combinator: '${combinator.value}'`);\n    });\n  };\n\n  // Synchronous processing example\n  const originalSyncSelector = 'div > p.foo, a:hover';\n  console.log(`Original (sync): ${originalSyncSelector}`);\n  const transformedSync = parser(transform).processSync(originalSyncSelector);\n  console.log(`Transformed (sync): ${transformedSync}\\n`); // Expected: DIV > P.foo, A:hover\n\n  // Asynchronous processing example\n  const originalAsyncSelector = 'h1 + h2[data-test]';\n  console.log(`Original (async): ${originalAsyncSelector}`);\n  const transformedAsync = await parser(transform).process(originalAsyncSelector);\n  console.log(`Transformed (async): ${transformedAsync}`); // Expected: H1 + H2[data-test]\n}\n\nprocessSelectors().catch(console.error);","lang":"typescript","description":"Demonstrates how to parse and transform CSS selectors using `postcss-selector-parser`, showcasing both synchronous and asynchronous API usage and node traversal.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}