npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

generate-selectors

v1.0.0

Published

Returns CSS selectors from HTML

Readme

generate-selectors

Version 1.0.0.

generateSelectors is function which produces an shell of empty CSS selectors from markup. It is intended to be used in front-end development workflows. It also exists as a Gulp plugin.

Usage

generateSelectors accepts a single options parameter and returns a string. The result is intended to be used as the content of a stylesheet file.

stylesheet = generateSelectors( options )

Options

  • ids (Boolean|RegExp|Function) Instructions for generating id specifiers. Defaults to true.
  • classNames (Boolean|RegExp|Function) Instructions for generating class name specifiers. Defaults to true.
  • tagNames (Boolean|RegExp|Function) Instructions for generating tag names specifiers. Defaults to generateSelectors.ignoreDefaultTagNames.
  • styles(false|String) The existing stylesheet contents. Use of this option prevents both existing stylesheet content from being lost and duplicate selectors from being generated. Defaults to false, which assumes that an entirely new stylesheet is to be generated.
  • markup (String) The markup from which to generate the selectors. Required.

Instructions for types of specifiers

  • Booleans. true indicates to include all specifiers of this type, false indicates to skip this type of specifiers.
  • Regular Expressions include or exclude specific specifiers via the .match() method. For example, /^utility-/ would require that any specifiers start with 'utility-' in order to be included.
  • Functions include or exclude specific specifiers by acting as predicates. They accept the specifier as as string and return a boolean, true to include or false to exclude.

Behavior

generateSelectors combines all specifiers which it finds on an element into a single, compound selector. For example, <ul class="navigation" id="main-navigation"> might result in ul#main-navigation.navigation.

Default ignored tag names

The built-in predicate function generateSelectors.ignoreDefaultTagNames is controlled by the array generateSelectors.defaultIgnoredTagNames. If, for example, you wanted to add ul and li to the list of ignored tag names, you could write:

generateSelectors.defaultIgnoredTagNames = generateSelectors.defaultIgnoredTagNames.concat ( 'ul', 'li' )