cea298f8ea1fb2729e9dfdefc0293ad012a962bad3a2fbcffc2fd116c48c29d27cc999673d084594b68c4486222f0149b582deae76d6d85166a1ac419bc3ac 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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. Parses and stringifies CSS selectors.
  6. ``` js
  7. import Tokenizer from "css-selector-tokenizer";
  8. let input = "a#content.active > div::first-line [data-content], a:not(:visited)";
  9. Tokenizer.parse(input); // === expected
  10. let expected = {
  11. type: "selectors",
  12. nodes: [
  13. {
  14. type: "selector",
  15. nodes: [
  16. { type: "element", name: "a" },
  17. { type: "id", name: "content" },
  18. { type: "class", name: "active" },
  19. { type: "operator", operator: ">", before: " ", after: " " },
  20. { type: "element", name: "div" },
  21. { type: "pseudo-element", name: "first-line" },
  22. { type: "spacing", value: " " },
  23. { type: "attribute", content: "data-content" },
  24. ]
  25. },
  26. {
  27. type: "selector",
  28. nodes: [
  29. { type: "element", name: "a" },
  30. { type: "nested-pseudo-class", name: "not", nodes: [
  31. {
  32. type: "selector",
  33. nodes: [
  34. { type: "pseudo-class", name: "visited" }
  35. ]
  36. }
  37. ] }
  38. ],
  39. before: " "
  40. }
  41. ]
  42. }
  43. Tokenizer.stringify(expected) // === input
  44. // * => { type: "universal" }
  45. // foo|element = { type: "element", name: "element", namespace: "foo" }
  46. // *|* = { type: "universal", namespace: "*" }
  47. // :has(h1, h2) => { type: "nested-pseudo-class", name: "has", nodes: [
  48. // {
  49. // type: "selector",
  50. // nodes: [
  51. // { type: "element", name: "h1" }
  52. // ]
  53. // },
  54. // {
  55. // type: "selector",
  56. // nodes: [
  57. // { type: "element", name: "h2" }
  58. // ],
  59. // before: " "
  60. // }
  61. // ] }
  62. ```
  63. ## Building
  64. ```
  65. npm install
  66. npm test
  67. ```
  68. ## Development
  69. - `npm test -- -w` 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.