transition.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. let { list } = require('postcss')
  2. let parser = require('postcss-value-parser')
  3. let Browsers = require('./browsers')
  4. let vendor = require('./vendor')
  5. class Transition {
  6. constructor(prefixes) {
  7. this.props = ['transition', 'transition-property']
  8. this.prefixes = prefixes
  9. }
  10. /**
  11. * Process transition and add prefixes for all necessary properties
  12. */
  13. add(decl, result) {
  14. let prefix, prop
  15. let add = this.prefixes.add[decl.prop]
  16. let vendorPrefixes = this.ruleVendorPrefixes(decl)
  17. let declPrefixes = vendorPrefixes || (add && add.prefixes) || []
  18. let params = this.parse(decl.value)
  19. let names = params.map(i => this.findProp(i))
  20. let added = []
  21. if (names.some(i => i[0] === '-')) {
  22. return
  23. }
  24. for (let param of params) {
  25. prop = this.findProp(param)
  26. if (prop[0] === '-') continue
  27. let prefixer = this.prefixes.add[prop]
  28. if (!prefixer || !prefixer.prefixes) continue
  29. for (prefix of prefixer.prefixes) {
  30. if (vendorPrefixes && !vendorPrefixes.some(p => prefix.includes(p))) {
  31. continue
  32. }
  33. let prefixed = this.prefixes.prefixed(prop, prefix)
  34. if (prefixed !== '-ms-transform' && !names.includes(prefixed)) {
  35. if (!this.disabled(prop, prefix)) {
  36. added.push(this.clone(prop, prefixed, param))
  37. }
  38. }
  39. }
  40. }
  41. params = params.concat(added)
  42. let value = this.stringify(params)
  43. let webkitClean = this.stringify(
  44. this.cleanFromUnprefixed(params, '-webkit-')
  45. )
  46. if (declPrefixes.includes('-webkit-')) {
  47. this.cloneBefore(decl, `-webkit-${decl.prop}`, webkitClean)
  48. }
  49. this.cloneBefore(decl, decl.prop, webkitClean)
  50. if (declPrefixes.includes('-o-')) {
  51. let operaClean = this.stringify(this.cleanFromUnprefixed(params, '-o-'))
  52. this.cloneBefore(decl, `-o-${decl.prop}`, operaClean)
  53. }
  54. for (prefix of declPrefixes) {
  55. if (prefix !== '-webkit-' && prefix !== '-o-') {
  56. let prefixValue = this.stringify(
  57. this.cleanOtherPrefixes(params, prefix)
  58. )
  59. this.cloneBefore(decl, prefix + decl.prop, prefixValue)
  60. }
  61. }
  62. if (value !== decl.value && !this.already(decl, decl.prop, value)) {
  63. this.checkForWarning(result, decl)
  64. decl.cloneBefore()
  65. decl.value = value
  66. }
  67. }
  68. /**
  69. * Does we already have this declaration
  70. */
  71. already(decl, prop, value) {
  72. return decl.parent.some(i => i.prop === prop && i.value === value)
  73. }
  74. /**
  75. * Show transition-property warning
  76. */
  77. checkForWarning(result, decl) {
  78. if (decl.prop !== 'transition-property') {
  79. return
  80. }
  81. let isPrefixed = false
  82. let hasAssociatedProp = false
  83. decl.parent.each(i => {
  84. if (i.type !== 'decl') {
  85. return undefined
  86. }
  87. if (i.prop.indexOf('transition-') !== 0) {
  88. return undefined
  89. }
  90. let values = list.comma(i.value)
  91. // check if current Rule's transition-property comma separated value list needs prefixes
  92. if (i.prop === 'transition-property') {
  93. values.forEach(value => {
  94. let lookup = this.prefixes.add[value]
  95. if (lookup && lookup.prefixes && lookup.prefixes.length > 0) {
  96. isPrefixed = true
  97. }
  98. })
  99. return undefined
  100. }
  101. // check if another transition-* prop in current Rule has comma separated value list
  102. hasAssociatedProp = hasAssociatedProp || values.length > 1
  103. return false
  104. })
  105. if (isPrefixed && hasAssociatedProp) {
  106. decl.warn(
  107. result,
  108. 'Replace transition-property to transition, ' +
  109. 'because Autoprefixer could not support ' +
  110. 'any cases of transition-property ' +
  111. 'and other transition-*'
  112. )
  113. }
  114. }
  115. /**
  116. * Remove all non-webkit prefixes and unprefixed params if we have prefixed
  117. */
  118. cleanFromUnprefixed(params, prefix) {
  119. let remove = params
  120. .map(i => this.findProp(i))
  121. .filter(i => i.slice(0, prefix.length) === prefix)
  122. .map(i => this.prefixes.unprefixed(i))
  123. let result = []
  124. for (let param of params) {
  125. let prop = this.findProp(param)
  126. let p = vendor.prefix(prop)
  127. if (!remove.includes(prop) && (p === prefix || p === '')) {
  128. result.push(param)
  129. }
  130. }
  131. return result
  132. }
  133. cleanOtherPrefixes(params, prefix) {
  134. return params.filter(param => {
  135. let current = vendor.prefix(this.findProp(param))
  136. return current === '' || current === prefix
  137. })
  138. }
  139. /**
  140. * Return new param array with different name
  141. */
  142. clone(origin, name, param) {
  143. let result = []
  144. let changed = false
  145. for (let i of param) {
  146. if (!changed && i.type === 'word' && i.value === origin) {
  147. result.push({ type: 'word', value: name })
  148. changed = true
  149. } else {
  150. result.push(i)
  151. }
  152. }
  153. return result
  154. }
  155. /**
  156. * Add declaration if it is not exist
  157. */
  158. cloneBefore(decl, prop, value) {
  159. if (!this.already(decl, prop, value)) {
  160. decl.cloneBefore({ prop, value })
  161. }
  162. }
  163. /**
  164. * Check property for disabled by option
  165. */
  166. disabled(prop, prefix) {
  167. let other = ['order', 'justify-content', 'align-self', 'align-content']
  168. if (prop.includes('flex') || other.includes(prop)) {
  169. if (this.prefixes.options.flexbox === false) {
  170. return true
  171. }
  172. if (this.prefixes.options.flexbox === 'no-2009') {
  173. return prefix.includes('2009')
  174. }
  175. }
  176. return undefined
  177. }
  178. /**
  179. * Find or create separator
  180. */
  181. div(params) {
  182. for (let param of params) {
  183. for (let node of param) {
  184. if (node.type === 'div' && node.value === ',') {
  185. return node
  186. }
  187. }
  188. }
  189. return { after: ' ', type: 'div', value: ',' }
  190. }
  191. /**
  192. * Find property name
  193. */
  194. findProp(param) {
  195. let prop = param[0].value
  196. if (/^\d/.test(prop)) {
  197. for (let [i, token] of param.entries()) {
  198. if (i !== 0 && token.type === 'word') {
  199. return token.value
  200. }
  201. }
  202. }
  203. return prop
  204. }
  205. /**
  206. * Parse properties list to array
  207. */
  208. parse(value) {
  209. let ast = parser(value)
  210. let result = []
  211. let param = []
  212. for (let node of ast.nodes) {
  213. param.push(node)
  214. if (node.type === 'div' && node.value === ',') {
  215. result.push(param)
  216. param = []
  217. }
  218. }
  219. result.push(param)
  220. return result.filter(i => i.length > 0)
  221. }
  222. /**
  223. * Process transition and remove all unnecessary properties
  224. */
  225. remove(decl) {
  226. let params = this.parse(decl.value)
  227. params = params.filter(i => {
  228. let prop = this.prefixes.remove[this.findProp(i)]
  229. return !prop || !prop.remove
  230. })
  231. let value = this.stringify(params)
  232. if (decl.value === value) {
  233. return
  234. }
  235. if (params.length === 0) {
  236. decl.remove()
  237. return
  238. }
  239. let double = decl.parent.some(i => {
  240. return i.prop === decl.prop && i.value === value
  241. })
  242. let smaller = decl.parent.some(i => {
  243. return i !== decl && i.prop === decl.prop && i.value.length > value.length
  244. })
  245. if (double || smaller) {
  246. decl.remove()
  247. return
  248. }
  249. decl.value = value
  250. }
  251. /**
  252. * Check if transition prop is inside vendor specific rule
  253. */
  254. ruleVendorPrefixes(decl) {
  255. let { parent } = decl
  256. if (parent.type !== 'rule') {
  257. return false
  258. } else if (!parent.selector.includes(':-')) {
  259. return false
  260. }
  261. let selectors = Browsers.prefixes().filter(s =>
  262. parent.selector.includes(':' + s)
  263. )
  264. return selectors.length > 0 ? selectors : false
  265. }
  266. /**
  267. * Return properties string from array
  268. */
  269. stringify(params) {
  270. if (params.length === 0) {
  271. return ''
  272. }
  273. let nodes = []
  274. for (let param of params) {
  275. if (param[param.length - 1].type !== 'div') {
  276. param.push(this.div(params))
  277. }
  278. nodes = nodes.concat(param)
  279. }
  280. if (nodes[0].type === 'div') {
  281. nodes = nodes.slice(1)
  282. }
  283. if (nodes[nodes.length - 1].type === 'div') {
  284. nodes = nodes.slice(0, +-2 + 1 || undefined)
  285. }
  286. return parser.stringify({ nodes })
  287. }
  288. }
  289. module.exports = Transition