finder

!finder

The CSS Selector Generator


Features

* Generates shortest CSS selectors
* Unique CSS selectors per page
* Stable and robust CSS selectors
* Size: 1.5kb (minified & gzipped)

Install

``bash
npm install @medv/finder
`

Usage

`ts
import { finder } from '@medv/finder';

document.addEventListener('click', (event) => {
const selector = finder(event.target);
});
`

Example

An example of a generated selector:

`css
.blog > article:nth-of-type(3) .add-comment
`

Configuration

`js
const selector = finder(event.target, {
root: document.body,
timeoutMs: 1000,
});
`

$3

Defines the root of the search. Defaults to document.body.

$3

Timeout to search for a selector. Defaults to 1000ms. After the timeout, finder fallbacks to nth-child selectors.

$3

Function that determines if a class name may be used in a selector. Defaults to a word-like class names.

You can extend the default behaviour wrapping the className function:

`js
import { finder, className } from '@medv/finder';

finder(event.target, {
className: name => className(name) || name.startsWith('my-class-'),
});
`

$3

Function that determines if a tag name may be used in a selector. Defaults to () => true.

$3

Function that determines if an attribute may be used in a selector. Defaults to a word-like attribute names and values.

You can extend the default behaviour wrapping the attr function:

`js
import { finder, attr } from '@medv/finder';

finder(event.target, {
attr: (name, value) => attr(name, value) || name.startsWith('data-my-attr-'),
});
`

$3

Function that determines if an id name may be used in a selector. Defaults to a word-like id names.

$3

Minimum length of levels in fining selector. Defaults to 3.

$3

Minimum length for optimising selector. Defaults to 2`.

License

MIT