hast-util-classnames

hast utility to merge class names together.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm install hast-util-classnames

Use

import {h} from 'hastscript'
import {classnames} from 'hast-util-classnames'

console.log(classnames('alpha bravo', {bravo: false}, [123, 'charlie']))

const node = h('p.alpha', 'Hi!')
console.log(classnames(node, 'bravo', ['charlie', {delta: false, echo: 1}]))

Yields:

['123', 'alpha', 'charlie']
{
  type: 'element',
  tagName: 'p',
  properties: {className: ['alpha', 'bravo', 'charlie', 'echo']},
  children: [{type: 'text', value: 'Hi!'}]
}

API

This package exports the following identifiers: classnames. There is no default export.

`classnames(node, …conditionals)`

Utility to merge classes.

If the first argument is a node it should be an element. All conditionals are merged with the current class names and with each other, and then set on the element. Finally, node is returned.

`classnames(…conditionals)`

If the first argument is not a node, all conditionals are merged with each other, and then the resulting array is returned.

`Conditional`

A value that is either:

string — One or more space-separated tokens (example: alpha bravo)
number — Single token that is cast to string (example: 123)
Object.<string, boolean> — Map where each field is a token, and each value turns it either on or off
Conditional[] — List of more conditionals
Other values are ignored

Security

Classes are typically not harmful, however, if someone were able to inject classes, it could mean that user-provided content looks like official content, which may cause security problems due to impersonation. Either do not use user input in classnames or use hast-util-sanitize to clean the tree.

hastscript — Create hast trees
hast-util-from-selector — Parse CSS selectors to hast nodes
hast-util-has-property — Check if a node has a property
hast-util-is-element — Check if a node is a (certain) element

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.

christianmurphy / hast-util-classnames Goto Github PK