container.d.ts 13 KB

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