container.d.ts 14 KB

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