css-selector-tokenizer

What is css-selector-tokenizer?

The css-selector-tokenizer package is a utility for parsing and tokenizing CSS selectors. It allows developers to break down complex CSS selector strings into manageable, structured tokens, facilitating easier manipulation and analysis of CSS selectors in JavaScript.

What are css-selector-tokenizer's main functionalities?

Parsing CSS selectors

This feature allows the parsing of CSS selector strings into a structured format. The code sample demonstrates how to parse a complex CSS selector involving class, id, and attribute selectors into a tokenized object.

const tokenizer = require('css-selector-tokenizer');

const parsedSelector = tokenizer.parse('.class > #id[attr=value]');
console.log(parsedSelector);

Stringifying parsed tokens

This feature converts tokenized selector objects back into string format. The code sample shows how to take a tokenized object representing a simple class selector and convert it back into a standard CSS selector string.

const tokenizer = require('css-selector-tokenizer');

const tokens = {
  type: 'selectors',
  nodes: [{
    type: 'selector',
    nodes: [{
      type: 'class',
      name: 'example'
    }]
  }]
};
const selectorString = tokenizer.stringify(tokens);
console.log(selectorString);

Other packages similar to css-selector-tokenizer

postcss-selector-parser

This package is similar to css-selector-tokenizer but is built on top of PostCSS, offering a more robust API for manipulating selectors within the PostCSS ecosystem. It provides more detailed handling of pseudo-classes and pseudo-elements compared to css-selector-tokenizer.

css-what

css-what is another CSS selector parsing library that translates selectors into an abstract syntax tree (AST). Unlike css-selector-tokenizer, css-what focuses more on the parsing aspect without providing functionalities for stringifying the parsed output.

README

CSS Modules: css-selector-tokenizer

Parses and stringifies CSS selectors.

import Tokenizer from "css-selector-tokenizer";

let input = "a#content.active > div::first-line [data-content], a:not(:visited)";

Tokenizer.parse(input); // === expected
let expected = {
  type: "selectors",
  nodes: [
    {
      type: "selector",
      nodes: [
        { type: "element", name: "a" },
        { type: "id", name: "content" },
        { type: "class", name: "active" },
        { type: "operator", operator: ">", before: " ", after: " " },
        { type: "element", name: "div" },
        { type: "pseudo-element", name: "first-line" },
        { type: "spacing", value: " " },
        { type: "attribute", content: "data-content" },
      ]
    },
    {
      type: "selector",
      nodes: [
        { type: "element", name: "a" },
        { type: "nested-pseudo-class", name: "not", nodes: [
          {
            type: "selector",
            nodes: [
              { type: "pseudo-class", name: "visited" }
            ]
          }
        ] }
      ],
      before: " "
    }
  ]
}

Tokenizer.stringify(expected) // === input

// * => { type: "universal" }
// foo|element = { type: "element", name: "element", namespace: "foo" }
// *|* = { type: "universal", namespace: "*" }
// :has(h1, h2) => { type: "nested-pseudo-class", name: "has", nodes: [
//     {
//       type: "selector",
//       nodes: [
//         { type: "element", name: "h1" }
//       ]
//     },
//     {
//       type: "selector",
//       nodes: [
//         { type: "element", name: "h2" }
//       ],
//       before: " "
//     }
//   ] }

Building

npm install
npm test

Development

• npm test -- -w will watch lib and test for changes and retest

License

MIT

With thanks

• Mark Dalgleish
• Glen Maddern
• Guy Bedford

---

Tobias Koppers, 2015.