stringifier.js 8.8 KB

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