{"id":13021,"library":"css-what","title":"css-what","description":"css-what is a robust and efficient JavaScript library designed for parsing CSS selectors into a structured, machine-readable format. It currently stands at version 8.0.0, which notably transitioned to an ESM-only distribution. The library's release cadence is somewhat irregular, with major versions introducing significant changes like ESM support and refinements to parsing logic. It provides a detailed tokenization of CSS selectors, representing elements, attributes, pseudos, and combinators as distinct objects with their respective properties. This detailed output makes it suitable for applications requiring granular analysis or manipulation of CSS selectors, such as styling engines, static analysis tools, or browser polyfills, differentiating it from simpler selector string processors by its deep structural representation.","status":"active","version":"8.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/fb55/css-what","tags":["javascript","typescript"],"install":[{"cmd":"npm install css-what","lang":"bash","label":"npm"},{"cmd":"yarn add css-what","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-what","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Since v8.0.0, css-what is ESM-only and does not support CommonJS `require()` syntax. Use namespace import.","wrong":"const CSSwhat = require('css-what');","symbol":"CSSwhat","correct":"import * as CSSwhat from 'css-what';"},{"note":"Prefer direct named imports for better tree-shaking and explicit dependency. No need to specify full path.","wrong":"import { parse } from 'css-what/dist/index.js';","symbol":"parse","correct":"import { parse } from 'css-what';"},{"note":"Used to convert a parsed selector array back into a CSS string.","symbol":"stringify","correct":"import { stringify } from 'css-what';"}],"quickstart":{"code":"import * as CSSwhat from \"css-what\";\n\n// Example 1: Basic selector parsing\nconst selector1 = \"div[data-id='123']:hover\";\nconst parsedSelector1 = CSSwhat.parse(selector1);\nconsole.log(`Parsed '${selector1}':`);\nconsole.log(JSON.stringify(parsedSelector1, null, 2));\n\n/*\nExpected output for selector1:\n[\n  [\n    { type: 'tag', name: 'div' },\n    { type: 'attribute', name: 'data-id', action: 'equals', value: '123', ignoreCase: null },\n    { type: 'pseudo', name: 'hover', data: null }\n  ]\n]\n*/\n\n// Example 2: Multiple selectors and stringification\nconst selector2 = \"a.link, #main > p\";\nconst parsedSelector2 = CSSwhat.parse(selector2);\nconsole.log(`\\nParsed '${selector2}':`);\nconsole.log(JSON.stringify(parsedSelector2, null, 2));\n\nconst stringifiedSelector2 = parsedSelector2.map(CSSwhat.stringify).join(\", \");\nconsole.log(`\\nStringified back to: '${stringifiedSelector2}'`);\n// Expected output: \"a.link, #main > p\"\n","lang":"typescript","description":"This quickstart demonstrates how to parse CSS selectors into a tokenized array and how to stringify them back to a CSS string, covering basic and compound selectors."},"warnings":[{"fix":"Migrate all import statements from `const pkg = require('pkg');` to `import * as pkg from 'pkg';` or `import { symbol } from 'pkg';`. Ensure your project is configured for ESM.","message":"css-what versions 8.0.0 and above are ESM-only, removing CommonJS support. This means `require()` statements will no longer work.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Refactor code to no longer pass an `options` object as a second argument to `CSSwhat.parse()`.","message":"In css-what v6.0.0, all options were removed from the `parse` function, simplifying its API. Code relying on an `options` object will fail.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Review code that relies on specific casing behavior for tags and attributes, or on the default `ignoreCase` logic. Adjust expectations or implement manual casing/case-insensitivity if required by your application.","message":"css-what v6.0.0 changed the default behavior of `ignoreCase`, and tags/attributes are no longer lowercased by default. Additionally, v5.0.0 introduced `ignoreCase` changes related to the `s` flag and HTML spec defaults, which could affect existing parsing logic.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Avoid `css-what` versions `6.2.0` and `6.2.1`. Prefer `6.1.0` or `6.2.2` if you need features from that range, or upgrade to a newer major version.","message":"Versions `6.2.0` and `6.2.1` of `css-what` contained breaking changes or regressions that were deemed unstable. Version `6.2.2` was released as a re-publish of `6.1.0` to revert these changes.","severity":"gotcha","affected_versions":"6.2.0, 6.2.1"},{"fix":"If encountering build errors, explicitly configure your bundler (e.g., Webpack, Rollup) to prefer CJS or ESM resolution, or upgrade to v8.0.0 which is pure ESM.","message":"While v6.0.0 still provided CommonJS, the introduction of ES6 module exports in this version could cause build system issues due to resolution conflicts or changes in how bundlers handle dual packages, even before the full ESM-only transition in v8.","severity":"breaking","affected_versions":">=6.0.0 <8.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `const CSSwhat = require(\"css-what\");` to `import * as CSSwhat from \"css-what\";` or `import { parse, stringify } from \"css-what\";`. Ensure your `package.json` specifies `\"type\": \"module\"` if applicable, or use a bundler correctly configured for ESM.","cause":"Attempting to use `require()` to import `css-what` in a project configured for ESM, or when using version 8.0.0 or later which is ESM-only.","error":"ERR_REQUIRE_ESM: require() of ES Module ... not supported."},{"fix":"Use a namespace import: `import * as CSSwhat from 'css-what';` then access functions like `CSSwhat.parse()`. Alternatively, use named imports directly: `import { parse, stringify } from 'css-what';`.","cause":"This usually occurs if `css-what` was imported as a default export (`import CSSwhat from 'css-what';`) when it primarily exposes named or namespace exports.","error":"TypeError: CSSwhat.parse is not a function"},{"fix":"The `CSSwhat.parse()` function returns a two-dimensional array of token objects. Ensure your code correctly iterates over this array structure, as shown in the quickstart example, rather than attempting to `JSON.parse` the raw output.","cause":"This error is not specific to `css-what` but might arise if the parsed output is incorrectly handled, for example, if a developer expects a string instead of the array of tokens that `parse` returns, and tries to `JSON.parse` it.","error":"TypeError: CSSwhat.parse(...) is not valid JSON"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}