container.d.ts 14 KB

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