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:

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']))

var 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.

Related

• 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.

License

MIT © Titus Wormer