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.

94 lines
2.3 KiB

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