{"library":"postcss-values-parser","title":"PostCSS CSS Value Parser","description":"postcss-values-parser is a JavaScript library designed to parse CSS property values into an Abstract Syntax Tree (AST). It is built upon the PostCSS ecosystem, leveraging PostCSS's tokenizer and following similar node and traversal patterns, ensuring consistency for developers familiar with PostCSS plugins. The current stable version is 7.0.0, which marked a significant rewrite, now building on `css-tree` for improved correctness and performance, and transitioning to a pure ESM package. The library aims to provide robust AST traversal, convenience methods for stringifying nodes, and specific properties for parsing units, colors, and variables, making it a powerful tool for manipulating CSS values within a PostCSS workflow. Release cadence appears to be driven by significant refactors and PostCSS version updates, with maintenance releases addressing bug fixes.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install postcss-values-parser"],"cli":null},"imports":["import { parse } from 'postcss-values-parser';","import { Word } from 'postcss-values-parser';","import { registerWalkers } from 'postcss-values-parser';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { parse, registerWalkers } from 'postcss-values-parser';\n\n// Example CSS property value\nconst cssValue = 'linear-gradient(to right, #f6e32d, #f6e32d 50%, #685a21) var(--custom-spacing, 1rem)';\n\n// Parse the CSS value into an AST root node\nconst root = parse(cssValue);\n\n// Register walkers to enable methods like walkWords on the root node (v7.0.0+)\nregisterWalkers(root);\n\nconsole.log('Parsed AST root:');\nconsole.log(root.toString());\n\nconsole.log('\\nWalking nodes:');\nroot.walk((node) => {\n  console.log(`  Type: ${node.type}, Value: ${node.value || '(N/A)'}`);\n});\n\nconsole.log('\\nExtracting colors:');\nroot.walkWords((wordNode) => {\n  if (wordNode.isColor) {\n    console.log(`  Found color: ${wordNode.value}`);\n  }\n});\n\n// Demonstrating node manipulation (e.g., changing a color)\nroot.walkWords((wordNode) => {\n  if (wordNode.value === '#f6e32d') {\n    wordNode.value = '#FF0000'; // Change color to red\n  }\n});\n\nconsole.log('\\nModified AST root:');\nconsole.log(root.toString());\n","lang":"typescript","description":"This quickstart demonstrates parsing a complex CSS value, traversing its AST using `walk` and `walkWords`, and performing a basic modification of a node (changing a color value).","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}