unified

Project: syntax-tree/hast-util-from-selector

Package: hast-util-from-selector@2.0.1

  1. Dependents: 0
  2. hast utility to parse CSS selectors to hast nodes
  1. util 145
  2. utility 141
  3. unist 132
  4. html 124
  5. hast 74
  6. hast-util 46
  7. parse 24
  8. css 10
  9. hyperscript 5
  10. selector 4
  11. svg 2

hast-util-from-selector

Build Coverage Downloads Size Sponsors Backers Chat

hast utility to create nodes from a complex CSS selectors.

Contents

What is this?

This package is a utility that can generate elements from complex CSS selectors.

When should I use this?

You can use this when you’re generating a bunch of elements, and manually creating objects each time is starting to feel like a waste. This package is much more powerful than hast-util-parse-selector, and similar to hastscript.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install hast-util-from-selector

In Deno with esm.sh:

import {fromSelector} from 'https://esm.sh/hast-util-from-selector@3'

In browsers with esm.sh:

<script type="module">
  import {fromSelector} from 'https://esm.sh/hast-util-from-selector@3?bundle'
</script>

Use

import {fromSelector} from 'hast-util-from-selector'

console.log(fromSelector('p svg[viewbox="0 0 10 10"] circle[cx=10][cy=10][r=10]'))

Yields:

{
  type: 'element',
  tagName: 'p',
  properties: {},
  children: [
    {
      type: 'element',
      tagName: 'svg',
      properties: {viewBox: '0 0 10 10'},
      children: [
        {
          type: 'element',
          tagName: 'circle',
          properties: {cx: '10', cy: '10', r: '10'},
          children: []
        }
      ]
    }
  ]
}

API

This package exports the identifier fromSelector. There is no default export.

fromSelector(selector?[, options])

Create one or more Elements from a CSS selector.

Parameters
Returns

Element.

Options

Configuration (TypeScript type).

Fields

Space

Name of namespace (TypeScript type).

Type
type Space = 'html' | 'svg'

Support

Types

This package is fully typed with TypeScript. It exports the additional types Options and Space.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions of Node.js.

When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, hast-util-from-selector@^3, compatible with Node.js 16.

Security

Use of hast-util-from-selector can open you up to a cross-site scripting (XSS) attack as values are injected into the syntax tree.

Either do not use user input in from-selector or use hast-util-santize.

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Titus Wormer