{"id":10999,"library":"hast-util-from-selector","title":"HAST Utility to Create Nodes from CSS Selectors","description":"hast-util-from-selector is a utility package within the unified ecosystem designed to parse CSS selectors and generate corresponding HAST (Hypertext Abstract Syntax Tree) element nodes. It is currently at version 3.0.1, supporting Node.js 16 and later, and adheres to an ESM-only distribution model. The project follows a release cadence tied to Node.js LTS versions, with major versions introducing breaking changes aligned with Node.js support lifecycles or significant internal architectural shifts, such as the move to ESM in v2 and Node.js 16 requirement in v3. This package distinguishes itself from `hast-util-parse-selector` by offering more powerful and complex selector parsing capabilities, akin to `hastscript` but specifically focused on creating HAST elements from selector strings rather than a full hyperscript API. It's an active project, receiving regular updates for dependencies and type refinements.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/syntax-tree/hast-util-from-selector","tags":["javascript","css","hast-util","hast","html","hyperscript","svg","parse","utility","typescript"],"install":[{"cmd":"npm install hast-util-from-selector","lang":"bash","label":"npm"},{"cmd":"yarn add hast-util-from-selector","lang":"bash","label":"yarn"},{"cmd":"pnpm add hast-util-from-selector","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only since v2.0.0. There is no default export.","wrong":"const fromSelector = require('hast-util-from-selector')","symbol":"fromSelector","correct":"import { fromSelector } from 'hast-util-from-selector'"},{"note":"Import for TypeScript type definitions.","symbol":"Options","correct":"import type { Options } from 'hast-util-from-selector'"},{"note":"Import for TypeScript type definitions, defining 'html' or 'svg' namespace.","symbol":"Space","correct":"import type { Space } from 'hast-util-from-selector'"}],"quickstart":{"code":"import { fromSelector } from 'hast-util-from-selector';\n\nconst selectorString = 'p svg[viewbox=\"0 0 10 10\"] circle[cx=10][cy=10][r=10]';\nconst hastNode = fromSelector(selectorString);\n\nconsole.log(JSON.stringify(hastNode, null, 2));\n/*\nYields:\n{\n  \"type\": \"element\",\n  \"tagName\": \"p\",\n  \"properties\": {},\n  \"children\": [\n    {\n      \"type\": \"element\",\n      \"tagName\": \"svg\",\n      \"properties\": {\n        \"viewBox\": \"0 0 10 10\"\n      },\n      \"children\": [\n        {\n          \"type\": \"element\",\n          \"tagName\": \"circle\",\n          \"properties\": {\n            \"cx\": \"10\",\n            \"cy\": \"10\",\n            \"r\": \"10\"\n          },\n          \"children\": []\n        }\n      ]\n    }\n  ]\n}\n*/","lang":"typescript","description":"Demonstrates parsing a complex CSS selector string into a HAST element tree."},"warnings":[{"fix":"Upgrade your Node.js environment to version 16 or newer.","message":"Version 3.0.0 and later require Node.js 16 or higher. Earlier Node.js versions are not supported.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update your import statements to use ES Modules syntax: `import { fromSelector } from 'hast-util-from-selector'`.","message":"The package migrated to be ESM-only since version 2.0.0. CommonJS `require()` is no longer supported for direct imports.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Change `fromSelector(selector, 'svg')` to `fromSelector(selector, { space: 'svg' })`.","message":"In version 3.0.0, the `space` option can no longer be passed directly as a second argument. It must now be provided within an options object.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Review and test any complex or unusual CSS selectors to ensure they parse as expected under the CSS Selectors Level 4 specification.","message":"Version 3.0.0 updated its selector parsing to align with the CSS Selectors Level 4 specification. While generally backward-compatible, users should validate complex or edge-case selectors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always sanitize or validate any user-provided or external CSS selector strings before passing them to `fromSelector` to prevent XSS attacks.","message":"Using `hast-util-from-selector` with untrusted or unsanitized CSS selector strings can introduce Cross-Site Scripting (XSS) vulnerabilities, as malicious attributes or elements could be injected into the HAST tree.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update your import statements to use ES Modules syntax: `import { fromSelector } from 'hast-util-from-selector'`.","cause":"Attempting to import an ESM-only package using CommonJS `require()` syntax.","error":"ReferenceError: require is not defined"},{"fix":"Ensure your Node.js environment is version 16 or higher. If using a bundler (e.g., Webpack, Rollup), ensure it's configured to handle ESM packages correctly.","cause":"This typically occurs when using an unsupported older Node.js version (before 16) or if your build tooling isn't configured for ESM.","error":"Error: Cannot find module 'hast-util-from-selector'"},{"fix":"Verify that you are using a named import: `import { fromSelector } from 'hast-util-from-selector'`, as the package has no default export.","cause":"This error, often seen with bundlers, suggests an attempt to import a named export as a default, or incorrect CJS/ESM interop.","error":"TypeError: (0 , hast_util_from_selector__WEBPACK_IMPORTED_MODULE_0__.fromSelector) is not a function"},{"fix":"Refer to the CSS Selectors Level 4 specification and the package's documentation for supported selector types. Simplify your selector or use a different method to construct complex HAST nodes.","cause":"Using advanced or non-standard CSS selectors not yet supported by the package's CSS Selectors Level 4 parser.","error":"Error: Unknown selector: ':has'"}],"ecosystem":"npm"}