container.d.ts 14 KB

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