hast-util-classnames

hast utility to merge class names together

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
hast-util-classnames
203.0.08 months ago4 years agoMinified + gzip package size for hast-util-classnames in KB

Readme

hast-util-classnames
!Buildbuild-badgebuild !Coveragecoverage-badgecoverage !Downloadsdownloads-badgedownloads !Sizesize-badgesize !Sponsorssponsors-badgecollective !Backersbackers-badgecollective !Chatchat-badgechat
hast utility to set classes.

Contents

*   [`classnames([node, ]…conditionals)`](#classnamesnode-conditionals)
*   [`ConditionalPrimitive`](#conditionalprimitive)
*   [`ConditionalMap`](#conditionalmap)
*   [`Conditional`](#conditional)

What is this?

This package is a utility that takes lets you more easily set class names on elements.

When should I use this?

You can use this package when you find that that you’re repeating yourself a lot when working with classes in the syntax tree.

Install

This package is ESM onlyesm. In Node.js (version 16+), install with npm:
npm install hast-util-classnames

In Deno with esm.shesmsh:
import {classnames} from 'https://esm.sh/hast-util-classnames@3'

In browsers with esm.shesmsh:
<script type="module">
  import {classnames} from 'https://esm.sh/hast-util-classnames@3?bundle'
</script>

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:
['alpha', '123', 'charlie']
{
  type: 'element',
  tagName: 'p',
  properties: {className: ['alpha', 'bravo', 'charlie', 'echo']},
  children: [{type: 'text', value: 'Hi!'}]
}

API

This package exports the identifier classnamesapi-classnames. There is no default export.

classnames([node, ]…conditionals)

Merge classes.
This function has two signatures, depending on whether a node was passed.
Signatures
  • (node: Node, ...conditionals: Array<Conditional>) => Node
  • (...conditionals: Array<Conditional>) => Array<string>
Parameters
— optionally, node whose classes to append to (must be
[`Element`][element])
— class configuration to merge
Returns
The given node (Nodenode), if any, or a list of strings (Array<string>).

ConditionalPrimitive

Basic class names (TypeScript type).
Type
type ConditionalPrimitive = number | string

ConditionalMap

Map of class names as keys, with whether they’re turned on or not as values.
Type
type ConditionalMap = Record<string, boolean>

Conditional

Different ways to turn class names on or off (TypeScript type).
Type
type Conditional =
  | Array<
      | Array<ConditionalPrimitive | ConditionalMap>
      | ConditionalMap
      | ConditionalPrimitive
    >
  | ConditionalMap
  | ConditionalPrimitive
  | null
  | undefined

Types

This package is fully typed with TypeScript. It exports the additional types Conditionalapi-conditional, ConditionalMapapi-conditional-map, and ConditionalPrimitiveapi-conditional-primitive.

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-classnames@^3, compatible with Node.js 16.

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-sanitizehast-util-sanitize to clean the tree.

Related

— create hast trees
— parse CSS selectors to hast nodes
— check if a node has a property
— check if a node is a (certain) element

Contribute

See contributing.mdcontributing in syntax-tree/.githubhealth for ways to get started. See support.mdsupport for ways to get help.
This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MITlicense © Titus Wormerauthor