You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.3 KiB
93 lines
2.3 KiB
4 years ago
|
# CSS Modules: css-selector-tokenizer
|
||
|
|
[](https://travis-ci.org/css-modules/css-selector-tokenizer)
|
||
|
|
[](https://coveralls.io/r/css-modules/css-selector-tokenizer?branch=master)
|
||
|
|
[](https://codecov.io/github/css-modules/css-selector-tokenizer?branch=master)
|
||
|
|
|
||
|
|
Parses and stringifies CSS selectors.
|
||
|
|
|
||
|
|
``` js
|
||
|
|
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.
|