stringifier.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. 'use strict'
  2. // Escapes sequences that could break out of an HTML <style> context.
  3. // Uses CSS unicode escaping (\3c = '<') which is valid CSS and parsed
  4. // correctly by all compliant CSS consumers.
  5. const STYLE_TAG = /(<)(\/?style\b)/gi
  6. const COMMENT_OPEN = /(<)(!--)/g
  7. function escapeHTMLInCSS(str) {
  8. if (typeof str !== 'string') return str
  9. if (!str.includes('<')) return str
  10. return str.replace(STYLE_TAG, '\\3c $2').replace(COMMENT_OPEN, '\\3c $2')
  11. }
  12. const DEFAULT_RAW = {
  13. after: '\n',
  14. beforeClose: '\n',
  15. beforeComment: '\n',
  16. beforeDecl: '\n',
  17. beforeOpen: ' ',
  18. beforeRule: '\n',
  19. colon: ': ',
  20. commentLeft: ' ',
  21. commentRight: ' ',
  22. emptyBody: '',
  23. indent: ' ',
  24. semicolon: false
  25. }
  26. function capitalize(str) {
  27. return str[0].toUpperCase() + str.slice(1)
  28. }
  29. class Stringifier {
  30. constructor(builder) {
  31. this.builder = builder
  32. }
  33. atrule(node, semicolon) {
  34. let name = '@' + node.name
  35. let params = node.params ? this.rawValue(node, 'params') : ''
  36. if (typeof node.raws.afterName !== 'undefined') {
  37. name += node.raws.afterName
  38. } else if (params) {
  39. name += ' '
  40. }
  41. if (node.nodes) {
  42. this.block(node, name + params)
  43. } else {
  44. let end = (node.raws.between || '') + (semicolon ? ';' : '')
  45. this.builder(escapeHTMLInCSS(name + params + end), node)
  46. }
  47. }
  48. beforeAfter(node, detect) {
  49. let value
  50. if (node.type === 'decl') {
  51. value = this.raw(node, null, 'beforeDecl')
  52. } else if (node.type === 'comment') {
  53. value = this.raw(node, null, 'beforeComment')
  54. } else if (detect === 'before') {
  55. value = this.raw(node, null, 'beforeRule')
  56. } else {
  57. value = this.raw(node, null, 'beforeClose')
  58. }
  59. let buf = node.parent
  60. let depth = 0
  61. while (buf && buf.type !== 'root') {
  62. depth += 1
  63. buf = buf.parent
  64. }
  65. if (value.includes('\n')) {
  66. let indent = this.raw(node, null, 'indent')
  67. if (indent.length) {
  68. for (let step = 0; step < depth; step++) value += indent
  69. }
  70. }
  71. return value
  72. }
  73. block(node, start) {
  74. let between = this.raw(node, 'between', 'beforeOpen')
  75. this.builder(escapeHTMLInCSS(start + between) + '{', node, 'start')
  76. let after
  77. if (node.nodes && node.nodes.length) {
  78. this.body(node)
  79. after = this.raw(node, 'after')
  80. } else {
  81. after = this.raw(node, 'after', 'emptyBody')
  82. }
  83. if (after) this.builder(escapeHTMLInCSS(after))
  84. this.builder('}', node, 'end')
  85. }
  86. body(node) {
  87. let last = node.nodes.length - 1
  88. while (last > 0) {
  89. if (node.nodes[last].type !== 'comment') break
  90. last -= 1
  91. }
  92. let semicolon = this.raw(node, 'semicolon')
  93. let isDocument = node.type === 'document'
  94. for (let i = 0; i < node.nodes.length; i++) {
  95. let child = node.nodes[i]
  96. let before = this.raw(child, 'before')
  97. if (before) this.builder(isDocument ? before : escapeHTMLInCSS(before))
  98. this.stringify(child, last !== i || semicolon)
  99. }
  100. }
  101. comment(node) {
  102. let left = this.raw(node, 'left', 'commentLeft')
  103. let right = this.raw(node, 'right', 'commentRight')
  104. this.builder(escapeHTMLInCSS('/*' + left + node.text + right + '*/'), node)
  105. }
  106. decl(node, semicolon) {
  107. let between = this.raw(node, 'between', 'colon')
  108. let string = node.prop + between + this.rawValue(node, 'value')
  109. if (node.important) {
  110. string += node.raws.important || ' !important'
  111. }
  112. if (semicolon) string += ';'
  113. this.builder(escapeHTMLInCSS(string), node)
  114. }
  115. document(node) {
  116. this.body(node)
  117. }
  118. raw(node, own, detect) {
  119. let value
  120. if (!detect) detect = own
  121. // Already had
  122. if (own) {
  123. value = node.raws[own]
  124. if (typeof value !== 'undefined') return value
  125. }
  126. let parent = node.parent
  127. if (detect === 'before') {
  128. // Hack for first rule in CSS
  129. if (!parent || (parent.type === 'root' && parent.first === node)) {
  130. return ''
  131. }
  132. // `root` nodes in `document` should use only their own raws
  133. if (parent && parent.type === 'document') {
  134. return ''
  135. }
  136. }
  137. // Floating child without parent
  138. if (!parent) return DEFAULT_RAW[detect]
  139. // Detect style by other nodes
  140. let root = node.root()
  141. if (!root.rawCache) root.rawCache = {}
  142. if (typeof root.rawCache[detect] !== 'undefined') {
  143. return root.rawCache[detect]
  144. }
  145. if (detect === 'before' || detect === 'after') {
  146. return this.beforeAfter(node, detect)
  147. } else {
  148. let method = 'raw' + capitalize(detect)
  149. if (this[method]) {
  150. value = this[method](root, node)
  151. } else {
  152. root.walk(i => {
  153. value = i.raws[own]
  154. if (typeof value !== 'undefined') return false
  155. })
  156. }
  157. }
  158. if (typeof value === 'undefined') value = DEFAULT_RAW[detect]
  159. root.rawCache[detect] = value
  160. return value
  161. }
  162. rawBeforeClose(root) {
  163. let value
  164. root.walk(i => {
  165. if (i.nodes && i.nodes.length > 0) {
  166. if (typeof i.raws.after !== 'undefined') {
  167. value = i.raws.after
  168. if (value.includes('\n')) {
  169. value = value.replace(/[^\n]+$/, '')
  170. }
  171. return false
  172. }
  173. }
  174. })
  175. if (value) value = value.replace(/\S/g, '')
  176. return value
  177. }
  178. rawBeforeComment(root, node) {
  179. let value
  180. root.walkComments(i => {
  181. if (typeof i.raws.before !== 'undefined') {
  182. value = i.raws.before
  183. if (value.includes('\n')) {
  184. value = value.replace(/[^\n]+$/, '')
  185. }
  186. return false
  187. }
  188. })
  189. if (typeof value === 'undefined') {
  190. value = this.raw(node, null, 'beforeDecl')
  191. } else if (value) {
  192. value = value.replace(/\S/g, '')
  193. }
  194. return value
  195. }
  196. rawBeforeDecl(root, node) {
  197. let value
  198. root.walkDecls(i => {
  199. if (typeof i.raws.before !== 'undefined') {
  200. value = i.raws.before
  201. if (value.includes('\n')) {
  202. value = value.replace(/[^\n]+$/, '')
  203. }
  204. return false
  205. }
  206. })
  207. if (typeof value === 'undefined') {
  208. value = this.raw(node, null, 'beforeRule')
  209. } else if (value) {
  210. value = value.replace(/\S/g, '')
  211. }
  212. return value
  213. }
  214. rawBeforeOpen(root) {
  215. let value
  216. root.walk(i => {
  217. if (i.type !== 'decl') {
  218. value = i.raws.between
  219. if (typeof value !== 'undefined') return false
  220. }
  221. })
  222. return value
  223. }
  224. rawBeforeRule(root) {
  225. let value
  226. root.walk(i => {
  227. if (i.nodes && (i.parent !== root || root.first !== i)) {
  228. if (typeof i.raws.before !== 'undefined') {
  229. value = i.raws.before
  230. if (value.includes('\n')) {
  231. value = value.replace(/[^\n]+$/, '')
  232. }
  233. return false
  234. }
  235. }
  236. })
  237. if (value) value = value.replace(/\S/g, '')
  238. return value
  239. }
  240. rawColon(root) {
  241. let value
  242. root.walkDecls(i => {
  243. if (typeof i.raws.between !== 'undefined') {
  244. value = i.raws.between.replace(/[^\s:]/g, '')
  245. return false
  246. }
  247. })
  248. return value
  249. }
  250. rawEmptyBody(root) {
  251. let value
  252. root.walk(i => {
  253. if (i.nodes && i.nodes.length === 0) {
  254. value = i.raws.after
  255. if (typeof value !== 'undefined') return false
  256. }
  257. })
  258. return value
  259. }
  260. rawIndent(root) {
  261. if (root.raws.indent) return root.raws.indent
  262. let value
  263. root.walk(i => {
  264. let p = i.parent
  265. if (p && p !== root && p.parent && p.parent === root) {
  266. if (typeof i.raws.before !== 'undefined') {
  267. let parts = i.raws.before.split('\n')
  268. value = parts[parts.length - 1]
  269. value = value.replace(/\S/g, '')
  270. return false
  271. }
  272. }
  273. })
  274. return value
  275. }
  276. rawSemicolon(root) {
  277. let value
  278. root.walk(i => {
  279. if (i.nodes && i.nodes.length && i.last.type === 'decl') {
  280. value = i.raws.semicolon
  281. if (typeof value !== 'undefined') return false
  282. }
  283. })
  284. return value
  285. }
  286. rawValue(node, prop) {
  287. let value = node[prop]
  288. let raw = node.raws[prop]
  289. if (raw && raw.value === value) {
  290. return raw.raw
  291. }
  292. return value
  293. }
  294. root(node) {
  295. this.body(node)
  296. if (node.raws.after) {
  297. let after = node.raws.after
  298. let isDocument = node.parent && node.parent.type === 'document'
  299. this.builder(isDocument ? after : escapeHTMLInCSS(after))
  300. }
  301. }
  302. rule(node) {
  303. this.block(node, this.rawValue(node, 'selector'))
  304. if (node.raws.ownSemicolon) {
  305. this.builder(escapeHTMLInCSS(node.raws.ownSemicolon), node, 'end')
  306. }
  307. }
  308. stringify(node, semicolon) {
  309. /* c8 ignore start */
  310. if (!this[node.type]) {
  311. throw new Error(
  312. 'Unknown AST node type ' +
  313. node.type +
  314. '. ' +
  315. 'Maybe you need to change PostCSS stringifier.'
  316. )
  317. }
  318. /* c8 ignore stop */
  319. this[node.type](node, semicolon)
  320. }
  321. }
  322. module.exports = Stringifier
  323. Stringifier.default = Stringifier