declaration.d.ts 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. import { ContainerWithChildren } from './container.js'
  2. import Node from './node.js'
  3. declare namespace Declaration {
  4. export interface DeclarationRaws extends Record<string, unknown> {
  5. /**
  6. * The space symbols before the node. It also stores `*`
  7. * and `_` symbols before the declaration (IE hack).
  8. */
  9. before?: string
  10. /**
  11. * The symbols between the property and value for declarations.
  12. */
  13. between?: string
  14. /**
  15. * The content of the important statement, if it is not just `!important`.
  16. */
  17. important?: string
  18. /**
  19. * Declaration value with comments.
  20. */
  21. value?: {
  22. raw: string
  23. value: string
  24. }
  25. }
  26. export interface DeclarationProps {
  27. /** Whether the declaration has an `!important` annotation. */
  28. important?: boolean
  29. /** Name of the declaration. */
  30. prop: string
  31. /** Information used to generate byte-to-byte equal node string as it was in the origin input. */
  32. raws?: DeclarationRaws
  33. /** Value of the declaration. */
  34. value: string
  35. }
  36. // eslint-disable-next-line @typescript-eslint/no-use-before-define
  37. export { Declaration_ as default }
  38. }
  39. /**
  40. * It represents a class that handles
  41. * [CSS declarations](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#css_declarations)
  42. *
  43. * ```js
  44. * Once (root, { Declaration }) {
  45. * const color = new Declaration({ prop: 'color', value: 'black' })
  46. * root.append(color)
  47. * }
  48. * ```
  49. *
  50. * ```js
  51. * const root = postcss.parse('a { color: black }')
  52. * const decl = root.first?.first
  53. *
  54. * decl.type //=> 'decl'
  55. * decl.toString() //=> ' color: black'
  56. * ```
  57. */
  58. declare class Declaration_ extends Node {
  59. parent: ContainerWithChildren | undefined
  60. raws: Declaration.DeclarationRaws
  61. type: 'decl'
  62. constructor(defaults?: Declaration.DeclarationProps)
  63. assign(overrides: Declaration.DeclarationProps | object): this
  64. clone(overrides?: Partial<Declaration.DeclarationProps>): this
  65. cloneAfter(overrides?: Partial<Declaration.DeclarationProps>): this
  66. cloneBefore(overrides?: Partial<Declaration.DeclarationProps>): this
  67. /**
  68. * It represents a specificity of the declaration.
  69. *
  70. * If true, the CSS declaration will have an
  71. * [important](https://developer.mozilla.org/en-US/docs/Web/CSS/important)
  72. * specifier.
  73. *
  74. * ```js
  75. * const root = postcss.parse('a { color: black !important; color: red }')
  76. *
  77. * root.first.first.important //=> true
  78. * root.first.last.important //=> undefined
  79. * ```
  80. */
  81. get important(): boolean
  82. set important(value: boolean)
  83. /**
  84. * The property name for a CSS declaration.
  85. *
  86. * ```js
  87. * const root = postcss.parse('a { color: black }')
  88. * const decl = root.first.first
  89. *
  90. * decl.prop //=> 'color'
  91. * ```
  92. */
  93. get prop(): string
  94. set prop(value: string)
  95. /**
  96. * The property value for a CSS declaration.
  97. *
  98. * Any CSS comments inside the value string will be filtered out.
  99. * CSS comments present in the source value will be available in
  100. * the `raws` property.
  101. *
  102. * Assigning new `value` would ignore the comments in `raws`
  103. * property while compiling node to string.
  104. *
  105. * ```js
  106. * const root = postcss.parse('a { color: black }')
  107. * const decl = root.first.first
  108. *
  109. * decl.value //=> 'black'
  110. * ```
  111. */
  112. get value(): string
  113. set value(value: string)
  114. /**
  115. * It represents a getter that returns `true` if a declaration starts with
  116. * `--` or `$`, which are used to declare variables in CSS and SASS/SCSS.
  117. *
  118. * ```js
  119. * const root = postcss.parse(':root { --one: 1 }')
  120. * const one = root.first.first
  121. *
  122. * one.variable //=> true
  123. * ```
  124. *
  125. * ```js
  126. * const root = postcss.parse('$one: 1')
  127. * const one = root.first
  128. *
  129. * one.variable //=> true
  130. * ```
  131. */
  132. get variable(): boolean
  133. }
  134. declare class Declaration extends Declaration_ {}
  135. export = Declaration