prefixes.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. let vendor = require('./vendor')
  2. let Declaration = require('./declaration')
  3. let Resolution = require('./resolution')
  4. let Transition = require('./transition')
  5. let Processor = require('./processor')
  6. let Supports = require('./supports')
  7. let Browsers = require('./browsers')
  8. let Selector = require('./selector')
  9. let AtRule = require('./at-rule')
  10. let Value = require('./value')
  11. let utils = require('./utils')
  12. let hackFullscreen = require('./hacks/fullscreen')
  13. let hackPlaceholder = require('./hacks/placeholder')
  14. let hackPlaceholderShown = require('./hacks/placeholder-shown')
  15. let hackFileSelectorButton = require('./hacks/file-selector-button')
  16. let hackFlex = require('./hacks/flex')
  17. let hackOrder = require('./hacks/order')
  18. let hackFilter = require('./hacks/filter')
  19. let hackGridEnd = require('./hacks/grid-end')
  20. let hackAnimation = require('./hacks/animation')
  21. let hackFlexFlow = require('./hacks/flex-flow')
  22. let hackFlexGrow = require('./hacks/flex-grow')
  23. let hackFlexWrap = require('./hacks/flex-wrap')
  24. let hackGridArea = require('./hacks/grid-area')
  25. let hackPlaceSelf = require('./hacks/place-self')
  26. let hackGridStart = require('./hacks/grid-start')
  27. let hackAlignSelf = require('./hacks/align-self')
  28. let hackAppearance = require('./hacks/appearance')
  29. let hackFlexBasis = require('./hacks/flex-basis')
  30. let hackMaskBorder = require('./hacks/mask-border')
  31. let hackMaskComposite = require('./hacks/mask-composite')
  32. let hackAlignItems = require('./hacks/align-items')
  33. let hackUserSelect = require('./hacks/user-select')
  34. let hackFlexShrink = require('./hacks/flex-shrink')
  35. let hackBreakProps = require('./hacks/break-props')
  36. let hackWritingMode = require('./hacks/writing-mode')
  37. let hackBorderImage = require('./hacks/border-image')
  38. let hackAlignContent = require('./hacks/align-content')
  39. let hackBorderRadius = require('./hacks/border-radius')
  40. let hackBlockLogical = require('./hacks/block-logical')
  41. let hackGridTemplate = require('./hacks/grid-template')
  42. let hackInlineLogical = require('./hacks/inline-logical')
  43. let hackGridRowAlign = require('./hacks/grid-row-align')
  44. let hackTransformDecl = require('./hacks/transform-decl')
  45. let hackFlexDirection = require('./hacks/flex-direction')
  46. let hackImageRendering = require('./hacks/image-rendering')
  47. let hackBackdropFilter = require('./hacks/backdrop-filter')
  48. let hackBackgroundClip = require('./hacks/background-clip')
  49. let hackTextDecoration = require('./hacks/text-decoration')
  50. let hackJustifyContent = require('./hacks/justify-content')
  51. let hackBackgroundSize = require('./hacks/background-size')
  52. let hackGridRowColumn = require('./hacks/grid-row-column')
  53. let hackGridRowsColumns = require('./hacks/grid-rows-columns')
  54. let hackGridColumnAlign = require('./hacks/grid-column-align')
  55. let hackPrintColorAdjust = require('./hacks/print-color-adjust')
  56. let hackOverscrollBehavior = require('./hacks/overscroll-behavior')
  57. let hackGridTemplateAreas = require('./hacks/grid-template-areas')
  58. let hackTextEmphasisPosition = require('./hacks/text-emphasis-position')
  59. let hackTextDecorationSkipInk = require('./hacks/text-decoration-skip-ink')
  60. let hackGradient = require('./hacks/gradient')
  61. let hackIntrinsic = require('./hacks/intrinsic')
  62. let hackPixelated = require('./hacks/pixelated')
  63. let hackImageSet = require('./hacks/image-set')
  64. let hackCrossFade = require('./hacks/cross-fade')
  65. let hackDisplayFlex = require('./hacks/display-flex')
  66. let hackDisplayGrid = require('./hacks/display-grid')
  67. let hackFilterValue = require('./hacks/filter-value')
  68. let hackAutofill = require('./hacks/autofill')
  69. Selector.hack(hackAutofill)
  70. Selector.hack(hackFullscreen)
  71. Selector.hack(hackPlaceholder)
  72. Selector.hack(hackPlaceholderShown)
  73. Selector.hack(hackFileSelectorButton)
  74. Declaration.hack(hackFlex)
  75. Declaration.hack(hackOrder)
  76. Declaration.hack(hackFilter)
  77. Declaration.hack(hackGridEnd)
  78. Declaration.hack(hackAnimation)
  79. Declaration.hack(hackFlexFlow)
  80. Declaration.hack(hackFlexGrow)
  81. Declaration.hack(hackFlexWrap)
  82. Declaration.hack(hackGridArea)
  83. Declaration.hack(hackPlaceSelf)
  84. Declaration.hack(hackGridStart)
  85. Declaration.hack(hackAlignSelf)
  86. Declaration.hack(hackAppearance)
  87. Declaration.hack(hackFlexBasis)
  88. Declaration.hack(hackMaskBorder)
  89. Declaration.hack(hackMaskComposite)
  90. Declaration.hack(hackAlignItems)
  91. Declaration.hack(hackUserSelect)
  92. Declaration.hack(hackFlexShrink)
  93. Declaration.hack(hackBreakProps)
  94. Declaration.hack(hackWritingMode)
  95. Declaration.hack(hackBorderImage)
  96. Declaration.hack(hackAlignContent)
  97. Declaration.hack(hackBorderRadius)
  98. Declaration.hack(hackBlockLogical)
  99. Declaration.hack(hackGridTemplate)
  100. Declaration.hack(hackInlineLogical)
  101. Declaration.hack(hackGridRowAlign)
  102. Declaration.hack(hackTransformDecl)
  103. Declaration.hack(hackFlexDirection)
  104. Declaration.hack(hackImageRendering)
  105. Declaration.hack(hackBackdropFilter)
  106. Declaration.hack(hackBackgroundClip)
  107. Declaration.hack(hackTextDecoration)
  108. Declaration.hack(hackJustifyContent)
  109. Declaration.hack(hackBackgroundSize)
  110. Declaration.hack(hackGridRowColumn)
  111. Declaration.hack(hackGridRowsColumns)
  112. Declaration.hack(hackGridColumnAlign)
  113. Declaration.hack(hackOverscrollBehavior)
  114. Declaration.hack(hackGridTemplateAreas)
  115. Declaration.hack(hackPrintColorAdjust)
  116. Declaration.hack(hackTextEmphasisPosition)
  117. Declaration.hack(hackTextDecorationSkipInk)
  118. Value.hack(hackGradient)
  119. Value.hack(hackIntrinsic)
  120. Value.hack(hackPixelated)
  121. Value.hack(hackImageSet)
  122. Value.hack(hackCrossFade)
  123. Value.hack(hackDisplayFlex)
  124. Value.hack(hackDisplayGrid)
  125. Value.hack(hackFilterValue)
  126. let declsCache = new Map()
  127. class Prefixes {
  128. constructor(data, browsers, options = {}) {
  129. this.data = data
  130. this.browsers = browsers
  131. this.options = options
  132. ;[this.add, this.remove] = this.preprocess(this.select(this.data))
  133. this.transition = new Transition(this)
  134. this.processor = new Processor(this)
  135. }
  136. /**
  137. * Return clone instance to remove all prefixes
  138. */
  139. cleaner() {
  140. if (this.cleanerCache) {
  141. return this.cleanerCache
  142. }
  143. if (this.browsers.selected.length) {
  144. let empty = new Browsers(this.browsers.data, [])
  145. this.cleanerCache = new Prefixes(this.data, empty, this.options)
  146. } else {
  147. return this
  148. }
  149. return this.cleanerCache
  150. }
  151. /**
  152. * Select prefixes from data, which is necessary for selected browsers
  153. */
  154. select(list) {
  155. let selected = { add: {}, remove: {} }
  156. for (let name in list) {
  157. let data = list[name]
  158. let add = data.browsers.map(i => {
  159. let params = i.split(' ')
  160. return {
  161. browser: `${params[0]} ${params[1]}`,
  162. note: params[2]
  163. }
  164. })
  165. let notes = add
  166. .filter(i => i.note)
  167. .map(i => `${this.browsers.prefix(i.browser)} ${i.note}`)
  168. notes = utils.uniq(notes)
  169. add = add
  170. .filter(i => this.browsers.isSelected(i.browser))
  171. .map(i => {
  172. let prefix = this.browsers.prefix(i.browser)
  173. if (i.note) {
  174. return `${prefix} ${i.note}`
  175. } else {
  176. return prefix
  177. }
  178. })
  179. add = this.sort(utils.uniq(add))
  180. if (this.options.flexbox === 'no-2009') {
  181. add = add.filter(i => !i.includes('2009'))
  182. }
  183. let all = data.browsers.map(i => this.browsers.prefix(i))
  184. if (data.mistakes) {
  185. all = all.concat(data.mistakes)
  186. }
  187. all = all.concat(notes)
  188. all = utils.uniq(all)
  189. if (add.length) {
  190. selected.add[name] = add
  191. if (add.length < all.length) {
  192. selected.remove[name] = all.filter(i => !add.includes(i))
  193. }
  194. } else {
  195. selected.remove[name] = all
  196. }
  197. }
  198. return selected
  199. }
  200. /**
  201. * Sort vendor prefixes
  202. */
  203. sort(prefixes) {
  204. return prefixes.sort((a, b) => {
  205. let aLength = utils.removeNote(a).length
  206. let bLength = utils.removeNote(b).length
  207. if (aLength === bLength) {
  208. return b.length - a.length
  209. } else {
  210. return bLength - aLength
  211. }
  212. })
  213. }
  214. /**
  215. * Cache prefixes data to fast CSS processing
  216. */
  217. preprocess(selected) {
  218. let add = {
  219. 'selectors': [],
  220. '@supports': new Supports(Prefixes, this)
  221. }
  222. for (let name in selected.add) {
  223. let prefixes = selected.add[name]
  224. if (name === '@keyframes' || name === '@viewport') {
  225. add[name] = new AtRule(name, prefixes, this)
  226. } else if (name === '@resolution') {
  227. add[name] = new Resolution(name, prefixes, this)
  228. } else if (this.data[name].selector) {
  229. add.selectors.push(Selector.load(name, prefixes, this))
  230. } else {
  231. let props = this.data[name].props
  232. if (props) {
  233. let value = Value.load(name, prefixes, this)
  234. for (let prop of props) {
  235. if (!add[prop]) {
  236. add[prop] = { values: [] }
  237. }
  238. add[prop].values.push(value)
  239. }
  240. } else {
  241. let values = (add[name] && add[name].values) || []
  242. add[name] = Declaration.load(name, prefixes, this)
  243. add[name].values = values
  244. }
  245. }
  246. }
  247. let remove = { selectors: [] }
  248. for (let name in selected.remove) {
  249. let prefixes = selected.remove[name]
  250. if (this.data[name].selector) {
  251. let selector = Selector.load(name, prefixes)
  252. for (let prefix of prefixes) {
  253. remove.selectors.push(selector.old(prefix))
  254. }
  255. } else if (name === '@keyframes' || name === '@viewport') {
  256. for (let prefix of prefixes) {
  257. let prefixed = `@${prefix}${name.slice(1)}`
  258. remove[prefixed] = { remove: true }
  259. }
  260. } else if (name === '@resolution') {
  261. remove[name] = new Resolution(name, prefixes, this)
  262. } else {
  263. let props = this.data[name].props
  264. if (props) {
  265. let value = Value.load(name, [], this)
  266. for (let prefix of prefixes) {
  267. let old = value.old(prefix)
  268. if (old) {
  269. for (let prop of props) {
  270. if (!remove[prop]) {
  271. remove[prop] = {}
  272. }
  273. if (!remove[prop].values) {
  274. remove[prop].values = []
  275. }
  276. remove[prop].values.push(old)
  277. }
  278. }
  279. }
  280. } else {
  281. for (let p of prefixes) {
  282. let olds = this.decl(name).old(name, p)
  283. if (name === 'align-self') {
  284. let a = add[name] && add[name].prefixes
  285. if (a) {
  286. if (p === '-webkit- 2009' && a.includes('-webkit-')) {
  287. continue
  288. } else if (p === '-webkit-' && a.includes('-webkit- 2009')) {
  289. continue
  290. }
  291. }
  292. }
  293. for (let prefixed of olds) {
  294. if (!remove[prefixed]) {
  295. remove[prefixed] = {}
  296. }
  297. remove[prefixed].remove = true
  298. }
  299. }
  300. }
  301. }
  302. }
  303. return [add, remove]
  304. }
  305. /**
  306. * Declaration loader with caching
  307. */
  308. decl(prop) {
  309. if (!declsCache.has(prop)) {
  310. declsCache.set(prop, Declaration.load(prop))
  311. }
  312. return declsCache.get(prop)
  313. }
  314. /**
  315. * Return unprefixed version of property
  316. */
  317. unprefixed(prop) {
  318. let value = this.normalize(vendor.unprefixed(prop))
  319. if (value === 'flex-direction') {
  320. value = 'flex-flow'
  321. }
  322. return value
  323. }
  324. /**
  325. * Normalize prefix for remover
  326. */
  327. normalize(prop) {
  328. return this.decl(prop).normalize(prop)
  329. }
  330. /**
  331. * Return prefixed version of property
  332. */
  333. prefixed(prop, prefix) {
  334. prop = vendor.unprefixed(prop)
  335. return this.decl(prop).prefixed(prop, prefix)
  336. }
  337. /**
  338. * Return values, which must be prefixed in selected property
  339. */
  340. values(type, prop) {
  341. let data = this[type]
  342. let global = data['*'] && data['*'].values
  343. let values = data[prop] && data[prop].values
  344. if (global && values) {
  345. return utils.uniq(global.concat(values))
  346. } else {
  347. return global || values || []
  348. }
  349. }
  350. /**
  351. * Group declaration by unprefixed property to check them
  352. */
  353. group(decl) {
  354. let rule = decl.parent
  355. let index = rule.index(decl)
  356. let { length } = rule.nodes
  357. let unprefixed = this.unprefixed(decl.prop)
  358. let checker = (step, callback) => {
  359. index += step
  360. while (index >= 0 && index < length) {
  361. let other = rule.nodes[index]
  362. if (other.type === 'decl') {
  363. if (step === -1 && other.prop === unprefixed) {
  364. if (!Browsers.withPrefix(other.value)) {
  365. break
  366. }
  367. }
  368. if (this.unprefixed(other.prop) !== unprefixed) {
  369. break
  370. } else if (callback(other) === true) {
  371. return true
  372. }
  373. if (step === +1 && other.prop === unprefixed) {
  374. if (!Browsers.withPrefix(other.value)) {
  375. break
  376. }
  377. }
  378. }
  379. index += step
  380. }
  381. return false
  382. }
  383. return {
  384. up(callback) {
  385. return checker(-1, callback)
  386. },
  387. down(callback) {
  388. return checker(+1, callback)
  389. }
  390. }
  391. }
  392. }
  393. module.exports = Prefixes