Slick CSS Selector Engine

Common errors

• TypeError: slick.search is not a function

  cause Attempting to call `slick.search` after an incorrect ESM import, or if `slick` was not properly assigned the module's export.
  fix Ensure you are importing the module correctly using `const slick = require('slick');` in a CommonJS environment.

• ReferenceError: slick is not defined

  cause Trying to access the `slick` object in a Node.js environment without explicitly importing it first, or assuming it's a global variable.
  fix Add `const slick = require('slick');` at the top of your JavaScript file to properly import and define the `slick` object.

• SyntaxError: Named export 'search' not found...

  cause Attempting to use named imports (e.g., `import { search } from 'slick'`) from the `slick` module. Slick is a CommonJS module that exports a single object, not named exports.
  fix Import the entire module as a single object using `const slick = require('slick');` and then access methods as properties, e.g., `slick.search()`.

Warnings

• breaking The `slick` project appears to be abandoned, with no updates or commits in over nine years. This means there will be no bug fixes, performance improvements, or security patches for any discovered vulnerabilities.
  Fix: Consider migrating to modern, actively maintained CSS selector engines or utilizing native DOM APIs like `document.querySelector` and `document.querySelectorAll`, which are widely supported, performant, and secure.
• gotcha Slick is a CommonJS-only module and does not natively support ECMAScript Modules (ESM) `import` statements. Attempting to use `import` will likely result in module resolution errors or undefined behavior.
  Fix: Always use `const slick = require('slick')` for module loading in Node.js environments. If you must use it in an ESM context, you might need a transpilation step or a CommonJS wrapper.
• gotcha Due to its age, `slick` may not fully support modern CSS selectors (e.g., `:is()`, `:where()`, `:has()`) or might have compatibility issues with newer browser features or edge cases. Its performance might also lag behind native browser implementations.
  Fix: Thoroughly test `slick` in your target browser environments for selector compatibility and performance. For modern web development, relying on native `querySelector` and `querySelectorAll` is generally recommended.
• gotcha The `slick` package does not provide TypeScript declaration files (`.d.ts`). Using it in a TypeScript project will result in type errors and lack of autocompletion without manual type declarations.
  Fix: You will need to create your own `slick.d.ts` declaration file to provide type information for the module and its methods if you are using TypeScript.

Install

• npm install slick npm
• yarn add slick yarn
• pnpm add slick pnpm

Imports

• slick
  wrong:

  import slick from 'slick'

  correct:

  const slick = require('slick')

  The package is a CommonJS module and does not officially support ESM `import` statements. The entire module's functionality is exposed via a single `slick` object.
• search
  wrong:

  import { search } from 'slick'

  correct:

  const slick = require('slick'); slick.search(...)

  The `search` function is a method on the `slick` object exported by the CommonJS module. It is not available as a named ESM export.
• parse
  wrong:

  import { parse } from 'slick'

  correct:

  const slick = require('slick'); slick.parse(...)

  The `parse` function is a method on the `slick` object exported by the CommonJS module. It is not available as a named ESM export.

Quickstart

This quickstart demonstrates how to use Slick in a Node.js environment. It shows how to initialize `slick` using CommonJS `require`, parse a CSS selector string into an object, and then use the `search`, `find`, and `matches` methods to query a simulated DOM structure provided by `jsdom`. The `jsdom` library is used here solely for demonstration purposes to create a browser-like DOM context within Node.js, and is not a dependency of `slick` itself.

const { JSDOM } = require('jsdom');
const slick = require('slick');

// Setup a simple DOM environment for demonstration
const dom = new JSDOM(`
  <!DOCTYPE html>
  <html>
  <body>
    <div id="container">
      <ul class="list">
        <li>Item 1</li>
        <li class="active">Item 2</li>
      </ul>
      <p>A paragraph</p>
      <ul class="list">
        <li>Another Item</li>
      </ul>
    </div>
  </body>
  </html>
`);
const document = dom.window.document;

console.log('--- Using slick.parse ---\n');
const selectorObject = slick.parse('ul.list > li.active');
console.log('Parsed Selector Object:', JSON.stringify(selectorObject, null, 2));

console.log('\n--- Using slick.search ---\n');
const foundElements = slick.search('ul.list > li.active', document);
console.log('Found Elements:', foundElements.map(el => el.outerHTML));

console.log('\n--- Using slick.find ---\n');
const firstFoundElement = slick.find('li:first-child', document);
console.log('First Found Element:', firstFoundElement ? firstFoundElement.outerHTML : 'None');

console.log('\n--- Using slick.matches ---\n');
const targetElement = document.querySelector('.active');
const matches = slick.matches(targetElement, 'li.active');
console.log(`Does <li class="active"> match 'li.active'? ${matches}`);