source: trip-planner-front/node_modules/postcss-media-minmax/index.js@ 76712b2

Last change on this file since 76712b2 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 3.8 KB
Line 
1var postcss = require('postcss');
2
3module.exports = postcss.plugin('postcss-media-minmax', function () {
4 return function(css) {
5 var feature_unit = {
6 'width': 'px',
7 'height': 'px',
8 'device-width': 'px',
9 'device-height': 'px',
10 'aspect-ratio': '',
11 'device-aspect-ratio': '',
12 'color': '',
13 'color-index': '',
14 'monochrome': '',
15 'resolution': 'dpi'
16 };
17
18 //支持 min-/max- 前缀的属性
19 var feature_name = Object.keys(feature_unit);
20
21 var step = .001; // smallest even number that won’t break complex queries (1in = 96px)
22
23 var power = {
24 '>': 1,
25 '<': -1
26 };
27
28 var minmax = {
29 '>': 'min',
30 '<': 'max'
31 };
32
33 function create_query(name, gtlt, eq, value, params) {
34 return value.replace(/([-\d\.]+)(.*)/, function (match, number, unit) {
35 var initialNumber = parseFloat(number);
36
37 if (parseFloat(number) || eq) {
38 // if eq is true, then number remains same
39 if (!eq) {
40 // change integer pixels value only on integer pixel
41 if (unit === 'px' && initialNumber === parseInt(number, 10)) {
42 number = initialNumber + power[gtlt];
43 } else {
44 number = Number(Math.round(parseFloat(number) + step * power[gtlt] + 'e6')+'e-6');
45 }
46 }
47 } else {
48 number = power[gtlt] + feature_unit[name];
49 }
50
51 return '(' + minmax[gtlt] + '-' + name + ': ' + number + unit + ')';
52 });
53 }
54
55 // 读取 media-feature
56 css.walkAtRules(function(rule, i) {
57 if (rule.name !== "media" && rule.name !== "custom-media") {
58 return
59 }
60
61 /**
62 * 转换 <mf-name> <|>= <mf-value>
63 * $1 $2 $3
64 * (width >= 300px) => (min-width: 300px)
65 * (width <= 900px) => (max-width: 900px)
66 */
67
68 //取值不支持负值
69 //But -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.
70
71 rule.params = rule.params.replace(/\(\s*([a-z-]+?)\s*([<>])(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4) {
72
73 var params = '';
74
75 if (feature_name.indexOf($1) > -1) {
76 return create_query($1, $2, $3, $4, rule.params);
77 }
78 //如果不是指定的属性,不做替换
79 return $0;
80 })
81
82 /**
83 * 转换 <mf-value> <|<= <mf-name> <|<= <mf-value>
84 * 转换 <mf-value> >|>= <mf-name> >|>= <mf-value>
85 * $1 $2$3 $4 $5$6 $7
86 * (500px <= width <= 1200px) => (min-width: 500px) and (max-width: 1200px)
87 * (500px < width <= 1200px) => (min-width: 501px) and (max-width: 1200px)
88 * (900px >= width >= 300px) => (min-width: 300px) and (max-width: 900px)
89 */
90
91 rule.params = rule.params.replace(/\(\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*(<|>)(=?)\s*([a-z-]+)\s*(<|>)(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4, $5, $6, $7) {
92
93 if (feature_name.indexOf($4) > -1) {
94 if ($2 === '<' && $5 === '<' || $2 === '>' && $5 === '>') {
95 var min = ($2 === '<') ? $1 : $7;
96 var max = ($2 === '<') ? $7 : $1;
97
98 // output differently depended on expression direction
99 // <mf-value> <|<= <mf-name> <|<= <mf-value>
100 // or
101 // <mf-value> >|>= <mf-name> >|>= <mf-value>
102 var equals_for_min = $3;
103 var equals_for_max = $6;
104
105 if ($2 === '>') {
106 equals_for_min = $6;
107 equals_for_max = $3;
108 }
109
110 return create_query($4, '>', equals_for_min, min) + ' and ' + create_query($4, '<', equals_for_max, max);
111 }
112 }
113 //如果不是指定的属性,不做替换
114 return $0;
115
116 });
117
118 });
119
120 }
121});
Note: See TracBrowser for help on using the repository browser.