index.js
3.48 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const feature_unit = {
'width': 'px',
'height': 'px',
'device-width': 'px',
'device-height': 'px',
'aspect-ratio': '',
'device-aspect-ratio': '',
'color': '',
'color-index': '',
'monochrome': '',
'resolution': 'dpi'
};
// Supported min-/max- attributes
const feature_name = Object.keys(feature_unit);
const step = .001; // smallest even number that won’t break complex queries (1in = 96px)
const power = {
'>': 1,
'<': -1
};
const minmax = {
'>': 'min',
'<': 'max'
};
function create_query(name, gtlt, eq, value) {
return value.replace(/([-\d\.]+)(.*)/, function (_match, number, unit) {
const initialNumber = parseFloat(number);
if (parseFloat(number) || eq) {
// if eq is true, then number remains same
if (!eq) {
// change integer pixels value only on integer pixel
if (unit === 'px' && initialNumber === parseInt(number, 10)) {
number = initialNumber + power[gtlt];
} else {
number = Number(Math.round(parseFloat(number) + step * power[gtlt] + 'e6')+'e-6');
}
}
} else {
number = power[gtlt] + feature_unit[name];
}
return '(' + minmax[gtlt] + '-' + name + ': ' + number + unit + ')';
});
}
function transform(rule) {
/**
* 转换 <mf-name> <|>= <mf-value>
* $1 $2 $3
* (width >= 300px) => (min-width: 300px)
* (width <= 900px) => (max-width: 900px)
*/
if (!rule.params.includes('<') && !rule.params.includes('>')) {
return
}
// The value doesn't support negative values
// But -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.
rule.params = rule.params.replace(/\(\s*([a-z-]+?)\s*([<>])(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4) {
if (feature_name.indexOf($1) > -1) {
return create_query($1, $2, $3, $4);
}
// If it is not the specified attribute, don't replace
return $0;
})
/**
* 转换 <mf-value> <|<= <mf-name> <|<= <mf-value>
* 转换 <mf-value> >|>= <mf-name> >|>= <mf-value>
* $1 $2$3 $4 $5$6 $7
* (500px <= width <= 1200px) => (min-width: 500px) and (max-width: 1200px)
* (500px < width <= 1200px) => (min-width: 501px) and (max-width: 1200px)
* (900px >= width >= 300px) => (min-width: 300px) and (max-width: 900px)
*/
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) {
if (feature_name.indexOf($4) > -1) {
if ($2 === '<' && $5 === '<' || $2 === '>' && $5 === '>') {
const min = ($2 === '<') ? $1 : $7;
const max = ($2 === '<') ? $7 : $1;
// output differently depended on expression direction
// <mf-value> <|<= <mf-name> <|<= <mf-value>
// or
// <mf-value> >|>= <mf-name> >|>= <mf-value>
let equals_for_min = $3;
let equals_for_max = $6;
if ($2 === '>') {
equals_for_min = $6;
equals_for_max = $3;
}
return create_query($4, '>', equals_for_min, min) + ' and ' + create_query($4, '<', equals_for_max, max);
}
}
// If it is not the specified attribute, don't replace
return $0;
});
}
module.exports = () => ({
postcssPlugin: 'postcss-media-minmax',
AtRule: {
media: (atRule) => {
transform(atRule);
},
'custom-media': (atRule) => {
transform(atRule);
},
},
});
module.exports.postcss = true