css-selector-tokenizer

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.

Similar packages

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.