Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 76f0b48

Browse files
SemigradskySemigradsky
committed
Support PostCSS 8
1 parent f25abff commit 76f0b48

File tree

5 files changed

+908
-954
lines changed

5 files changed

+908
-954
lines changed

‎.travis.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
language: node_js
44

55
node_js:
6-
- 6
6+
- 14
7+
- 12
8+
- 10
79

810
install:
911
- npm install --ignore-scripts

‎index.js‎

Lines changed: 111 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,122 @@
1-
var postcss = require('postcss');
2-
3-
module.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-
}
1+
const feature_unit = {
2+
'width': 'px',
3+
'height': 'px',
4+
'device-width': 'px',
5+
'device-height': 'px',
6+
'aspect-ratio': '',
7+
'device-aspect-ratio': '',
8+
'color': '',
9+
'color-index': '',
10+
'monochrome': '',
11+
'resolution': 'dpi'
12+
};
13+
14+
// Supported min-/max- attributes
15+
const feature_name = Object.keys(feature_unit);
16+
17+
const step = .001; // smallest even number that won’t break complex queries (1in = 96px)
18+
19+
const power = {
20+
'>': 1,
21+
'<': -1
22+
};
23+
24+
const minmax = {
25+
'>': 'min',
26+
'<': 'max'
27+
};
28+
29+
function create_query(name, gtlt, eq, value) {
30+
return value.replace(/([-\d\.]+)(.*)/, function (_match, number, unit) {
31+
const initialNumber = parseFloat(number);
32+
33+
if (parseFloat(number) || eq) {
34+
// if eq is true, then number remains same
35+
if (!eq) {
36+
// change integer pixels value only on integer pixel
37+
if (unit === 'px' && initialNumber === parseInt(number, 10)) {
38+
number = initialNumber + power[gtlt];
4739
} else {
48-
number = power[gtlt] + feature_unit[name];
40+
number = Number(Math.round(parseFloat(number) + step * power[gtlt] + 'e6')+'e-6');
4941
}
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
5942
}
43+
} else {
44+
number = power[gtlt] + feature_unit[name];
45+
}
6046

61-
/**
62-
* 转换 <mf-name> <|>= <mf-value>
63-
* $1 $2 $3
64-
* (width >= 300px) => (min-width: 300px)
65-
* (width <= 900px) => (max-width: 900px)
66-
*/
47+
return '(' + minmax[gtlt] + '-' + name + ': ' + number + unit + ')';
48+
});
49+
}
6750

68-
//取值不支持负值
69-
//But -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.
51+
function transform(rule) {
52+
/**
53+
* 转换 <mf-name> <|>= <mf-value>
54+
* $1 $2 $3
55+
* (width >= 300px) => (min-width: 300px)
56+
* (width <= 900px) => (max-width: 900px)
57+
*/
7058

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) {
59+
if (!rule.params.includes('<') && !rule.params.includes('>')) {
60+
return
61+
}
7262

73-
var params = '';
63+
// The value doesn't support negative values
64+
// But -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.
7465

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-
}
66+
rule.params = rule.params.replace(/\(\s*([a-z-]+?)\s*([<>])(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4) {
67+
if (feature_name.indexOf($1) > -1) {
68+
return create_query($1, $2, $3, $4);
69+
}
70+
//If it is not the specified attribute, don't replace
71+
return $0;
72+
})
73+
74+
/**
75+
* 转换 <mf-value> <|<= <mf-name> <|<= <mf-value>
76+
* 转换 <mf-value> >|>= <mf-name> >|>= <mf-value>
77+
* $1 $2$3 $4 $5$6 $7
78+
* (500px <= width <= 1200px) => (min-width: 500px) and (max-width: 1200px)
79+
* (500px < width <= 1200px) => (min-width: 501px) and (max-width: 1200px)
80+
* (900px >= width >= 300px) => (min-width: 300px) and (max-width: 900px)
81+
*/
82+
83+
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) {
84+
85+
if (feature_name.indexOf($4) > -1) {
86+
if ($2 === '<' && $5 === '<' || $2 === '>' && $5 === '>') {
87+
const min = ($2 === '<') ? $1 : $7;
88+
const max = ($2 === '<') ? $7 : $1;
89+
90+
// output differently depended on expression direction
91+
// <mf-value> <|<= <mf-name> <|<= <mf-value>
92+
// or
93+
// <mf-value> >|>= <mf-name> >|>= <mf-value>
94+
let equals_for_min = $3;
95+
let equals_for_max = $6;
96+
97+
if ($2 === '>') {
98+
equals_for_min = $6;
99+
equals_for_max = $3;
112100
}
113-
//如果不是指定的属性，不做替换
114-
return $0;
115101

116-
});
117-
118-
});
119-
120-
}
102+
return create_query($4, '>', equals_for_min, min) + ' and ' + create_query($4, '<', equals_for_max, max);
103+
}
104+
}
105+
// If it is not the specified attribute, don't replace
106+
return $0;
107+
});
108+
}
109+
110+
module.exports = () => ({
111+
postcssPlugin: 'postcss-media-minmax',
112+
AtRule: {
113+
media: (atRule) => {
114+
transform(atRule);
115+
},
116+
'custom-media': (atRule) => {
117+
transform(atRule);
118+
},
119+
},
121120
});
121+
122+
module.exports.postcss = true

0 commit comments

Comments
 (0)