{"id":15813,"library":"rst-selector-parser","title":"React Standard Tree CSS Selector Parser","description":"rst-selector-parser is a JavaScript library designed for parsing CSS-like selectors specifically within the context of React Standard Trees (RST). It provides utilities to parse a CSS selector string into an Abstract Syntax Tree (AST) representing the selector's structure, and conversely, to generate a selector string from such an AST. This package is frequently utilized in conjunction with testing libraries like Enzyme for traversing and querying rendered React components. Currently at version 2.2.3, it is a fork of the `scalpel` library, adapted and optimized for the RST environment, ensuring compatibility with its unique traversal needs. Its primary differentiation lies in this specialized focus, offering a robust and programmatic way to interact with component trees using familiar CSS selector syntax, which can be particularly beneficial for testing and introspection workflows in React applications. The last significant update was in late 2019, suggesting a mature but slow-moving maintenance phase.","status":"maintenance","version":"2.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/aweary/rst-selector-parser","tags":["javascript","css","selector","parser"],"install":[{"cmd":"npm install rst-selector-parser","lang":"bash","label":"npm"},{"cmd":"yarn add rst-selector-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add rst-selector-parser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Use named imports for ESM. For CommonJS, use `const { createParser } = require('rst-selector-parser');`","wrong":"const createParser = require('rst-selector-parser');","symbol":"createParser","correct":"import { createParser } from 'rst-selector-parser';"},{"note":"Use named imports for ESM. For CommonJS, use `const { createGenerator } = require('rst-selector-parser');`. Avoid default imports.","wrong":"import createGenerator from 'rst-selector-parser';","symbol":"createGenerator","correct":"import { createGenerator } from 'rst-selector-parser';"}],"quickstart":{"code":"import { createGenerator, createParser } from 'rst-selector-parser';\n\nconst parser = createParser();\nconst generator = createGenerator();\n\n// Parse a CSS selector string into an AST\nconst tokens = parser.parse('.foo.bar');\nconsole.log('Parsed Tokens:', JSON.stringify(tokens, null, 2));\n/*\n[\n  {\n    \"type\": \"selector\",\n    \"body\": [\n      {\n        \"type\": \"classSelector\",\n        \"name\": \"foo\"\n      },\n      {\n        \"type\": \"classSelector\",\n        \"name\": \"bar\"\n      }\n    ]\n  }\n]\n*/\n\n// Generate a selector string from the AST\nconst selector = generator.generate(tokens[0]);\nconsole.log('Generated Selector:', selector);\n// .foo.bar","lang":"javascript","description":"Demonstrates parsing a CSS selector into a tokenized AST and then generating a selector string back from the AST."},"warnings":[{"fix":"Ensure you are using this parser in the intended React testing or RST traversal context. For general DOM/HTML CSS parsing, use a dedicated browser or Node.js DOM parser.","message":"This library is specifically designed for parsing selectors within a React Standard Tree (RST) context, commonly used with Enzyme. It is not a general-purpose CSS parser for browser DOM or arbitrary HTML. Attempting to use it for non-RST parsing may lead to unexpected behavior or unsupported selector types.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware that new features or bug fixes beyond critical issues are unlikely. If you require advanced or very recent CSS selector features, consider alternative, more actively maintained parsing solutions.","message":"The package has not seen significant updates or new releases since December 2019 (version 2.2.3). While functional, it indicates a maintenance-only status. Users requiring support for newer CSS selector specifications or active development might find it lacking.","severity":"maintenance","affected_versions":">=2.2.3"},{"fix":"For ESM projects, stick to `import { name } from 'pkg';`. For CommonJS projects, use `const { name } = require('pkg');`. Ensure your build tools (e.g., Webpack, Rollup) are configured correctly to handle dual packages.","message":"The package uses CommonJS for its 'main' entry point and ESM for 'module'. Incorrectly mixing `require()` with ESM-style imports for named exports, or vice-versa, can lead to undefined exports or runtime errors depending on your build setup and Node.js version.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Review the selector string for typos, incorrect combinators, or malformed attributes/pseudo-classes. Consult the W3C CSS3 Selectors specification and the library's `Token types` documentation for supported syntax.","cause":"The CSS selector string provided to `parser.parse()` contains invalid syntax or characters not supported by the parser's interpretation of W3C CSS3 Selectors.","error":"Syntax Error: Unexpected token '<token_type>' (at <line>:<column>)"},{"fix":"If using an ESM context (e.g., `type: 'module'` in `package.json`), use `import { createParser } from 'rst-selector-parser';`. If explicitly using CommonJS, ensure the `require` statement correctly destructures the named export: `const { createParser } = require('rst-selector-parser');`.","cause":"This error typically occurs when attempting to use a CommonJS `require()` statement in an environment that expects ESM, or when trying to access named exports incorrectly from a module that primarily exports as a default.","error":"TypeError: Cannot destructure property 'createParser' of 'require(...)' as it is undefined."}],"ecosystem":"npm"}