UNPKG

20.9 kBJavaScriptView Raw
1"use strict";
2
3var unpack = require('caniuse-lite').feature;
4
5function browsersSort(a, b) {
6 a = a.split(' ');
7 b = b.split(' ');
8
9 if (a[0] > b[0]) {
10 return 1;
11 } else if (a[0] < b[0]) {
12 return -1;
13 } else {
14 return Math.sign(parseFloat(a[1]) - parseFloat(b[1]));
15 }
16} // Convert Can I Use data
17
18
19function f(data, opts, callback) {
20 data = unpack(data);
21
22 if (!callback) {
23 var _ref = [opts, {}];
24 callback = _ref[0];
25 opts = _ref[1];
26 }
27
28 var match = opts.match || /\sx($|\s)/;
29 var need = [];
30
31 for (var browser in data.stats) {
32 var versions = data.stats[browser];
33
34 for (var version in versions) {
35 var support = versions[version];
36
37 if (support.match(match)) {
38 need.push(browser + ' ' + version);
39 }
40 }
41 }
42
43 callback(need.sort(browsersSort));
44} // Add data for all properties
45
46
47var result = {};
48
49function prefix(names, data) {
50 for (var _iterator = names, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
51 var _ref2;
52
53 if (_isArray) {
54 if (_i >= _iterator.length) break;
55 _ref2 = _iterator[_i++];
56 } else {
57 _i = _iterator.next();
58 if (_i.done) break;
59 _ref2 = _i.value;
60 }
61
62 var name = _ref2;
63 result[name] = Object.assign({}, data);
64 }
65}
66
67function add(names, data) {
68 for (var _iterator2 = names, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
69 var _ref3;
70
71 if (_isArray2) {
72 if (_i2 >= _iterator2.length) break;
73 _ref3 = _iterator2[_i2++];
74 } else {
75 _i2 = _iterator2.next();
76 if (_i2.done) break;
77 _ref3 = _i2.value;
78 }
79
80 var name = _ref3;
81 result[name].browsers = result[name].browsers.concat(data.browsers).sort(browsersSort);
82 }
83}
84
85module.exports = result; // Border Radius
86
87f(require('caniuse-lite/data/features/border-radius'), function (browsers) {
88 return prefix(['border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'], {
89 mistakes: ['-khtml-', '-ms-', '-o-'],
90 feature: 'border-radius',
91 browsers: browsers
92 });
93}); // Box Shadow
94
95f(require('caniuse-lite/data/features/css-boxshadow'), function (browsers) {
96 return prefix(['box-shadow'], {
97 mistakes: ['-khtml-'],
98 feature: 'css-boxshadow',
99 browsers: browsers
100 });
101}); // Animation
102
103f(require('caniuse-lite/data/features/css-animation'), function (browsers) {
104 return prefix(['animation', 'animation-name', 'animation-duration', 'animation-delay', 'animation-direction', 'animation-fill-mode', 'animation-iteration-count', 'animation-play-state', 'animation-timing-function', '@keyframes'], {
105 mistakes: ['-khtml-', '-ms-'],
106 feature: 'css-animation',
107 browsers: browsers
108 });
109}); // Transition
110
111f(require('caniuse-lite/data/features/css-transitions'), function (browsers) {
112 return prefix(['transition', 'transition-property', 'transition-duration', 'transition-delay', 'transition-timing-function'], {
113 mistakes: ['-khtml-', '-ms-'],
114 browsers: browsers,
115 feature: 'css-transitions'
116 });
117}); // Transform 2D
118
119f(require('caniuse-lite/data/features/transforms2d'), function (browsers) {
120 return prefix(['transform', 'transform-origin'], {
121 feature: 'transforms2d',
122 browsers: browsers
123 });
124}); // Transform 3D
125
126var transforms3d = require('caniuse-lite/data/features/transforms3d');
127
128f(transforms3d, function (browsers) {
129 prefix(['perspective', 'perspective-origin'], {
130 feature: 'transforms3d',
131 browsers: browsers
132 });
133 return prefix(['transform-style'], {
134 mistakes: ['-ms-', '-o-'],
135 browsers: browsers,
136 feature: 'transforms3d'
137 });
138});
139f(transforms3d, {
140 match: /y\sx|y\s#2/
141}, function (browsers) {
142 return prefix(['backface-visibility'], {
143 mistakes: ['-ms-', '-o-'],
144 feature: 'transforms3d',
145 browsers: browsers
146 });
147}); // Gradients
148
149var gradients = require('caniuse-lite/data/features/css-gradients');
150
151f(gradients, {
152 match: /y\sx/
153}, function (browsers) {
154 return prefix(['linear-gradient', 'repeating-linear-gradient', 'radial-gradient', 'repeating-radial-gradient'], {
155 props: ['background', 'background-image', 'border-image', 'mask', 'list-style', 'list-style-image', 'content', 'mask-image'],
156 mistakes: ['-ms-'],
157 feature: 'css-gradients',
158 browsers: browsers
159 });
160});
161f(gradients, {
162 match: /a\sx/
163}, function (browsers) {
164 browsers = browsers.map(function (i) {
165 if (/firefox|op/.test(i)) {
166 return i;
167 } else {
168 return i + " old";
169 }
170 });
171 return add(['linear-gradient', 'repeating-linear-gradient', 'radial-gradient', 'repeating-radial-gradient'], {
172 feature: 'css-gradients',
173 browsers: browsers
174 });
175}); // Box sizing
176
177f(require('caniuse-lite/data/features/css3-boxsizing'), function (browsers) {
178 return prefix(['box-sizing'], {
179 feature: 'css3-boxsizing',
180 browsers: browsers
181 });
182}); // Filter Effects
183
184f(require('caniuse-lite/data/features/css-filters'), function (browsers) {
185 return prefix(['filter'], {
186 feature: 'css-filters',
187 browsers: browsers
188 });
189}); // filter() function
190
191f(require('caniuse-lite/data/features/css-filter-function'), function (browsers) {
192 return prefix(['filter-function'], {
193 props: ['background', 'background-image', 'border-image', 'mask', 'list-style', 'list-style-image', 'content', 'mask-image'],
194 feature: 'css-filter-function',
195 browsers: browsers
196 });
197}); // Backdrop-filter
198
199f(require('caniuse-lite/data/features/css-backdrop-filter'), function (browsers) {
200 return prefix(['backdrop-filter'], {
201 feature: 'css-backdrop-filter',
202 browsers: browsers
203 });
204}); // element() function
205
206f(require('caniuse-lite/data/features/css-element-function'), function (browsers) {
207 return prefix(['element'], {
208 props: ['background', 'background-image', 'border-image', 'mask', 'list-style', 'list-style-image', 'content', 'mask-image'],
209 feature: 'css-element-function',
210 browsers: browsers
211 });
212}); // Multicolumns
213
214f(require('caniuse-lite/data/features/multicolumn'), function (browsers) {
215 prefix(['columns', 'column-width', 'column-gap', 'column-rule', 'column-rule-color', 'column-rule-width', 'column-count', 'column-rule-style', 'column-span', 'column-fill'], {
216 feature: 'multicolumn',
217 browsers: browsers
218 });
219 var noff = browsers.filter(function (i) {
220 return !/firefox/.test(i);
221 });
222 prefix(['break-before', 'break-after', 'break-inside'], {
223 feature: 'multicolumn',
224 browsers: noff
225 });
226}); // User select
227
228f(require('caniuse-lite/data/features/user-select-none'), function (browsers) {
229 return prefix(['user-select'], {
230 mistakes: ['-khtml-'],
231 feature: 'user-select-none',
232 browsers: browsers
233 });
234}); // Flexible Box Layout
235
236var flexbox = require('caniuse-lite/data/features/flexbox');
237
238f(flexbox, {
239 match: /a\sx/
240}, function (browsers) {
241 browsers = browsers.map(function (i) {
242 if (/ie|firefox/.test(i)) {
243 return i;
244 } else {
245 return i + " 2009";
246 }
247 });
248 prefix(['display-flex', 'inline-flex'], {
249 props: ['display'],
250 feature: 'flexbox',
251 browsers: browsers
252 });
253 prefix(['flex', 'flex-grow', 'flex-shrink', 'flex-basis'], {
254 feature: 'flexbox',
255 browsers: browsers
256 });
257 prefix(['flex-direction', 'flex-wrap', 'flex-flow', 'justify-content', 'order', 'align-items', 'align-self', 'align-content'], {
258 feature: 'flexbox',
259 browsers: browsers
260 });
261});
262f(flexbox, {
263 match: /y\sx/
264}, function (browsers) {
265 add(['display-flex', 'inline-flex'], {
266 feature: 'flexbox',
267 browsers: browsers
268 });
269 add(['flex', 'flex-grow', 'flex-shrink', 'flex-basis'], {
270 feature: 'flexbox',
271 browsers: browsers
272 });
273 add(['flex-direction', 'flex-wrap', 'flex-flow', 'justify-content', 'order', 'align-items', 'align-self', 'align-content'], {
274 feature: 'flexbox',
275 browsers: browsers
276 });
277}); // calc() unit
278
279f(require('caniuse-lite/data/features/calc'), function (browsers) {
280 return prefix(['calc'], {
281 props: ['*'],
282 feature: 'calc',
283 browsers: browsers
284 });
285}); // Background options
286
287f(require('caniuse-lite/data/features/background-img-opts'), function (browsers) {
288 return prefix(['background-origin', 'background-size'], {
289 feature: 'background-img-opts',
290 browsers: browsers
291 });
292}); // background-clip: text
293
294f(require('caniuse-lite/data/features/background-clip-text'), function (browsers) {
295 return prefix(['background-clip'], {
296 feature: 'background-clip-text',
297 browsers: browsers
298 });
299}); // Font feature settings
300
301f(require('caniuse-lite/data/features/font-feature'), function (browsers) {
302 return prefix(['font-feature-settings', 'font-variant-ligatures', 'font-language-override'], {
303 feature: 'font-feature',
304 browsers: browsers
305 });
306}); // CSS font-kerning property
307
308f(require('caniuse-lite/data/features/font-kerning'), function (browsers) {
309 return prefix(['font-kerning'], {
310 feature: 'font-kerning',
311 browsers: browsers
312 });
313}); // Border image
314
315f(require('caniuse-lite/data/features/border-image'), function (browsers) {
316 return prefix(['border-image'], {
317 feature: 'border-image',
318 browsers: browsers
319 });
320}); // Selection selector
321
322f(require('caniuse-lite/data/features/css-selection'), function (browsers) {
323 return prefix(['::selection'], {
324 selector: true,
325 feature: 'css-selection',
326 browsers: browsers
327 });
328}); // Placeholder selector
329
330f(require('caniuse-lite/data/features/css-placeholder'), function (browsers) {
331 prefix(['::placeholder'], {
332 selector: true,
333 feature: 'css-placeholder',
334 browsers: browsers.concat(['ie 10 old', 'ie 11 old', 'firefox 18 old'])
335 });
336}); // Hyphenation
337
338f(require('caniuse-lite/data/features/css-hyphens'), function (browsers) {
339 return prefix(['hyphens'], {
340 feature: 'css-hyphens',
341 browsers: browsers
342 });
343}); // Fullscreen selector
344
345var fullscreen = require('caniuse-lite/data/features/fullscreen');
346
347f(fullscreen, function (browsers) {
348 return prefix([':fullscreen'], {
349 selector: true,
350 feature: 'fullscreen',
351 browsers: browsers
352 });
353});
354f(fullscreen, {
355 match: /x(\s#2|$)/
356}, function (browsers) {
357 return prefix(['::backdrop'], {
358 selector: true,
359 feature: 'fullscreen',
360 browsers: browsers
361 });
362}); // Tab size
363
364f(require('caniuse-lite/data/features/css3-tabsize'), function (browsers) {
365 return prefix(['tab-size'], {
366 feature: 'css3-tabsize',
367 browsers: browsers
368 });
369}); // Intrinsic & extrinsic sizing
370
371var intrinsic = require('caniuse-lite/data/features/intrinsic-width');
372
373f(intrinsic, function (browsers) {
374 return prefix(['max-content', 'min-content', 'fit-content'], {
375 props: ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'],
376 feature: 'intrinsic-width',
377 browsers: browsers
378 });
379});
380f(intrinsic, {
381 match: /x|\s#4/
382}, function (browsers) {
383 return prefix(['fill', 'fill-available', 'stretch'], {
384 props: ['width', 'min-width', 'max-width', 'height', 'min-height', 'max-height', 'inline-size', 'min-inline-size', 'max-inline-size', 'block-size', 'min-block-size', 'max-block-size', 'grid', 'grid-template', 'grid-template-rows', 'grid-template-columns', 'grid-auto-columns', 'grid-auto-rows'],
385 feature: 'intrinsic-width',
386 browsers: browsers
387 });
388}); // Zoom cursors
389
390f(require('caniuse-lite/data/features/css3-cursors-newer'), function (browsers) {
391 return prefix(['zoom-in', 'zoom-out'], {
392 props: ['cursor'],
393 feature: 'css3-cursors-newer',
394 browsers: browsers
395 });
396}); // Grab cursors
397
398f(require('caniuse-lite/data/features/css3-cursors-grab'), function (browsers) {
399 return prefix(['grab', 'grabbing'], {
400 props: ['cursor'],
401 feature: 'css3-cursors-grab',
402 browsers: browsers
403 });
404}); // Sticky position
405
406f(require('caniuse-lite/data/features/css-sticky'), function (browsers) {
407 return prefix(['sticky'], {
408 props: ['position'],
409 feature: 'css-sticky',
410 browsers: browsers
411 });
412}); // Pointer Events
413
414f(require('caniuse-lite/data/features/pointer'), function (browsers) {
415 return prefix(['touch-action'], {
416 feature: 'pointer',
417 browsers: browsers
418 });
419}); // Text decoration
420
421var decoration = require('caniuse-lite/data/features/text-decoration');
422
423f(decoration, function (browsers) {
424 return prefix(['text-decoration-style', 'text-decoration-color', 'text-decoration-line', 'text-decoration'], {
425 feature: 'text-decoration',
426 browsers: browsers
427 });
428});
429f(decoration, {
430 match: /x.*#[235]/
431}, function (browsers) {
432 return prefix(['text-decoration-skip', 'text-decoration-skip-ink'], {
433 feature: 'text-decoration',
434 browsers: browsers
435 });
436}); // Text Size Adjust
437
438f(require('caniuse-lite/data/features/text-size-adjust'), function (browsers) {
439 return prefix(['text-size-adjust'], {
440 feature: 'text-size-adjust',
441 browsers: browsers
442 });
443}); // CSS Masks
444
445f(require('caniuse-lite/data/features/css-masks'), function (browsers) {
446 prefix(['mask-clip', 'mask-composite', 'mask-image', 'mask-origin', 'mask-repeat', 'mask-border-repeat', 'mask-border-source'], {
447 feature: 'css-masks',
448 browsers: browsers
449 });
450 prefix(['mask', 'mask-position', 'mask-size', 'mask-border', 'mask-border-outset', 'mask-border-width', 'mask-border-slice'], {
451 feature: 'css-masks',
452 browsers: browsers
453 });
454}); // CSS clip-path property
455
456f(require('caniuse-lite/data/features/css-clip-path'), function (browsers) {
457 return prefix(['clip-path'], {
458 feature: 'css-clip-path',
459 browsers: browsers
460 });
461}); // Fragmented Borders and Backgrounds
462
463f(require('caniuse-lite/data/features/css-boxdecorationbreak'), function (browsers) {
464 return prefix(['box-decoration-break'], {
465 feature: 'css-boxdecorationbreak',
466 browsers: browsers
467 });
468}); // CSS3 object-fit/object-position
469
470f(require('caniuse-lite/data/features/object-fit'), function (browsers) {
471 return prefix(['object-fit', 'object-position'], {
472 feature: 'object-fit',
473 browsers: browsers
474 });
475}); // CSS Shapes
476
477f(require('caniuse-lite/data/features/css-shapes'), function (browsers) {
478 return prefix(['shape-margin', 'shape-outside', 'shape-image-threshold'], {
479 feature: 'css-shapes',
480 browsers: browsers
481 });
482}); // CSS3 text-overflow
483
484f(require('caniuse-lite/data/features/text-overflow'), function (browsers) {
485 return prefix(['text-overflow'], {
486 feature: 'text-overflow',
487 browsers: browsers
488 });
489}); // Viewport at-rule
490
491f(require('caniuse-lite/data/features/css-deviceadaptation'), function (browsers) {
492 return prefix(['@viewport'], {
493 feature: 'css-deviceadaptation',
494 browsers: browsers
495 });
496}); // Resolution Media Queries
497
498var resolut = require('caniuse-lite/data/features/css-media-resolution');
499
500f(resolut, {
501 match: /( x($| )|a #3)/
502}, function (browsers) {
503 return prefix(['@resolution'], {
504 feature: 'css-media-resolution',
505 browsers: browsers
506 });
507}); // CSS text-align-last
508
509f(require('caniuse-lite/data/features/css-text-align-last'), function (browsers) {
510 return prefix(['text-align-last'], {
511 feature: 'css-text-align-last',
512 browsers: browsers
513 });
514}); // Crisp Edges Image Rendering Algorithm
515
516var crispedges = require('caniuse-lite/data/features/css-crisp-edges');
517
518f(crispedges, {
519 match: /y x|a x #1/
520}, function (browsers) {
521 return prefix(['pixelated'], {
522 props: ['image-rendering'],
523 feature: 'css-crisp-edges',
524 browsers: browsers
525 });
526});
527f(crispedges, {
528 match: /a x #2/
529}, function (browsers) {
530 return prefix(['image-rendering'], {
531 feature: 'css-crisp-edges',
532 browsers: browsers
533 });
534}); // Logical Properties
535
536var logicalProps = require('caniuse-lite/data/features/css-logical-props');
537
538f(logicalProps, function (browsers) {
539 return prefix(['border-inline-start', 'border-inline-end', 'margin-inline-start', 'margin-inline-end', 'padding-inline-start', 'padding-inline-end'], {
540 feature: 'css-logical-props',
541 browsers: browsers
542 });
543});
544f(logicalProps, {
545 match: /x\s#2/
546}, function (browsers) {
547 return prefix(['border-block-start', 'border-block-end', 'margin-block-start', 'margin-block-end', 'padding-block-start', 'padding-block-end'], {
548 feature: 'css-logical-props',
549 browsers: browsers
550 });
551}); // CSS appearance
552
553var appearance = require('caniuse-lite/data/features/css-appearance');
554
555f(appearance, {
556 match: /#2|x/
557}, function (browsers) {
558 return prefix(['appearance'], {
559 feature: 'css-appearance',
560 browsers: browsers
561 });
562}); // CSS Scroll snap points
563
564f(require('caniuse-lite/data/features/css-snappoints'), function (browsers) {
565 return prefix(['scroll-snap-type', 'scroll-snap-coordinate', 'scroll-snap-destination', 'scroll-snap-points-x', 'scroll-snap-points-y'], {
566 feature: 'css-snappoints',
567 browsers: browsers
568 });
569}); // CSS Regions
570
571f(require('caniuse-lite/data/features/css-regions'), function (browsers) {
572 return prefix(['flow-into', 'flow-from', 'region-fragment'], {
573 feature: 'css-regions',
574 browsers: browsers
575 });
576}); // CSS image-set
577
578f(require('caniuse-lite/data/features/css-image-set'), function (browsers) {
579 return prefix(['image-set'], {
580 props: ['background', 'background-image', 'border-image', 'cursor', 'mask', 'mask-image', 'list-style', 'list-style-image', 'content'],
581 feature: 'css-image-set',
582 browsers: browsers
583 });
584}); // Writing Mode
585
586var writingMode = require('caniuse-lite/data/features/css-writing-mode');
587
588f(writingMode, {
589 match: /a|x/
590}, function (browsers) {
591 return prefix(['writing-mode'], {
592 feature: 'css-writing-mode',
593 browsers: browsers
594 });
595}); // Cross-Fade Function
596
597f(require('caniuse-lite/data/features/css-cross-fade'), function (browsers) {
598 return prefix(['cross-fade'], {
599 props: ['background', 'background-image', 'border-image', 'mask', 'list-style', 'list-style-image', 'content', 'mask-image'],
600 feature: 'css-cross-fade',
601 browsers: browsers
602 });
603}); // Read Only selector
604
605f(require('caniuse-lite/data/features/css-read-only-write'), function (browsers) {
606 return prefix([':read-only', ':read-write'], {
607 selector: true,
608 feature: 'css-read-only-write',
609 browsers: browsers
610 });
611}); // Text Emphasize
612
613f(require('caniuse-lite/data/features/text-emphasis'), function (browsers) {
614 return prefix(['text-emphasis', 'text-emphasis-position', 'text-emphasis-style', 'text-emphasis-color'], {
615 feature: 'text-emphasis',
616 browsers: browsers
617 });
618}); // CSS Grid Layout
619
620var grid = require('caniuse-lite/data/features/css-grid');
621
622f(grid, function (browsers) {
623 prefix(['display-grid', 'inline-grid'], {
624 props: ['display'],
625 feature: 'css-grid',
626 browsers: browsers
627 });
628 prefix(['grid-template-columns', 'grid-template-rows', 'grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end', 'grid-row', 'grid-column', 'grid-area', 'grid-template', 'grid-template-areas', 'place-self'], {
629 feature: 'css-grid',
630 browsers: browsers
631 });
632});
633f(grid, {
634 match: /a x/
635}, function (browsers) {
636 return prefix(['grid-column-align', 'grid-row-align'], {
637 feature: 'css-grid',
638 browsers: browsers
639 });
640}); // CSS text-spacing
641
642f(require('caniuse-lite/data/features/css-text-spacing'), function (browsers) {
643 return prefix(['text-spacing'], {
644 feature: 'css-text-spacing',
645 browsers: browsers
646 });
647}); // :any-link selector
648
649f(require('caniuse-lite/data/features/css-any-link'), function (browsers) {
650 return prefix([':any-link'], {
651 selector: true,
652 feature: 'css-any-link',
653 browsers: browsers
654 });
655}); // unicode-bidi
656
657var bidi = require('caniuse-lite/data/features/css-unicode-bidi');
658
659f(bidi, function (browsers) {
660 return prefix(['isolate'], {
661 props: ['unicode-bidi'],
662 feature: 'css-unicode-bidi',
663 browsers: browsers
664 });
665});
666f(bidi, {
667 match: /y x|a x #2/
668}, function (browsers) {
669 return prefix(['plaintext'], {
670 props: ['unicode-bidi'],
671 feature: 'css-unicode-bidi',
672 browsers: browsers
673 });
674});
675f(bidi, {
676 match: /y x/
677}, function (browsers) {
678 return prefix(['isolate-override'], {
679 props: ['unicode-bidi'],
680 feature: 'css-unicode-bidi',
681 browsers: browsers
682 });
683}); // overscroll-behavior selector
684
685var over = require('caniuse-lite/data/features/css-overscroll-behavior');
686
687f(over, {
688 match: /a #1/
689}, function (browsers) {
690 return prefix(['overscroll-behavior'], {
691 feature: 'css-overscroll-behavior',
692 browsers: browsers
693 });
694}); // color-adjust
695
696f(require('caniuse-lite/data/features/css-color-adjust'), function (browsers) {
697 return prefix(['color-adjust'], {
698 feature: 'css-color-adjust',
699 browsers: browsers
700 });
701});
\No newline at end of file