{"library":"parsel-js","title":"Parsel.js: CSS Selector Parser","description":"Parsel.js is a lightweight and permissive JavaScript library designed for parsing CSS selectors and calculating their specificity. It provides a robust Abstract Syntax Tree (AST) representation of selectors, enabling developers to analyze, manipulate, or traverse selector structures. The current stable version is 1.2.2, with releases occurring relatively frequently, including both patch and minor updates to address bugs and introduce new features like support for relative selector lists. Key differentiators include its minimal footprint and forgiving parsing logic, making it suitable for environments where strict CSS validation might be too restrictive. It also includes built-in functionality for computing the CSS specificity of any given selector.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install parsel-js"],"cli":null},"imports":["import { parse } from 'parsel-js';","import { specificity } from 'parsel-js';","import { walk } from 'parsel-js';","const { parse, specificity } = require('parsel-js');"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { parse, specificity, walk } from 'parsel-js';\n\nconst selectorString = 'div.container > p:nth-child(2)[data-test=\"value\"]';\n\n// Parse the selector into an Abstract Syntax Tree (AST)\nconst ast = parse(selectorString);\nconsole.log('Parsed AST:', JSON.stringify(ast, null, 2));\n/*\nExample AST output (truncated for brevity):\n{\n  \"type\": \"list\",\n  \"list\": [\n    {\n      \"type\": \"complex\",\n      \"left\": {\"type\": \"type\", \"name\": \"div\"},\n      \"combinator\": \" \",\n      \"right\": {\"type\": \"compound\", ...}\n    }\n  ]\n}\n*/\n\n// Calculate the CSS specificity of the selector\nconst spec = specificity(selectorString);\nconsole.log(`Specificity of '${selectorString}': (${spec.a}, ${spec.b}, ${spec.c})`); // e.g., (0, 1, 2) or similar\n\n// Walk the AST to inspect nodes\nconsole.log('\\nWalking the AST:');\nwalk(ast, (node) => {\n  console.log(`  Node Type: ${node.type}${node.name ? ' - Name: ' + node.name : ''}`);\n});","lang":"typescript","description":"Demonstrates parsing a complex CSS selector, calculating its specificity, and walking its AST.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}