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. * Declaration loader with caching
  153. */
  154. decl(prop) {
  155. if (!declsCache.has(prop)) {
  156. declsCache.set(prop, Declaration.load(prop))
  157. }
  158. return declsCache.get(prop)
  159. }
  160. /**
  161. * Group declaration by unprefixed property to check them
  162. */
  163. group(decl) {
  164. let rule = decl.parent
  165. let index = rule.index(decl)
  166. let { length } = rule.nodes
  167. let unprefixed = this.unprefixed(decl.prop)
  168. let checker = (step, callback) => {
  169. index += step
  170. while (index >= 0 && index < length) {
  171. let other = rule.nodes[index]
  172. if (other.type === 'decl') {
  173. if (step === -1 && other.prop === unprefixed) {
  174. if (!Browsers.withPrefix(other.value)) {
  175. break
  176. }
  177. }
  178. if (this.unprefixed(other.prop) !== unprefixed) {
  179. break
  180. } else if (callback(other) === true) {
  181. return true
  182. }
  183. if (step === +1 && other.prop === unprefixed) {
  184. if (!Browsers.withPrefix(other.value)) {
  185. break
  186. }
  187. }
  188. }
  189. index += step
  190. }
  191. return false
  192. }
  193. return {
  194. down(callback) {
  195. return checker(+1, callback)
  196. },
  197. up(callback) {
  198. return checker(-1, callback)
  199. }
  200. }
  201. }
  202. /**
  203. * Normalize prefix for remover
  204. */
  205. normalize(prop) {
  206. return this.decl(prop).normalize(prop)
  207. }
  208. /**
  209. * Return prefixed version of property
  210. */
  211. prefixed(prop, prefix) {
  212. prop = vendor.unprefixed(prop)
  213. return this.decl(prop).prefixed(prop, prefix)
  214. }
  215. /**
  216. * Cache prefixes data to fast CSS processing
  217. */
  218. preprocess(selected) {
  219. let add = {
  220. '@supports': new Supports(Prefixes, this),
  221. 'selectors': []
  222. }
  223. for (let name in selected.add) {
  224. let prefixes = selected.add[name]
  225. if (name === '@keyframes' || name === '@viewport') {
  226. add[name] = new AtRule(name, prefixes, this)
  227. } else if (name === '@resolution') {
  228. add[name] = new Resolution(name, prefixes, this)
  229. } else if (this.data[name].selector) {
  230. add.selectors.push(Selector.load(name, prefixes, this))
  231. } else {
  232. let props = this.data[name].props
  233. if (props) {
  234. let value = Value.load(name, prefixes, this)
  235. for (let prop of props) {
  236. if (!add[prop]) {
  237. add[prop] = { values: [] }
  238. }
  239. add[prop].values.push(value)
  240. }
  241. } else {
  242. let values = (add[name] && add[name].values) || []
  243. add[name] = Declaration.load(name, prefixes, this)
  244. add[name].values = values
  245. }
  246. }
  247. }
  248. let remove = { selectors: [] }
  249. for (let name in selected.remove) {
  250. let prefixes = selected.remove[name]
  251. if (this.data[name].selector) {
  252. let selector = Selector.load(name, prefixes)
  253. for (let prefix of prefixes) {
  254. remove.selectors.push(selector.old(prefix))
  255. }
  256. } else if (name === '@keyframes' || name === '@viewport') {
  257. for (let prefix of prefixes) {
  258. let prefixed = `@${prefix}${name.slice(1)}`
  259. remove[prefixed] = { remove: true }
  260. }
  261. } else if (name === '@resolution') {
  262. remove[name] = new Resolution(name, prefixes, this)
  263. } else {
  264. let props = this.data[name].props
  265. if (props) {
  266. let value = Value.load(name, [], this)
  267. for (let prefix of prefixes) {
  268. let old = value.old(prefix)
  269. if (old) {
  270. for (let prop of props) {
  271. if (!remove[prop]) {
  272. remove[prop] = {}
  273. }
  274. if (!remove[prop].values) {
  275. remove[prop].values = []
  276. }
  277. remove[prop].values.push(old)
  278. }
  279. }
  280. }
  281. } else {
  282. for (let p of prefixes) {
  283. let olds = this.decl(name).old(name, p)
  284. if (name === 'align-self') {
  285. let a = add[name] && add[name].prefixes
  286. if (a) {
  287. if (p === '-webkit- 2009' && a.includes('-webkit-')) {
  288. continue
  289. } else if (p === '-webkit-' && a.includes('-webkit- 2009')) {
  290. continue
  291. }
  292. }
  293. }
  294. for (let prefixed of olds) {
  295. if (!remove[prefixed]) {
  296. remove[prefixed] = {}
  297. }
  298. remove[prefixed].remove = true
  299. }
  300. }
  301. }
  302. }
  303. }
  304. return [add, remove]
  305. }
  306. /**
  307. * Select prefixes from data, which is necessary for selected browsers
  308. */
  309. select(list) {
  310. let selected = { add: {}, remove: {} }
  311. for (let name in list) {
  312. let data = list[name]
  313. let add = data.browsers.map(i => {
  314. let params = i.split(' ')
  315. return {
  316. browser: `${params[0]} ${params[1]}`,
  317. note: params[2]
  318. }
  319. })
  320. let notes = add
  321. .filter(i => i.note)
  322. .map(i => `${this.browsers.prefix(i.browser)} ${i.note}`)
  323. notes = utils.uniq(notes)
  324. add = add
  325. .filter(i => this.browsers.isSelected(i.browser))
  326. .map(i => {
  327. let prefix = this.browsers.prefix(i.browser)
  328. if (i.note) {
  329. return `${prefix} ${i.note}`
  330. } else {
  331. return prefix
  332. }
  333. })
  334. add = this.sort(utils.uniq(add))
  335. if (this.options.flexbox === 'no-2009') {
  336. add = add.filter(i => !i.includes('2009'))
  337. }
  338. let all = data.browsers.map(i => this.browsers.prefix(i))
  339. if (data.mistakes) {
  340. all = all.concat(data.mistakes)
  341. }
  342. all = all.concat(notes)
  343. all = utils.uniq(all)
  344. if (add.length) {
  345. selected.add[name] = add
  346. if (add.length < all.length) {
  347. selected.remove[name] = all.filter(i => !add.includes(i))
  348. }
  349. } else {
  350. selected.remove[name] = all
  351. }
  352. }
  353. return selected
  354. }
  355. /**
  356. * Sort vendor prefixes
  357. */
  358. sort(prefixes) {
  359. return prefixes.sort((a, b) => {
  360. let aLength = utils.removeNote(a).length
  361. let bLength = utils.removeNote(b).length
  362. if (aLength === bLength) {
  363. return b.length - a.length
  364. } else {
  365. return bLength - aLength
  366. }
  367. })
  368. }
  369. /**
  370. * Return unprefixed version of property
  371. */
  372. unprefixed(prop) {
  373. let value = this.normalize(vendor.unprefixed(prop))
  374. if (value === 'flex-direction') {
  375. value = 'flex-flow'
  376. }
  377. return value
  378. }
  379. /**
  380. * Return values, which must be prefixed in selected property
  381. */
  382. values(type, prop) {
  383. let data = this[type]
  384. let global = data['*'] && data['*'].values
  385. let values = data[prop] && data[prop].values
  386. if (global && values) {
  387. return utils.uniq(global.concat(values))
  388. } else {
  389. return global || values || []
  390. }
  391. }
  392. }
  393. module.exports = Prefixes