CSS Modules: css-selector-tokenizer

Parses and stringifies CSS selectors.

1import Tokenizer from "css-selector-tokenizer";
2
3let input = "a#content.active > div::first-line [data-content], a:not(:visited)";
4
5Tokenizer.parse(input); // === expected
6let expected = {
7  type: "selectors",
8  nodes: [
9    {
10      type: "selector",
11      nodes: [
12        { type: "element", name: "a" },
13        { type: "id", name: "content" },
14        { type: "class", name: "active" },
15        { type: "operator", operator: ">", before: " ", after: " " },
16        { type: "element", name: "div" },
17        { type: "pseudo-element", name: "first-line" },
18        { type: "spacing", value: " " },
19        { type: "attribute", content: "data-content" },
20      ]
21    },
22    {
23      type: "selector",
24      nodes: [
25        { type: "element", name: "a" },
26        { type: "nested-pseudo-class", name: "not", nodes: [
27          {
28            type: "selector",
29            nodes: [
30              { type: "pseudo-class", name: "visited" }
31            ]
32          }
33        ] }
34      ],
35      before: " "
36    }
37  ]
38}
39
40Tokenizer.stringify(expected) // === input
41
42// * => { type: "universal" }
43// foo|element = { type: "element", name: "element", namespace: "foo" }
44// *|* = { type: "universal", namespace: "*" }
45// :has(h1, h2) => { type: "nested-pseudo-class", name: "has", nodes: [
46//     {
47//       type: "selector",
48//       nodes: [
49//         { type: "element", name: "h1" }
50//       ]
51//     },
52//     {
53//       type: "selector",
54//       nodes: [
55//         { type: "element", name: "h2" }
56//       ],
57//       before: " "
58//     }
59//   ] }

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.