Package Exports
- @medv/finder
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@medv/finder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
finder
CSS Selector Generator
Features
- Generates shortest selectors
- Unique selectors per page
- Stable and robust selectors
Install
npm install @medv/finderUsage
import finder from '@medv/finder'
document.addEventListener('click', event => {
const selector = finder(event.target)
console.log(selector)
})Example
.blog > article:nth-child(3) .add-commentComparison with optimal-select
optimal-select fails to generate selectors some times, and some times generates not unique selectors.
finder generates more shortest selectors than optimal-select. Also optimal-select now does not have tests and we have :)
For example, on github.com page:
| finder | optimal-select | |
|---|---|---|
| fails | 0 | 42 |
| shortest | 404 | 38 |
| longest | .story:nth-child(3) .d-lg-flex:nth-child(2) > .width-full:nth-child(1) |
[class="circle d-flex flex-column flex-justify-center text-center p-4 mx-auto mt-6 mb-3 m-md-3 bg-orange box-shadow-extra-large"] [class="d-block f0-light text-white lh-condensed-ultra mb-2"] |
License
MIT