Skip to content
dperiniPublic

About

Fast CSS Selectors API Engine

Resources

Stars

141 stars

Watchers

2 watching

Forks

Repository files navigation

Fast CSS Selectors API Engine

NWSAPI is the development progress of NWMATCHER aiming at Selectors Level 4 conformance. It has been completely reworked to be easily extended and maintained. It is a right-to-left selector parser and compiler written in pure Javascript with no external dependencies. It was initially thought as a cross browser library to improve event delegation and web page scraping in various frameworks but it has become a popular replacement of the native CSS selection and matching functionality in newer browsers and headless environments.

It uses regular expressions to parse CSS selector strings and metaprogramming to transforms these selector strings into Javascript function resolvers. This process is executed only once for each selector string allowing memoization of the function resolvers and achieving unmatched performances.

Installation

To include NWSAPI in a standard web page:

<script type="text/javascript" src="nwsapi.js"></script>

To include NWSAPI in a standard web page and automatically replace the native QSA:

<script type="text/javascript" src="nwsapi.js" onload="NW.Dom.install()"></script>

To use NWSAPI with Node.js:

$ npm install nwsapi

NWSAPI currently supports browsers (as a global, NW.Dom) and headless environments (as a CommonJS module).

For contributor setup and staged v2 publishing, see Releasing v2.

Supported Selectors

Here is a list of all the CSS2/CSS3/CSS4 Supported selectors.

Features and Compliance

You can read more about NWSAPI features and compliance on the wiki.

API

DOM Selection

ancestor( selector, context, callback )

Returns a reference to the nearest ancestor element matching selector, starting at context. Returns null if no element is found. If callback is provided, it is invoked for the matched element.

first( selector, context, callback )

Returns a reference to the first element matching selector, starting at context. Returns null if no element matches. If callback is provided, it is invoked for the matched element.

match( selector, element, callback )

Returns true if element matches selector, starting at context; returns false otherwise. If callback is provided, it is invoked for the matched element.

select( selector, context, callback )

Returns an array of all the elements matching selector, starting at context; returns empty Array otherwise. If callback is provided, it is invoked for each matching element.

DOM Helpers

byId( id, from )

Returns a reference to the first element with ID id, optionally filtered to descendants of the element from.

byTag( tag, from )

Returns an array of elements having the specified tag name tag, optionally filtered to descendants of the element from.

byClass( class, from )

Returns an array of elements having the specified class name class, optionally filtered to descendants of the element from.

Engine Configuration

configure( options )

The following is the list of currently available configuration options, their default values and descriptions, the existing flags can be set to true or false:

  • IDS_DUPES: true - true to allow using multiple elements having the same id, false to disallow
  • LIVECACHE: true - true for caching both results and resolvers, false for caching only resolvers
  • MIXEDCASE: true - true to match tag names case insensitive, false to match using case sensitive
  • LOGERRORS: true - true to print errors and warnings to the console, false to mute both of them

Two numeric settings control each compiled-plan cache:

  • CACHE_LIMIT: 1000 entries by default.
  • CACHE_BYTES: 2 * 1024 * 1024 estimated bytes by default.

Both accept nonnegative safe integers. Zero disables retention. Changing either setting clears existing query caches and applies the new bounds immediately. Invalid values throw a TypeError before any options change. Read a numeric setting with configure("CACHE_LIMIT") or configure("CACHE_BYTES").

engine.configure({ CACHE_LIMIT: 8192, CACHE_BYTES: 8 * 1024 * 1024 });

This example opts into larger bounds for a large stylesheet. Measure runtime and memory for your workload. The byte budget is per cache and estimates keys and compiled plans, not total JavaScript heap usage. Configure the nwsapi instance used by your host. Creating a separate instance does not change jsdom's engine.

The eviction policy remains LRU. These settings can mitigate issue #242 when the stylesheet fits the configured bounds. Scans larger than those bounds can still miss on every query.

Examples on extending the basic functionalities

configure( { <configuration-flag>: [ true | false ] } )

Disable logging errors/warnings to console, disallow duplicate ids. Example:

NW.Dom.configure( { LOGERRORS: false, IDS_DUPES: false } );

NOTE: NW.Dom.configure() without parameters return the current configuration.

registerCombinator( symbol, resolver )

Registers a new symbol and its matching resolver in the combinators table. Example:

NW.Dom.registerCombinator( '^', 'e.parentElement' );

registerOperator( symbol, resolver )

Registers a new symbol and its matching resolver in the attribute operators table. Example:

NW.Dom.registerOperator( '!=', { p1: '^', p2: '$', p3: 'false' } );

registerSelector( name, rexp, func )

Registers a new selector, the matching RE and the resolver function, in the selectors table. Example:

NW.Dom.registerSelector('Controls', /^\:(control)(.*)/i,
  (function(global) {
    return function(match, source, mode, callback) {
      var status = true;
      source = 'if(/^(button|input|select|textarea)/i.test(e.nodeName)){' + source + '}';
      return { 'source': source, 'status': status };
    };
  })(this));

Development setup

Use Node.js 22.18 or newer to start setup:

npm run setup
npm test

Either npm run setup or pnpm run setup selects this branch's pinned npm automatically. Setup downloads and verifies mise, nub, npm, and pnpm from the versions and integrity hashes in .config/external-tools.json, uses mise with nub to provision Node, installs dependencies from package-lock.json, and prepares WPT and Chromium. Tools and isolated mise state stay in the checkout's ignored .cache/ directory. No global installation or shell configuration is required.

If neither package manager is installed, run node scripts/setup.mjs. Add --tools-only to provision tools without installing dependencies. After switching branches, rerun setup to replace dependencies and restore the tools for that checkout. Setup needs Git, archive extraction tools, and network access.

The v3 prerelease uses the same setup commands and selects pnpm. For direct dependency installation, use npm install on master and pnpm install on v3. The common setup command avoids needing to remember that distinction.

💖 Support & Sponsoring

NWSAPI powers millions of builds, web scrapers, and testing suites every single day—including key infrastructure like jsdom.

Maintaining a zero-dependency, ultra-fast CSS engine that strictly adheres to evolving W3C Selectors specifications takes significant time, research, and testing. If NWSAPI helps your company save time, build features, or run reliable tests, please consider supporting its ongoing maintenance!

Why Sponsor?

  • For Developers: Keep the project actively maintained, bug-free, and ahead of new browser standard updates.
  • For Businesses: Ensure the stability and long-term security of a critical dependency in your toolchain.

💳 Ways to Contribute

Choose the platform that works best for you or your organization:

  • GitHub Sponsors: Monthly tier-based sponsorship directly on GitHub.
  • Open Collective: Transparent funding for open-source projects, ideal for corporate backing.
  • Patreon: Recurring monthly support with backer rewards.
  • Ko-fi: Fast one-time tips or recurring micro-donations.
  • Buy Me a Coffee: Quick, casual one-time donations.
  • Liberapay: Recurrent, zero-fee open-source support.
  • IssueHunt: Fund specific features or bug bounties.

Custom licensing, dedicated support, or priority bug fixes are also available for corporate sponsors. Feel free to reach out!

About

Fast CSS Selectors API Engine

Resources

Stars

141 stars

Watchers

2 watching

Forks

Releases

Sponsor this project

Packages

Used by

Contributors

Languages