container.d.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. import Node, { ChildNode, NodeProps, ChildProps } from './node.js'
  2. import Declaration from './declaration.js'
  3. import Comment from './comment.js'
  4. import AtRule from './at-rule.js'
  5. import Rule from './rule.js'
  6. declare namespace Container {
  7. export interface ValueOptions {
  8. /**
  9. * An array of property names.
  10. */
  11. props?: string[]
  12. /**
  13. * String that’s used to narrow down values and speed up the regexp search.
  14. */
  15. fast?: string
  16. }
  17. export interface ContainerProps extends NodeProps {
  18. nodes?: (ChildNode | ChildProps)[]
  19. }
  20. // eslint-disable-next-line @typescript-eslint/no-use-before-define
  21. export { Container_ as default }
  22. }
  23. /**
  24. * The `Root`, `AtRule`, and `Rule` container nodes
  25. * inherit some common methods to help work with their children.
  26. *
  27. * Note that all containers can store any content. If you write a rule inside
  28. * a rule, PostCSS will parse it.
  29. */
  30. declare abstract class Container_<
  31. Child extends Node = ChildNode
  32. > extends Node {
  33. /**
  34. * An array containing the container’s children.
  35. *
  36. * ```js
  37. * const root = postcss.parse('a { color: black }')
  38. * root.nodes.length //=> 1
  39. * root.nodes[0].selector //=> 'a'
  40. * root.nodes[0].nodes[0].prop //=> 'color'
  41. * ```
  42. */
  43. nodes: Child[]
  44. /**
  45. * The container’s first child.
  46. *
  47. * ```js
  48. * rule.first === rules.nodes[0]
  49. * ```
  50. */
  51. get first(): Child | undefined
  52. /**
  53. * The container’s last child.
  54. *
  55. * ```js
  56. * rule.last === rule.nodes[rule.nodes.length - 1]
  57. * ```
  58. */
  59. get last(): Child | undefined
  60. /**
  61. * Iterates through the container’s immediate children,
  62. * calling `callback` for each child.
  63. *
  64. * Returning `false` in the callback will break iteration.
  65. *
  66. * This method only iterates through the container’s immediate children.
  67. * If you need to recursively iterate through all the container’s descendant
  68. * nodes, use `Container#walk`.
  69. *
  70. * Unlike the for `{}`-cycle or `Array#forEach` this iterator is safe
  71. * if you are mutating the array of child nodes during iteration.
  72. * PostCSS will adjust the current index to match the mutations.
  73. *
  74. * ```js
  75. * const root = postcss.parse('a { color: black; z-index: 1 }')
  76. * const rule = root.first
  77. *
  78. * for (const decl of rule.nodes) {
  79. * decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  80. * // Cycle will be infinite, because cloneBefore moves the current node
  81. * // to the next index
  82. * }
  83. *
  84. * rule.each(decl => {
  85. * decl.cloneBefore({ prop: '-webkit-' + decl.prop })
  86. * // Will be executed only for color and z-index
  87. * })
  88. * ```
  89. *
  90. * @param callback Iterator receives each node and index.
  91. * @return Returns `false` if iteration was broke.
  92. */
  93. each(
  94. callback: (node: Child, index: number) => false | void
  95. ): false | undefined
  96. /**
  97. * Traverses the container’s descendant nodes, calling callback
  98. * for each node.
  99. *
  100. * Like container.each(), this method is safe to use
  101. * if you are mutating arrays during iteration.
  102. *
  103. * If you only need to iterate through the container’s immediate children,
  104. * use `Container#each`.
  105. *
  106. * ```js
  107. * root.walk(node => {
  108. * // Traverses all descendant nodes.
  109. * })
  110. * ```
  111. *
  112. * @param callback Iterator receives each node and index.
  113. * @return Returns `false` if iteration was broke.
  114. */
  115. walk(
  116. callback: (node: ChildNode, index: number) => false | void
  117. ): false | undefined
  118. /**
  119. * Traverses the container’s descendant nodes, calling callback
  120. * for each declaration node.
  121. *
  122. * If you pass a filter, iteration will only happen over declarations
  123. * with matching properties.
  124. *
  125. * ```js
  126. * root.walkDecls(decl => {
  127. * checkPropertySupport(decl.prop)
  128. * })
  129. *
  130. * root.walkDecls('border-radius', decl => {
  131. * decl.remove()
  132. * })
  133. *
  134. * root.walkDecls(/^background/, decl => {
  135. * decl.value = takeFirstColorFromGradient(decl.value)
  136. * })
  137. * ```
  138. *
  139. * Like `Container#each`, this method is safe
  140. * to use if you are mutating arrays during iteration.
  141. *
  142. * @param prop String or regular expression to filter declarations
  143. * by property name.
  144. * @param callback Iterator receives each node and index.
  145. * @return Returns `false` if iteration was broke.
  146. */
  147. walkDecls(
  148. propFilter: string | RegExp,
  149. callback: (decl: Declaration, index: number) => false | void
  150. ): false | undefined
  151. walkDecls(
  152. callback: (decl: Declaration, index: number) => false | void
  153. ): false | undefined
  154. /**
  155. * Traverses the container’s descendant nodes, calling callback
  156. * for each rule node.
  157. *
  158. * If you pass a filter, iteration will only happen over rules
  159. * with matching selectors.
  160. *
  161. * Like `Container#each`, this method is safe
  162. * to use if you are mutating arrays during iteration.
  163. *
  164. * ```js
  165. * const selectors = []
  166. * root.walkRules(rule => {
  167. * selectors.push(rule.selector)
  168. * })
  169. * console.log(`Your CSS uses ${ selectors.length } selectors`)
  170. * ```
  171. *
  172. * @param selector String or regular expression to filter rules by selector.
  173. * @param callback Iterator receives each node and index.
  174. * @return Returns `false` if iteration was broke.
  175. */
  176. walkRules(
  177. selectorFilter: string | RegExp,
  178. callback: (rule: Rule, index: number) => false | void
  179. ): false | undefined
  180. walkRules(
  181. callback: (rule: Rule, index: number) => false | void
  182. ): false | undefined
  183. /**
  184. * Traverses the container’s descendant nodes, calling callback
  185. * for each at-rule node.
  186. *
  187. * If you pass a filter, iteration will only happen over at-rules
  188. * that have matching names.
  189. *
  190. * Like `Container#each`, this method is safe
  191. * to use if you are mutating arrays during iteration.
  192. *
  193. * ```js
  194. * root.walkAtRules(rule => {
  195. * if (isOld(rule.name)) rule.remove()
  196. * })
  197. *
  198. * let first = false
  199. * root.walkAtRules('charset', rule => {
  200. * if (!first) {
  201. * first = true
  202. * } else {
  203. * rule.remove()
  204. * }
  205. * })
  206. * ```
  207. *
  208. * @param name String or regular expression to filter at-rules by name.
  209. * @param callback Iterator receives each node and index.
  210. * @return Returns `false` if iteration was broke.
  211. */
  212. walkAtRules(
  213. nameFilter: string | RegExp,
  214. callback: (atRule: AtRule, index: number) => false | void
  215. ): false | undefined
  216. walkAtRules(
  217. callback: (atRule: AtRule, index: number) => false | void
  218. ): false | undefined
  219. /**
  220. * Traverses the container’s descendant nodes, calling callback
  221. * for each comment node.
  222. *
  223. * Like `Container#each`, this method is safe
  224. * to use if you are mutating arrays during iteration.
  225. *
  226. * ```js
  227. * root.walkComments(comment => {
  228. * comment.remove()
  229. * })
  230. * ```
  231. *
  232. * @param callback Iterator receives each node and index.
  233. * @return Returns `false` if iteration was broke.
  234. */
  235. walkComments(
  236. callback: (comment: Comment, indexed: number) => false | void
  237. ): false | undefined
  238. walkComments(
  239. callback: (comment: Comment, indexed: number) => false | void
  240. ): false | undefined
  241. /**
  242. * Inserts new nodes to the end of the container.
  243. *
  244. * ```js
  245. * const decl1 = new Declaration({ prop: 'color', value: 'black' })
  246. * const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
  247. * rule.append(decl1, decl2)
  248. *
  249. * root.append({ name: 'charset', params: '"UTF-8"' }) // at-rule
  250. * root.append({ selector: 'a' }) // rule
  251. * rule.append({ prop: 'color', value: 'black' }) // declaration
  252. * rule.append({ text: 'Comment' }) // comment
  253. *
  254. * root.append('a {}')
  255. * root.first.append('color: black; z-index: 1')
  256. * ```
  257. *
  258. * @param nodes New nodes.
  259. * @return This node for methods chain.
  260. */
  261. append(
  262. ...nodes: (Node | Node[] | ChildProps | ChildProps[] | string | string[])[]
  263. ): this
  264. /**
  265. * Inserts new nodes to the start of the container.
  266. *
  267. * ```js
  268. * const decl1 = new Declaration({ prop: 'color', value: 'black' })
  269. * const decl2 = new Declaration({ prop: 'background-color', value: 'white' })
  270. * rule.prepend(decl1, decl2)
  271. *
  272. * root.append({ name: 'charset', params: '"UTF-8"' }) // at-rule
  273. * root.append({ selector: 'a' }) // rule
  274. * rule.append({ prop: 'color', value: 'black' }) // declaration
  275. * rule.append({ text: 'Comment' }) // comment
  276. *
  277. * root.append('a {}')
  278. * root.first.append('color: black; z-index: 1')
  279. * ```
  280. *
  281. * @param nodes New nodes.
  282. * @return This node for methods chain.
  283. */
  284. prepend(
  285. ...nodes: (Node | Node[] | ChildProps | ChildProps[] | string | string[])[]
  286. ): this
  287. /**
  288. * Add child to the end of the node.
  289. *
  290. * ```js
  291. * rule.push(new Declaration({ prop: 'color', value: 'black' }))
  292. * ```
  293. *
  294. * @param child New node.
  295. * @return This node for methods chain.
  296. */
  297. push(child: Child): this
  298. /**
  299. * Insert new node before old node within the container.
  300. *
  301. * ```js
  302. * rule.insertBefore(decl, decl.clone({ prop: '-webkit-' + decl.prop }))
  303. * ```
  304. *
  305. * @param oldNode Child or child’s index.
  306. * @param newNode New node.
  307. * @return This node for methods chain.
  308. */
  309. insertBefore(
  310. oldNode: Child | number,
  311. newNode: Child | ChildProps | string | Child[] | ChildProps[] | string[]
  312. ): this
  313. /**
  314. * Insert new node after old node within the container.
  315. *
  316. * @param oldNode Child or child’s index.
  317. * @param newNode New node.
  318. * @return This node for methods chain.
  319. */
  320. insertAfter(
  321. oldNode: Child | number,
  322. newNode: Child | ChildProps | string | Child[] | ChildProps[] | string[]
  323. ): this
  324. /**
  325. * Removes node from the container and cleans the parent properties
  326. * from the node and its children.
  327. *
  328. * ```js
  329. * rule.nodes.length //=> 5
  330. * rule.removeChild(decl)
  331. * rule.nodes.length //=> 4
  332. * decl.parent //=> undefined
  333. * ```
  334. *
  335. * @param child Child or child’s index.
  336. * @return This node for methods chain.
  337. */
  338. removeChild(child: Child | number): this
  339. /**
  340. * Removes all children from the container
  341. * and cleans their parent properties.
  342. *
  343. * ```js
  344. * rule.removeAll()
  345. * rule.nodes.length //=> 0
  346. * ```
  347. *
  348. * @return This node for methods chain.
  349. */
  350. removeAll(): this
  351. /**
  352. * Passes all declaration values within the container that match pattern
  353. * through callback, replacing those values with the returned result
  354. * of callback.
  355. *
  356. * This method is useful if you are using a custom unit or function
  357. * and need to iterate through all values.
  358. *
  359. * ```js
  360. * root.replaceValues(/\d+rem/, { fast: 'rem' }, string => {
  361. * return 15 * parseInt(string) + 'px'
  362. * })
  363. * ```
  364. *
  365. * @param pattern Replace pattern.
  366. * @param {object} opts Options to speed up the search.
  367. * @param callback String to replace pattern or callback
  368. * that returns a new value. The callback
  369. * will receive the same arguments
  370. * as those passed to a function parameter
  371. * of `String#replace`.
  372. * @return This node for methods chain.
  373. */
  374. replaceValues(
  375. pattern: string | RegExp,
  376. options: Container.ValueOptions,
  377. replaced: string | { (substring: string, ...args: any[]): string }
  378. ): this
  379. replaceValues(
  380. pattern: string | RegExp,
  381. replaced: string | { (substring: string, ...args: any[]): string }
  382. ): this
  383. /**
  384. * Returns `true` if callback returns `true`
  385. * for all of the container’s children.
  386. *
  387. * ```js
  388. * const noPrefixes = rule.every(i => i.prop[0] !== '-')
  389. * ```
  390. *
  391. * @param condition Iterator returns true or false.
  392. * @return Is every child pass condition.
  393. */
  394. every(
  395. condition: (node: Child, index: number, nodes: Child[]) => boolean
  396. ): boolean
  397. /**
  398. * Returns `true` if callback returns `true` for (at least) one
  399. * of the container’s children.
  400. *
  401. * ```js
  402. * const hasPrefix = rule.some(i => i.prop[0] === '-')
  403. * ```
  404. *
  405. * @param condition Iterator returns true or false.
  406. * @return Is some child pass condition.
  407. */
  408. some(
  409. condition: (node: Child, index: number, nodes: Child[]) => boolean
  410. ): boolean
  411. /**
  412. * Returns a `child`’s index within the `Container#nodes` array.
  413. *
  414. * ```js
  415. * rule.index( rule.nodes[2] ) //=> 2
  416. * ```
  417. *
  418. * @param child Child of the current container.
  419. * @return Child index.
  420. */
  421. index(child: Child | number): number
  422. }
  423. declare class Container<Child extends Node = ChildNode> extends Container_<Child> {}
  424. export = Container