1 | # CSS Modules: css-selector-tokenizer
|
2 | [![Build Status](https://travis-ci.org/css-modules/css-selector-tokenizer.svg?branch=master)](https://travis-ci.org/css-modules/css-selector-tokenizer)
|
3 | [![coveralls.io](https://coveralls.io/repos/css-modules/css-selector-tokenizer/badge.svg?branch=master)](https://coveralls.io/r/css-modules/css-selector-tokenizer?branch=master)
|
4 | [![codecov.io](https://codecov.io/github/css-modules/css-selector-tokenizer/coverage.svg?branch=master)](https://codecov.io/github/css-modules/css-selector-tokenizer?branch=master)
|
5 |
|
6 | Parses and stringifies CSS selectors.
|
7 |
|
8 | ``` js
|
9 | import Tokenizer from "css-selector-tokenizer";
|
10 |
|
11 | let input = "a#content.active > div::first-line [data-content], a:not(:visited)";
|
12 |
|
13 | Tokenizer.parse(input); // === expected
|
14 | let expected = {
|
15 | type: "selectors",
|
16 | nodes: [
|
17 | {
|
18 | type: "selector",
|
19 | nodes: [
|
20 | { type: "element", name: "a" },
|
21 | { type: "id", name: "content" },
|
22 | { type: "class", name: "active" },
|
23 | { type: "operator", operator: ">", before: " ", after: " " },
|
24 | { type: "element", name: "div" },
|
25 | { type: "pseudo-element", name: "first-line" },
|
26 | { type: "spacing", value: " " },
|
27 | { type: "attribute", content: "data-content" },
|
28 | ]
|
29 | },
|
30 | {
|
31 | type: "selector",
|
32 | nodes: [
|
33 | { type: "element", name: "a" },
|
34 | { type: "nested-pseudo-class", name: "not", nodes: [
|
35 | {
|
36 | type: "selector",
|
37 | nodes: [
|
38 | { type: "pseudo-class", name: "visited" }
|
39 | ]
|
40 | }
|
41 | ] }
|
42 | ],
|
43 | before: " "
|
44 | }
|
45 | ]
|
46 | }
|
47 |
|
48 | Tokenizer.stringify(expected) // === input
|
49 |
|
50 | // * => { type: "universal" }
|
51 | // foo|element = { type: "element", name: "element", namespace: "foo" }
|
52 | // *|* = { type: "universal", namespace: "*" }
|
53 | // :has(h1, h2) => { type: "nested-pseudo-class", name: "has", nodes: [
|
54 | // {
|
55 | // type: "selector",
|
56 | // nodes: [
|
57 | // { type: "element", name: "h1" }
|
58 | // ]
|
59 | // },
|
60 | // {
|
61 | // type: "selector",
|
62 | // nodes: [
|
63 | // { type: "element", name: "h2" }
|
64 | // ],
|
65 | // before: " "
|
66 | // }
|
67 | // ] }
|
68 | ```
|
69 |
|
70 | ## Building
|
71 |
|
72 | ```
|
73 | npm install
|
74 | npm test
|
75 | ```
|
76 |
|
77 | ## Development
|
78 |
|
79 | - `npm test -- -w` will watch `lib` and `test` for changes and retest
|
80 |
|
81 | ## License
|
82 |
|
83 | MIT
|
84 |
|
85 | ## With thanks
|
86 |
|
87 | - Mark Dalgleish
|
88 | - Glen Maddern
|
89 | - Guy Bedford
|
90 |
|
91 | ---
|
92 | Tobias Koppers, 2015.
|