sindresorhus/refined-github

Do you want to work on this issue?

You can request for a bounty in order to promote it!

Replace `select().closest()` calls with `sizzle` #4456

fregante posted onGitHub

The :has() CSS selector is nowhere to be seen yet and given the recent de-class-ification of GitHub’s DOM we found ourself needing code like this very often:

select('.some-octicon').closest('details')

<details> <summary>"Custom API" suggestion, discarded. Sizzle is best</summary>

so I wonder how we can "polyfill" the selector without have to load Sizzle. Example:

select2('details').has('.some-octicon')

Example:

function select2(selector: string) {
    return {
        has(children: string) {
            return select(children)?.closest(selector);
        }
    }
}

select2.all = (selector: string) => {
    return {
        has(children: string) {
            return select.all(children) :filter/map: .closest(selector);
        }
    }
}

Thoughts? Worth it at all?

</details>


Or maybe, instead of awkward APIs, we could just load up Sizzle, 20KB

sizzle('details:has(.some-octicon)')[0].textContent = 'Hi!'
posted by fregante almost 4 years ago

The advantage of just using sizzle is that we can drop it easily once :has() becomes available in every browser (2028)

posted by fregante over 3 years ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests