项目原始demo,不改动
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This repo is archived. You can view files and clone it, but cannot push or open issues/pull-requests.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624
  1. # API Documentation
  2. *Please use only this documented API when working with the parser. Methods
  3. not documented here are subject to change at any point.*
  4. ## `parser` function
  5. This is the module's main entry point.
  6. ```js
  7. var parser = require('postcss-selector-parser');
  8. ```
  9. ### `parser([transform])`
  10. Creates a new `processor` instance
  11. ```js
  12. var processor = parser();
  13. // or, with optional transform function
  14. var transform = function (selectors) {
  15. selectors.eachUniversal(function (selector) {
  16. selector.remove();
  17. });
  18. };
  19. var processor = parser(transform)
  20. // Example
  21. var result = processor.process('*.class').result;
  22. // => .class
  23. ```
  24. [See processor documentation](#processor)
  25. Arguments:
  26. * `transform (function)`: Provide a function to work with the parsed AST.
  27. ### `parser.attribute([props])`
  28. Creates a new attribute selector.
  29. ```js
  30. parser.attribute({attribute: 'href'});
  31. // => [href]
  32. ```
  33. Arguments:
  34. * `props (object)`: The new node's properties.
  35. ### `parser.className([props])`
  36. Creates a new class selector.
  37. ```js
  38. parser.className({value: 'button'});
  39. // => .button
  40. ```
  41. Arguments:
  42. * `props (object)`: The new node's properties.
  43. ### `parser.combinator([props])`
  44. Creates a new selector combinator.
  45. ```js
  46. parser.combinator({value: '+'});
  47. // => +
  48. ```
  49. Arguments:
  50. * `props (object)`: The new node's properties.
  51. ### `parser.comment([props])`
  52. Creates a new comment.
  53. ```js
  54. parser.comment({value: '/* Affirmative, Dave. I read you. */'});
  55. // => /* Affirmative, Dave. I read you. */
  56. ```
  57. Arguments:
  58. * `props (object)`: The new node's properties.
  59. ### `parser.id([props])`
  60. Creates a new id selector.
  61. ```js
  62. parser.id({value: 'search'});
  63. // => #search
  64. ```
  65. Arguments:
  66. * `props (object)`: The new node's properties.
  67. ### `parser.nesting([props])`
  68. Creates a new nesting selector.
  69. ```js
  70. parser.nesting();
  71. // => &
  72. ```
  73. Arguments:
  74. * `props (object)`: The new node's properties.
  75. ### `parser.pseudo([props])`
  76. Creates a new pseudo selector.
  77. ```js
  78. parser.pseudo({value: '::before'});
  79. // => ::before
  80. ```
  81. Arguments:
  82. * `props (object)`: The new node's properties.
  83. ### `parser.root([props])`
  84. Creates a new root node.
  85. ```js
  86. parser.root();
  87. // => (empty)
  88. ```
  89. Arguments:
  90. * `props (object)`: The new node's properties.
  91. ### `parser.selector([props])`
  92. Creates a new selector node.
  93. ```js
  94. parser.selector();
  95. // => (empty)
  96. ```
  97. Arguments:
  98. * `props (object)`: The new node's properties.
  99. ### `parser.string([props])`
  100. Creates a new string node.
  101. ```js
  102. parser.string();
  103. // => (empty)
  104. ```
  105. Arguments:
  106. * `props (object)`: The new node's properties.
  107. ### `parser.tag([props])`
  108. Creates a new tag selector.
  109. ```js
  110. parser.tag({value: 'button'});
  111. // => button
  112. ```
  113. Arguments:
  114. * `props (object)`: The new node's properties.
  115. ### `parser.universal([props])`
  116. Creates a new universal selector.
  117. ```js
  118. parser.universal();
  119. // => *
  120. ```
  121. Arguments:
  122. * `props (object)`: The new node's properties.
  123. ## Node types
  124. ### `node.type`
  125. A string representation of the selector type. It can be one of the following;
  126. `attribute`, `class`, `combinator`, `comment`, `id`, `nesting`, `pseudo`,
  127. `root`, `selector`, `string`, `tag`, or `universal`. Note that for convenience,
  128. these constants are exposed on the main `parser` as uppercased keys. So for
  129. example you can get `id` by querying `parser.ID`.
  130. ```js
  131. parser.attribute({attribute: 'href'}).type;
  132. // => 'attribute'
  133. ```
  134. ### `node.parent`
  135. Returns the parent node.
  136. ```js
  137. root.nodes[0].parent === root;
  138. ```
  139. ### `node.toString()`, `String(node)`, or `'' + node`
  140. Returns a string representation of the node.
  141. ```js
  142. var id = parser.id({value: 'search'});
  143. console.log(String(id));
  144. // => #search
  145. ```
  146. ### `node.next()` & `node.prev()`
  147. Returns the next/previous child of the parent node.
  148. ```js
  149. var next = id.next();
  150. if (next && next.type !== 'combinator') {
  151. throw new Error('Qualified IDs are not allowed!');
  152. }
  153. ```
  154. ### `node.replaceWith(node)`
  155. Replace a node with another.
  156. ```js
  157. var attr = selectors.first.first;
  158. var className = parser.className({value: 'test'});
  159. attr.replaceWith(className);
  160. ```
  161. Arguments:
  162. * `node`: The node to substitute the original with.
  163. ### `node.remove()`
  164. Removes the node from its parent node.
  165. ```js
  166. if (node.type === 'id') {
  167. node.remove();
  168. }
  169. ```
  170. ### `node.clone()`
  171. Returns a copy of a node, detached from any parent containers that the
  172. original might have had.
  173. ```js
  174. var cloned = parser.id({value: 'search'});
  175. String(cloned);
  176. // => #search
  177. ```
  178. ### `node.spaces`
  179. Extra whitespaces around the node will be moved into `node.spaces.before` and
  180. `node.spaces.after`. So for example, these spaces will be moved as they have
  181. no semantic meaning:
  182. ```css
  183. h1 , h2 {}
  184. ```
  185. However, *combinating* spaces will form a `combinator` node:
  186. ```css
  187. h1 h2 {}
  188. ```
  189. A `combinator` node may only have the `spaces` property set if the combinator
  190. value is a non-whitespace character, such as `+`, `~` or `>`. Otherwise, the
  191. combinator value will contain all of the spaces between selectors.
  192. ### `node.source`
  193. An object describing the node's start/end, line/column source position.
  194. Within the following CSS, the `.bar` class node ...
  195. ```css
  196. .foo,
  197. .bar {}
  198. ```
  199. ... will contain the following `source` object.
  200. ```js
  201. source: {
  202. start: {
  203. line: 2,
  204. column: 3
  205. },
  206. end: {
  207. line: 2,
  208. column: 6
  209. }
  210. }
  211. ```
  212. ### `node.sourceIndex`
  213. The zero-based index of the node within the original source string.
  214. Within the following CSS, the `.baz` class node will have a `sourceIndex` of `12`.
  215. ```css
  216. .foo, .bar, .baz {}
  217. ```
  218. ## Container types
  219. The `root`, `selector`, and `pseudo` nodes have some helper methods for working
  220. with their children.
  221. ### `container.nodes`
  222. An array of the container's children.
  223. ```js
  224. // Input: h1 h2
  225. selectors.at(0).nodes.length // => 3
  226. selectors.at(0).nodes[0].value // => 'h1'
  227. selectors.at(0).nodes[1].value // => ' '
  228. ```
  229. ### `container.first` & `container.last`
  230. The first/last child of the container.
  231. ```js
  232. selector.first === selector.nodes[0];
  233. selector.last === selector.nodes[selector.nodes.length - 1];
  234. ```
  235. ### `container.at(index)`
  236. Returns the node at position `index`.
  237. ```js
  238. selector.at(0) === selector.first;
  239. selector.at(0) === selector.nodes[0];
  240. ```
  241. Arguments:
  242. * `index`: The index of the node to return.
  243. ### `container.index(node)`
  244. Return the index of the node within its container.
  245. ```js
  246. selector.index(selector.nodes[2]) // => 2
  247. ```
  248. Arguments:
  249. * `node`: A node within the current container.
  250. ### `container.length`
  251. Proxy to the length of the container's nodes.
  252. ```js
  253. container.length === container.nodes.length
  254. ```
  255. ### `container` Array iterators
  256. The container class provides proxies to certain Array methods; these are:
  257. * `container.map === container.nodes.map`
  258. * `container.reduce === container.nodes.reduce`
  259. * `container.every === container.nodes.every`
  260. * `container.some === container.nodes.some`
  261. * `container.filter === container.nodes.filter`
  262. * `container.sort === container.nodes.sort`
  263. Note that these methods only work on a container's immediate children; recursive
  264. iteration is provided by `container.walk`.
  265. ### `container.each(callback)`
  266. Iterate the container's immediate children, calling `callback` for each child.
  267. You may return `false` within the callback to break the iteration.
  268. ```js
  269. var className;
  270. selectors.each(function (selector, index) {
  271. if (selector.type === 'class') {
  272. className = selector.value;
  273. return false;
  274. }
  275. });
  276. ```
  277. Note that unlike `Array#forEach()`, this iterator is safe to use whilst adding
  278. or removing nodes from the container.
  279. Arguments:
  280. * `callback (function)`: A function to call for each node, which receives `node`
  281. and `index` arguments.
  282. ### `container.walk(callback)`
  283. Like `container#each`, but will also iterate child nodes as long as they are
  284. `container` types.
  285. ```js
  286. selectors.walk(function (selector, index) {
  287. // all nodes
  288. });
  289. ```
  290. Arguments:
  291. * `callback (function)`: A function to call for each node, which receives `node`
  292. and `index` arguments.
  293. This iterator is safe to use whilst mutating `container.nodes`,
  294. like `container#each`.
  295. ### `container.walk` proxies
  296. The container class provides proxy methods for iterating over types of nodes,
  297. so that it is easier to write modules that target specific selectors. Those
  298. methods are:
  299. * `container.walkAttributes`
  300. * `container.walkClasses`
  301. * `container.walkCombinators`
  302. * `container.walkComments`
  303. * `container.walkIds`
  304. * `container.walkNesting`
  305. * `container.walkPseudos`
  306. * `container.walkTags`
  307. * `container.walkUniversals`
  308. ### `container.split(callback)`
  309. This method allows you to split a group of nodes by returning `true` from
  310. a callback. It returns an array of arrays, where each inner array corresponds
  311. to the groups that you created via the callback.
  312. ```js
  313. // (input) => h1 h2>>h3
  314. var list = selectors.first.split((selector) => {
  315. return selector.type === 'combinator';
  316. });
  317. // (node values) => [['h1', ' '], ['h2', '>>'], ['h3']]
  318. ```
  319. Arguments:
  320. * `callback (function)`: A function to call for each node, which receives `node`
  321. as an argument.
  322. ### `container.prepend(node)` & `container.append(node)`
  323. Add a node to the start/end of the container. Note that doing so will set
  324. the parent property of the node to this container.
  325. ```js
  326. var id = parser.id({value: 'search'});
  327. selector.append(id);
  328. ```
  329. Arguments:
  330. * `node`: The node to add.
  331. ### `container.insertBefore(old, new)` & `container.insertAfter(old, new)`
  332. Add a node before or after an existing node in a container:
  333. ```js
  334. selectors.walk(function (selector) {
  335. if (selector.type !== 'class') {
  336. var className = parser.className({value: 'theme-name'});
  337. selector.parent.insertAfter(selector, className);
  338. }
  339. });
  340. ```
  341. Arguments:
  342. * `old`: The existing node in the container.
  343. * `new`: The new node to add before/after the existing node.
  344. ### `container.removeChild(node)`
  345. Remove the node from the container. Note that you can also use
  346. `node.remove()` if you would like to remove just a single node.
  347. ```js
  348. selector.length // => 2
  349. selector.remove(id)
  350. selector.length // => 1;
  351. id.parent // undefined
  352. ```
  353. Arguments:
  354. * `node`: The node to remove.
  355. ### `container.removeAll()` or `container.empty()`
  356. Remove all children from the container.
  357. ```js
  358. selector.removeAll();
  359. selector.length // => 0
  360. ```
  361. ## Root nodes
  362. A root node represents a comma separated list of selectors. Indeed, all
  363. a root's `toString()` method does is join its selector children with a ','.
  364. Other than this, it has no special functionality and acts like a container.
  365. ### `root.trailingComma`
  366. This will be set to `true` if the input has a trailing comma, in order to
  367. support parsing of legacy CSS hacks.
  368. ## Selector nodes
  369. A selector node represents a single compound selector. For example, this
  370. selector string `h1 h2 h3, [href] > p`, is represented as two selector nodes.
  371. It has no special functionality of its own.
  372. ## Pseudo nodes
  373. A pseudo selector extends a container node; if it has any parameters of its
  374. own (such as `h1:not(h2, h3)`), they will be its children. Note that the pseudo
  375. `value` will always contain the colons preceding the pseudo identifier. This
  376. is so that both `:before` and `::before` are properly represented in the AST.
  377. ## Attribute nodes
  378. ### `attribute.quoted`
  379. Returns `true` if the attribute's value is wrapped in quotation marks, false if it is not.
  380. Remains `undefined` if there is no attribute value.
  381. ```css
  382. [href=foo] /* false */
  383. [href='foo'] /* true */
  384. [href="foo"] /* true */
  385. [href] /* undefined */
  386. ```
  387. ### `attribute.raws.unquoted`
  388. Returns the unquoted content of the attribute's value.
  389. Remains `undefined` if there is no attribute value.
  390. ```css
  391. [href=foo] /* foo */
  392. [href='foo'] /* foo */
  393. [href="foo"] /* foo */
  394. [href] /* undefined */
  395. ```
  396. ### `attribute.raws.insensitive`
  397. If there is an `i` specifying case insensitivity, returns that `i` along with the whitespace
  398. around it.
  399. ```css
  400. [id=Bar i ] /* " i " */
  401. [id=Bar i ] /* " i " */
  402. ```
  403. ## `processor`
  404. ### `process(cssText, [options])`
  405. Processes the `cssText`, returning the parsed output
  406. ```js
  407. var processor = parser();
  408. var result = processor.process(' .class').result;
  409. // => .class
  410. // To have the parser normalize whitespace values, utilize the options
  411. var result = processor.process(' .class ', {lossless: false}).result;
  412. // => .class
  413. ```
  414. Arguments:
  415. * `cssText (string)`: The css to be parsed.
  416. * `[options] (object)`: Process options
  417. Options:
  418. * `lossless (boolean)`: false to normalize the selector whitespace, defaults to true