prefixes.js 23 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139
  1. let unpack = require('caniuse-lite/dist/unpacker/feature')
  2. function browsersSort(a, b) {
  3. a = a.split(' ')
  4. b = b.split(' ')
  5. if (a[0] > b[0]) {
  6. return 1
  7. } else if (a[0] < b[0]) {
  8. return -1
  9. } else {
  10. return Math.sign(parseFloat(a[1]) - parseFloat(b[1]))
  11. }
  12. }
  13. // Convert Can I Use data
  14. function f(data, opts, callback) {
  15. data = unpack(data)
  16. if (!callback) {
  17. ;[callback, opts] = [opts, {}]
  18. }
  19. let match = opts.match || /\sx($|\s)/
  20. let need = []
  21. for (let browser in data.stats) {
  22. let versions = data.stats[browser]
  23. for (let version in versions) {
  24. let support = versions[version]
  25. if (support.match(match)) {
  26. need.push(browser + ' ' + version)
  27. }
  28. }
  29. }
  30. callback(need.sort(browsersSort))
  31. }
  32. // Add data for all properties
  33. let result = {}
  34. function prefix(names, data) {
  35. for (let name of names) {
  36. result[name] = Object.assign({}, data)
  37. }
  38. }
  39. function add(names, data) {
  40. for (let name of names) {
  41. result[name].browsers = result[name].browsers
  42. .concat(data.browsers)
  43. .sort(browsersSort)
  44. }
  45. }
  46. module.exports = result
  47. // Border Radius
  48. let prefixBorderRadius = require('caniuse-lite/data/features/border-radius')
  49. f(prefixBorderRadius, browsers =>
  50. prefix(
  51. [
  52. 'border-radius',
  53. 'border-top-left-radius',
  54. 'border-top-right-radius',
  55. 'border-bottom-right-radius',
  56. 'border-bottom-left-radius'
  57. ],
  58. {
  59. browsers,
  60. feature: 'border-radius',
  61. mistakes: ['-khtml-', '-ms-', '-o-']
  62. }
  63. )
  64. )
  65. // Box Shadow
  66. let prefixBoxshadow = require('caniuse-lite/data/features/css-boxshadow')
  67. f(prefixBoxshadow, browsers =>
  68. prefix(['box-shadow'], {
  69. browsers,
  70. feature: 'css-boxshadow',
  71. mistakes: ['-khtml-']
  72. })
  73. )
  74. // Animation
  75. let prefixAnimation = require('caniuse-lite/data/features/css-animation')
  76. f(prefixAnimation, browsers =>
  77. prefix(
  78. [
  79. 'animation',
  80. 'animation-name',
  81. 'animation-duration',
  82. 'animation-delay',
  83. 'animation-direction',
  84. 'animation-fill-mode',
  85. 'animation-iteration-count',
  86. 'animation-play-state',
  87. 'animation-timing-function',
  88. '@keyframes'
  89. ],
  90. {
  91. browsers,
  92. feature: 'css-animation',
  93. mistakes: ['-khtml-', '-ms-']
  94. }
  95. )
  96. )
  97. // Transition
  98. let prefixTransition = require('caniuse-lite/data/features/css-transitions')
  99. f(prefixTransition, browsers =>
  100. prefix(
  101. [
  102. 'transition',
  103. 'transition-property',
  104. 'transition-duration',
  105. 'transition-delay',
  106. 'transition-timing-function'
  107. ],
  108. {
  109. browsers,
  110. feature: 'css-transitions',
  111. mistakes: ['-khtml-', '-ms-']
  112. }
  113. )
  114. )
  115. // Transform 2D
  116. let prefixTransform2d = require('caniuse-lite/data/features/transforms2d')
  117. f(prefixTransform2d, browsers =>
  118. prefix(['transform', 'transform-origin'], {
  119. browsers,
  120. feature: 'transforms2d'
  121. })
  122. )
  123. // Transform 3D
  124. let prefixTransforms3d = require('caniuse-lite/data/features/transforms3d')
  125. f(prefixTransforms3d, browsers => {
  126. prefix(['perspective', 'perspective-origin'], {
  127. browsers,
  128. feature: 'transforms3d'
  129. })
  130. return prefix(['transform-style'], {
  131. browsers,
  132. feature: 'transforms3d',
  133. mistakes: ['-ms-', '-o-']
  134. })
  135. })
  136. f(prefixTransforms3d, { match: /y\sx|y\s#2/ }, browsers =>
  137. prefix(['backface-visibility'], {
  138. browsers,
  139. feature: 'transforms3d',
  140. mistakes: ['-ms-', '-o-']
  141. })
  142. )
  143. // Gradients
  144. let prefixGradients = require('caniuse-lite/data/features/css-gradients')
  145. f(prefixGradients, { match: /y\sx/ }, browsers =>
  146. prefix(
  147. [
  148. 'linear-gradient',
  149. 'repeating-linear-gradient',
  150. 'radial-gradient',
  151. 'repeating-radial-gradient'
  152. ],
  153. {
  154. browsers,
  155. feature: 'css-gradients',
  156. mistakes: ['-ms-'],
  157. props: [
  158. 'background',
  159. 'background-image',
  160. 'border-image',
  161. 'mask',
  162. 'list-style',
  163. 'list-style-image',
  164. 'content',
  165. 'mask-image'
  166. ]
  167. }
  168. )
  169. )
  170. f(prefixGradients, { match: /a\sx/ }, browsers => {
  171. browsers = browsers.map(i => {
  172. if (/firefox|op/.test(i)) {
  173. return i
  174. } else {
  175. return `${i} old`
  176. }
  177. })
  178. return add(
  179. [
  180. 'linear-gradient',
  181. 'repeating-linear-gradient',
  182. 'radial-gradient',
  183. 'repeating-radial-gradient'
  184. ],
  185. {
  186. browsers,
  187. feature: 'css-gradients'
  188. }
  189. )
  190. })
  191. // Box sizing
  192. let prefixBoxsizing = require('caniuse-lite/data/features/css3-boxsizing')
  193. f(prefixBoxsizing, browsers =>
  194. prefix(['box-sizing'], {
  195. browsers,
  196. feature: 'css3-boxsizing'
  197. })
  198. )
  199. // Filter Effects
  200. let prefixFilters = require('caniuse-lite/data/features/css-filters')
  201. f(prefixFilters, browsers =>
  202. prefix(['filter'], {
  203. browsers,
  204. feature: 'css-filters'
  205. })
  206. )
  207. // filter() function
  208. let prefixFilterFunction = require('caniuse-lite/data/features/css-filter-function')
  209. f(prefixFilterFunction, browsers =>
  210. prefix(['filter-function'], {
  211. browsers,
  212. feature: 'css-filter-function',
  213. props: [
  214. 'background',
  215. 'background-image',
  216. 'border-image',
  217. 'mask',
  218. 'list-style',
  219. 'list-style-image',
  220. 'content',
  221. 'mask-image'
  222. ]
  223. })
  224. )
  225. // Backdrop-filter
  226. let prefixBackdropFilter = require('caniuse-lite/data/features/css-backdrop-filter')
  227. f(prefixBackdropFilter, { match: /y\sx|y\s#2/ }, browsers =>
  228. prefix(['backdrop-filter'], {
  229. browsers,
  230. feature: 'css-backdrop-filter'
  231. })
  232. )
  233. // element() function
  234. let prefixElementFunction = require('caniuse-lite/data/features/css-element-function')
  235. f(prefixElementFunction, browsers =>
  236. prefix(['element'], {
  237. browsers,
  238. feature: 'css-element-function',
  239. props: [
  240. 'background',
  241. 'background-image',
  242. 'border-image',
  243. 'mask',
  244. 'list-style',
  245. 'list-style-image',
  246. 'content',
  247. 'mask-image'
  248. ]
  249. })
  250. )
  251. // Multicolumns
  252. let prefixMulticolumns = require('caniuse-lite/data/features/multicolumn')
  253. f(prefixMulticolumns, browsers => {
  254. prefix(
  255. [
  256. 'columns',
  257. 'column-width',
  258. 'column-gap',
  259. 'column-rule',
  260. 'column-rule-color',
  261. 'column-rule-width',
  262. 'column-count',
  263. 'column-rule-style',
  264. 'column-span',
  265. 'column-fill'
  266. ],
  267. {
  268. browsers,
  269. feature: 'multicolumn'
  270. }
  271. )
  272. let noff = browsers.filter(i => !/firefox/.test(i))
  273. prefix(['break-before', 'break-after', 'break-inside'], {
  274. browsers: noff,
  275. feature: 'multicolumn'
  276. })
  277. })
  278. // User select
  279. let prefixUserSelect = require('caniuse-lite/data/features/user-select-none')
  280. f(prefixUserSelect, browsers =>
  281. prefix(['user-select'], {
  282. browsers,
  283. feature: 'user-select-none',
  284. mistakes: ['-khtml-']
  285. })
  286. )
  287. // Flexible Box Layout
  288. let prefixFlexbox = require('caniuse-lite/data/features/flexbox')
  289. f(prefixFlexbox, { match: /a\sx/ }, browsers => {
  290. browsers = browsers.map(i => {
  291. if (/ie|firefox/.test(i)) {
  292. return i
  293. } else {
  294. return `${i} 2009`
  295. }
  296. })
  297. prefix(['display-flex', 'inline-flex'], {
  298. browsers,
  299. feature: 'flexbox',
  300. props: ['display']
  301. })
  302. prefix(['flex', 'flex-grow', 'flex-shrink', 'flex-basis'], {
  303. browsers,
  304. feature: 'flexbox'
  305. })
  306. prefix(
  307. [
  308. 'flex-direction',
  309. 'flex-wrap',
  310. 'flex-flow',
  311. 'justify-content',
  312. 'order',
  313. 'align-items',
  314. 'align-self',
  315. 'align-content'
  316. ],
  317. {
  318. browsers,
  319. feature: 'flexbox'
  320. }
  321. )
  322. })
  323. f(prefixFlexbox, { match: /y\sx/ }, browsers => {
  324. add(['display-flex', 'inline-flex'], {
  325. browsers,
  326. feature: 'flexbox'
  327. })
  328. add(['flex', 'flex-grow', 'flex-shrink', 'flex-basis'], {
  329. browsers,
  330. feature: 'flexbox'
  331. })
  332. add(
  333. [
  334. 'flex-direction',
  335. 'flex-wrap',
  336. 'flex-flow',
  337. 'justify-content',
  338. 'order',
  339. 'align-items',
  340. 'align-self',
  341. 'align-content'
  342. ],
  343. {
  344. browsers,
  345. feature: 'flexbox'
  346. }
  347. )
  348. })
  349. // calc() unit
  350. let prefixCalc = require('caniuse-lite/data/features/calc')
  351. f(prefixCalc, browsers =>
  352. prefix(['calc'], {
  353. browsers,
  354. feature: 'calc',
  355. props: ['*']
  356. })
  357. )
  358. // Background options
  359. let prefixBackgroundOptions = require('caniuse-lite/data/features/background-img-opts')
  360. f(prefixBackgroundOptions, browsers =>
  361. prefix(['background-origin', 'background-size'], {
  362. browsers,
  363. feature: 'background-img-opts'
  364. })
  365. )
  366. // background-clip: text
  367. let prefixBackgroundClipText = require('caniuse-lite/data/features/background-clip-text')
  368. f(prefixBackgroundClipText, browsers =>
  369. prefix(['background-clip'], {
  370. browsers,
  371. feature: 'background-clip-text'
  372. })
  373. )
  374. // Font feature settings
  375. let prefixFontFeature = require('caniuse-lite/data/features/font-feature')
  376. f(prefixFontFeature, browsers =>
  377. prefix(
  378. [
  379. 'font-feature-settings',
  380. 'font-variant-ligatures',
  381. 'font-language-override'
  382. ],
  383. {
  384. browsers,
  385. feature: 'font-feature'
  386. }
  387. )
  388. )
  389. // CSS font-kerning property
  390. let prefixFontKerning = require('caniuse-lite/data/features/font-kerning')
  391. f(prefixFontKerning, browsers =>
  392. prefix(['font-kerning'], {
  393. browsers,
  394. feature: 'font-kerning'
  395. })
  396. )
  397. // Border image
  398. let prefixBorderImage = require('caniuse-lite/data/features/border-image')
  399. f(prefixBorderImage, browsers =>
  400. prefix(['border-image'], {
  401. browsers,
  402. feature: 'border-image'
  403. })
  404. )
  405. // Selection selector
  406. let prefixSelection = require('caniuse-lite/data/features/css-selection')
  407. f(prefixSelection, browsers =>
  408. prefix(['::selection'], {
  409. browsers,
  410. feature: 'css-selection',
  411. selector: true
  412. })
  413. )
  414. // Placeholder selector
  415. let prefixPlaceholder = require('caniuse-lite/data/features/css-placeholder')
  416. f(prefixPlaceholder, browsers => {
  417. prefix(['::placeholder'], {
  418. browsers: browsers.concat(['ie 10 old', 'ie 11 old', 'firefox 18 old']),
  419. feature: 'css-placeholder',
  420. selector: true
  421. })
  422. })
  423. // Placeholder-shown selector
  424. let prefixPlaceholderShown = require('caniuse-lite/data/features/css-placeholder-shown')
  425. f(prefixPlaceholderShown, browsers => {
  426. prefix([':placeholder-shown'], {
  427. browsers,
  428. feature: 'css-placeholder-shown',
  429. selector: true
  430. })
  431. })
  432. // Hyphenation
  433. let prefixHyphens = require('caniuse-lite/data/features/css-hyphens')
  434. f(prefixHyphens, browsers =>
  435. prefix(['hyphens'], {
  436. browsers,
  437. feature: 'css-hyphens'
  438. })
  439. )
  440. // Fullscreen selector
  441. let prefixFullscreen = require('caniuse-lite/data/features/fullscreen')
  442. f(prefixFullscreen, browsers =>
  443. prefix([':fullscreen'], {
  444. browsers,
  445. feature: 'fullscreen',
  446. selector: true
  447. })
  448. )
  449. // ::backdrop pseudo-element
  450. // https://caniuse.com/mdn-css_selectors_backdrop
  451. let prefixBackdrop = require('caniuse-lite/data/features/mdn-css-backdrop-pseudo-element')
  452. f(prefixBackdrop, browsers =>
  453. prefix(['::backdrop'], {
  454. browsers,
  455. feature: 'backdrop',
  456. selector: true
  457. })
  458. )
  459. // File selector button
  460. let prefixFileSelectorButton = require('caniuse-lite/data/features/css-file-selector-button')
  461. f(prefixFileSelectorButton, browsers =>
  462. prefix(['::file-selector-button'], {
  463. browsers,
  464. feature: 'file-selector-button',
  465. selector: true
  466. })
  467. )
  468. // :autofill
  469. let prefixAutofill = require('caniuse-lite/data/features/css-autofill')
  470. f(prefixAutofill, browsers =>
  471. prefix([':autofill'], {
  472. browsers,
  473. feature: 'css-autofill',
  474. selector: true
  475. })
  476. )
  477. // Tab size
  478. let prefixTabsize = require('caniuse-lite/data/features/css3-tabsize')
  479. f(prefixTabsize, browsers =>
  480. prefix(['tab-size'], {
  481. browsers,
  482. feature: 'css3-tabsize'
  483. })
  484. )
  485. // Intrinsic & extrinsic sizing
  486. let prefixIntrinsic = require('caniuse-lite/data/features/intrinsic-width')
  487. let sizeProps = [
  488. 'width',
  489. 'min-width',
  490. 'max-width',
  491. 'height',
  492. 'min-height',
  493. 'max-height',
  494. 'inline-size',
  495. 'min-inline-size',
  496. 'max-inline-size',
  497. 'block-size',
  498. 'min-block-size',
  499. 'max-block-size',
  500. 'grid',
  501. 'grid-template',
  502. 'grid-template-rows',
  503. 'grid-template-columns',
  504. 'grid-auto-columns',
  505. 'grid-auto-rows'
  506. ]
  507. f(prefixIntrinsic, browsers =>
  508. prefix(['max-content', 'min-content'], {
  509. browsers,
  510. feature: 'intrinsic-width',
  511. props: sizeProps
  512. })
  513. )
  514. f(prefixIntrinsic, { match: /x|\s#4/ }, browsers =>
  515. prefix(['fill', 'fill-available'], {
  516. browsers,
  517. feature: 'intrinsic-width',
  518. props: sizeProps
  519. })
  520. )
  521. f(prefixIntrinsic, { match: /x|\s#5/ }, browsers => {
  522. let ffFix = browsers.filter(i => {
  523. let [name, version] = i.split(' ')
  524. if (name === 'firefox' || name === 'and_ff') {
  525. return parseInt(version) < 94
  526. } else {
  527. return true
  528. }
  529. })
  530. return prefix(['fit-content'], {
  531. browsers: ffFix,
  532. feature: 'intrinsic-width',
  533. props: sizeProps
  534. })
  535. })
  536. // Stretch value
  537. let prefixStretch = require('caniuse-lite/data/features/css-width-stretch')
  538. f(prefixStretch, browsers => {
  539. f(prefixIntrinsic, { match: /x|\s#2/ }, firefox => {
  540. browsers = browsers.concat(firefox)
  541. })
  542. return prefix(['stretch'], {
  543. browsers,
  544. feature: 'css-width-stretch',
  545. props: sizeProps
  546. })
  547. })
  548. // Zoom cursors
  549. let prefixCursorsNew = require('caniuse-lite/data/features/css3-cursors-newer')
  550. f(prefixCursorsNew, browsers =>
  551. prefix(['zoom-in', 'zoom-out'], {
  552. browsers,
  553. feature: 'css3-cursors-newer',
  554. props: ['cursor']
  555. })
  556. )
  557. // Grab cursors
  558. let prefixCursorsGrab = require('caniuse-lite/data/features/css3-cursors-grab')
  559. f(prefixCursorsGrab, browsers =>
  560. prefix(['grab', 'grabbing'], {
  561. browsers,
  562. feature: 'css3-cursors-grab',
  563. props: ['cursor']
  564. })
  565. )
  566. // Sticky position
  567. let prefixSticky = require('caniuse-lite/data/features/css-sticky')
  568. f(prefixSticky, browsers =>
  569. prefix(['sticky'], {
  570. browsers,
  571. feature: 'css-sticky',
  572. props: ['position']
  573. })
  574. )
  575. // Pointer Events
  576. let prefixPointer = require('caniuse-lite/data/features/pointer')
  577. f(prefixPointer, browsers =>
  578. prefix(['touch-action'], {
  579. browsers,
  580. feature: 'pointer'
  581. })
  582. )
  583. // Text decoration
  584. let prefixDecoration = require('caniuse-lite/data/features/text-decoration')
  585. f(prefixDecoration, { match: /x.*#[235]/ }, browsers =>
  586. prefix(['text-decoration-skip', 'text-decoration-skip-ink'], {
  587. browsers,
  588. feature: 'text-decoration'
  589. })
  590. )
  591. let prefixDecorationShorthand = require('caniuse-lite/data/features/mdn-text-decoration-shorthand')
  592. f(prefixDecorationShorthand, browsers =>
  593. prefix(['text-decoration'], {
  594. browsers,
  595. feature: 'text-decoration'
  596. })
  597. )
  598. let prefixDecorationColor = require('caniuse-lite/data/features/mdn-text-decoration-color')
  599. f(prefixDecorationColor, browsers =>
  600. prefix(['text-decoration-color'], {
  601. browsers,
  602. feature: 'text-decoration'
  603. })
  604. )
  605. let prefixDecorationLine = require('caniuse-lite/data/features/mdn-text-decoration-line')
  606. f(prefixDecorationLine, browsers =>
  607. prefix(['text-decoration-line'], {
  608. browsers,
  609. feature: 'text-decoration'
  610. })
  611. )
  612. let prefixDecorationStyle = require('caniuse-lite/data/features/mdn-text-decoration-style')
  613. f(prefixDecorationStyle, browsers =>
  614. prefix(['text-decoration-style'], {
  615. browsers,
  616. feature: 'text-decoration'
  617. })
  618. )
  619. // Text Size Adjust
  620. let prefixTextSizeAdjust = require('caniuse-lite/data/features/text-size-adjust')
  621. f(prefixTextSizeAdjust, browsers =>
  622. prefix(['text-size-adjust'], {
  623. browsers,
  624. feature: 'text-size-adjust'
  625. })
  626. )
  627. // CSS Masks
  628. let prefixCssMasks = require('caniuse-lite/data/features/css-masks')
  629. f(prefixCssMasks, browsers => {
  630. prefix(
  631. [
  632. 'mask-clip',
  633. 'mask-composite',
  634. 'mask-image',
  635. 'mask-origin',
  636. 'mask-repeat',
  637. 'mask-border-repeat',
  638. 'mask-border-source'
  639. ],
  640. {
  641. browsers,
  642. feature: 'css-masks'
  643. }
  644. )
  645. prefix(
  646. [
  647. 'mask',
  648. 'mask-position',
  649. 'mask-size',
  650. 'mask-border',
  651. 'mask-border-outset',
  652. 'mask-border-width',
  653. 'mask-border-slice'
  654. ],
  655. {
  656. browsers,
  657. feature: 'css-masks'
  658. }
  659. )
  660. })
  661. // CSS clip-path property
  662. let prefixClipPath = require('caniuse-lite/data/features/css-clip-path')
  663. f(prefixClipPath, browsers =>
  664. prefix(['clip-path'], {
  665. browsers,
  666. feature: 'css-clip-path'
  667. })
  668. )
  669. // Fragmented Borders and Backgrounds
  670. let prefixBoxdecoration = require('caniuse-lite/data/features/css-boxdecorationbreak')
  671. f(prefixBoxdecoration, browsers =>
  672. prefix(['box-decoration-break'], {
  673. browsers,
  674. feature: 'css-boxdecorationbreak'
  675. })
  676. )
  677. // CSS3 object-fit/object-position
  678. let prefixObjectFit = require('caniuse-lite/data/features/object-fit')
  679. f(prefixObjectFit, browsers =>
  680. prefix(['object-fit', 'object-position'], {
  681. browsers,
  682. feature: 'object-fit'
  683. })
  684. )
  685. // CSS Shapes
  686. let prefixShapes = require('caniuse-lite/data/features/css-shapes')
  687. f(prefixShapes, browsers =>
  688. prefix(['shape-margin', 'shape-outside', 'shape-image-threshold'], {
  689. browsers,
  690. feature: 'css-shapes'
  691. })
  692. )
  693. // CSS3 text-overflow
  694. let prefixTextOverflow = require('caniuse-lite/data/features/text-overflow')
  695. f(prefixTextOverflow, browsers =>
  696. prefix(['text-overflow'], {
  697. browsers,
  698. feature: 'text-overflow'
  699. })
  700. )
  701. // Viewport at-rule
  702. let prefixDeviceadaptation = require('caniuse-lite/data/features/css-deviceadaptation')
  703. f(prefixDeviceadaptation, browsers =>
  704. prefix(['@viewport'], {
  705. browsers,
  706. feature: 'css-deviceadaptation'
  707. })
  708. )
  709. // Resolution Media Queries
  710. let prefixResolut = require('caniuse-lite/data/features/css-media-resolution')
  711. f(prefixResolut, { match: /( x($| )|a #2)/ }, browsers =>
  712. prefix(['@resolution'], {
  713. browsers,
  714. feature: 'css-media-resolution'
  715. })
  716. )
  717. // CSS text-align-last
  718. let prefixTextAlignLast = require('caniuse-lite/data/features/css-text-align-last')
  719. f(prefixTextAlignLast, browsers =>
  720. prefix(['text-align-last'], {
  721. browsers,
  722. feature: 'css-text-align-last'
  723. })
  724. )
  725. // Crisp Edges Image Rendering Algorithm
  726. let prefixCrispedges = require('caniuse-lite/data/features/css-crisp-edges')
  727. f(prefixCrispedges, { match: /y x|a x #1/ }, browsers =>
  728. prefix(['pixelated'], {
  729. browsers,
  730. feature: 'css-crisp-edges',
  731. props: ['image-rendering']
  732. })
  733. )
  734. f(prefixCrispedges, { match: /a x #2/ }, browsers =>
  735. prefix(['image-rendering'], {
  736. browsers,
  737. feature: 'css-crisp-edges'
  738. })
  739. )
  740. // Logical Properties
  741. let prefixLogicalProps = require('caniuse-lite/data/features/css-logical-props')
  742. f(prefixLogicalProps, browsers =>
  743. prefix(
  744. [
  745. 'border-inline-start',
  746. 'border-inline-end',
  747. 'margin-inline-start',
  748. 'margin-inline-end',
  749. 'padding-inline-start',
  750. 'padding-inline-end'
  751. ],
  752. {
  753. browsers,
  754. feature: 'css-logical-props'
  755. }
  756. )
  757. )
  758. f(prefixLogicalProps, { match: /x\s#2/ }, browsers =>
  759. prefix(
  760. [
  761. 'border-block-start',
  762. 'border-block-end',
  763. 'margin-block-start',
  764. 'margin-block-end',
  765. 'padding-block-start',
  766. 'padding-block-end'
  767. ],
  768. {
  769. browsers,
  770. feature: 'css-logical-props'
  771. }
  772. )
  773. )
  774. // CSS appearance
  775. let prefixAppearance = require('caniuse-lite/data/features/css-appearance')
  776. f(prefixAppearance, { match: /#2|x/ }, browsers =>
  777. prefix(['appearance'], {
  778. browsers,
  779. feature: 'css-appearance'
  780. })
  781. )
  782. // CSS Scroll snap points
  783. let prefixSnappoints = require('caniuse-lite/data/features/css-snappoints')
  784. f(prefixSnappoints, browsers =>
  785. prefix(
  786. [
  787. 'scroll-snap-type',
  788. 'scroll-snap-coordinate',
  789. 'scroll-snap-destination',
  790. 'scroll-snap-points-x',
  791. 'scroll-snap-points-y'
  792. ],
  793. {
  794. browsers,
  795. feature: 'css-snappoints'
  796. }
  797. )
  798. )
  799. // CSS Regions
  800. let prefixRegions = require('caniuse-lite/data/features/css-regions')
  801. f(prefixRegions, browsers =>
  802. prefix(['flow-into', 'flow-from', 'region-fragment'], {
  803. browsers,
  804. feature: 'css-regions'
  805. })
  806. )
  807. // CSS image-set
  808. let prefixImageSet = require('caniuse-lite/data/features/css-image-set')
  809. f(prefixImageSet, browsers =>
  810. prefix(['image-set'], {
  811. browsers,
  812. feature: 'css-image-set',
  813. props: [
  814. 'background',
  815. 'background-image',
  816. 'border-image',
  817. 'cursor',
  818. 'mask',
  819. 'mask-image',
  820. 'list-style',
  821. 'list-style-image',
  822. 'content'
  823. ]
  824. })
  825. )
  826. // Writing Mode
  827. let prefixWritingMode = require('caniuse-lite/data/features/css-writing-mode')
  828. f(prefixWritingMode, { match: /a|x/ }, browsers =>
  829. prefix(['writing-mode'], {
  830. browsers,
  831. feature: 'css-writing-mode'
  832. })
  833. )
  834. // Cross-Fade Function
  835. let prefixCrossFade = require('caniuse-lite/data/features/css-cross-fade')
  836. f(prefixCrossFade, browsers =>
  837. prefix(['cross-fade'], {
  838. browsers,
  839. feature: 'css-cross-fade',
  840. props: [
  841. 'background',
  842. 'background-image',
  843. 'border-image',
  844. 'mask',
  845. 'list-style',
  846. 'list-style-image',
  847. 'content',
  848. 'mask-image'
  849. ]
  850. })
  851. )
  852. // Read Only selector
  853. let prefixReadOnly = require('caniuse-lite/data/features/css-read-only-write')
  854. f(prefixReadOnly, browsers =>
  855. prefix([':read-only', ':read-write'], {
  856. browsers,
  857. feature: 'css-read-only-write',
  858. selector: true
  859. })
  860. )
  861. // Text Emphasize
  862. let prefixTextEmphasis = require('caniuse-lite/data/features/text-emphasis')
  863. f(prefixTextEmphasis, browsers =>
  864. prefix(
  865. [
  866. 'text-emphasis',
  867. 'text-emphasis-position',
  868. 'text-emphasis-style',
  869. 'text-emphasis-color'
  870. ],
  871. {
  872. browsers,
  873. feature: 'text-emphasis'
  874. }
  875. )
  876. )
  877. // CSS Grid Layout
  878. let prefixGrid = require('caniuse-lite/data/features/css-grid')
  879. f(prefixGrid, browsers => {
  880. prefix(['display-grid', 'inline-grid'], {
  881. browsers,
  882. feature: 'css-grid',
  883. props: ['display']
  884. })
  885. prefix(
  886. [
  887. 'grid-template-columns',
  888. 'grid-template-rows',
  889. 'grid-row-start',
  890. 'grid-column-start',
  891. 'grid-row-end',
  892. 'grid-column-end',
  893. 'grid-row',
  894. 'grid-column',
  895. 'grid-area',
  896. 'grid-template',
  897. 'grid-template-areas',
  898. 'place-self'
  899. ],
  900. {
  901. browsers,
  902. feature: 'css-grid'
  903. }
  904. )
  905. })
  906. f(prefixGrid, { match: /a x/ }, browsers =>
  907. prefix(['grid-column-align', 'grid-row-align'], {
  908. browsers,
  909. feature: 'css-grid'
  910. })
  911. )
  912. // CSS text-spacing
  913. let prefixTextSpacing = require('caniuse-lite/data/features/css-text-spacing')
  914. f(prefixTextSpacing, browsers =>
  915. prefix(['text-spacing'], {
  916. browsers,
  917. feature: 'css-text-spacing'
  918. })
  919. )
  920. // :any-link selector
  921. let prefixAnyLink = require('caniuse-lite/data/features/css-any-link')
  922. f(prefixAnyLink, browsers =>
  923. prefix([':any-link'], {
  924. browsers,
  925. feature: 'css-any-link',
  926. selector: true
  927. })
  928. )
  929. // unicode-bidi
  930. let bidiIsolate = require('caniuse-lite/data/features/mdn-css-unicode-bidi-isolate')
  931. f(bidiIsolate, browsers =>
  932. prefix(['isolate'], {
  933. browsers,
  934. feature: 'css-unicode-bidi',
  935. props: ['unicode-bidi']
  936. })
  937. )
  938. let bidiPlaintext = require('caniuse-lite/data/features/mdn-css-unicode-bidi-plaintext')
  939. f(bidiPlaintext, browsers =>
  940. prefix(['plaintext'], {
  941. browsers,
  942. feature: 'css-unicode-bidi',
  943. props: ['unicode-bidi']
  944. })
  945. )
  946. let bidiOverride = require('caniuse-lite/data/features/mdn-css-unicode-bidi-isolate-override')
  947. f(bidiOverride, { match: /y x/ }, browsers =>
  948. prefix(['isolate-override'], {
  949. browsers,
  950. feature: 'css-unicode-bidi',
  951. props: ['unicode-bidi']
  952. })
  953. )
  954. // overscroll-behavior selector
  955. let prefixOverscroll = require('caniuse-lite/data/features/css-overscroll-behavior')
  956. f(prefixOverscroll, { match: /a #1/ }, browsers =>
  957. prefix(['overscroll-behavior'], {
  958. browsers,
  959. feature: 'css-overscroll-behavior'
  960. })
  961. )
  962. // text-orientation
  963. let prefixTextOrientation = require('caniuse-lite/data/features/css-text-orientation')
  964. f(prefixTextOrientation, browsers =>
  965. prefix(['text-orientation'], {
  966. browsers,
  967. feature: 'css-text-orientation'
  968. })
  969. )
  970. // print-color-adjust
  971. let prefixPrintAdjust = require('caniuse-lite/data/features/css-print-color-adjust')
  972. f(prefixPrintAdjust, browsers =>
  973. prefix(['print-color-adjust', 'color-adjust'], {
  974. browsers,
  975. feature: 'css-print-color-adjust'
  976. })
  977. )