You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

480 lines
14 KiB

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