Skip to content

Commit 9f29362

Browse files
author
David Narbutovich
committed
format code
1 parent 4e0f4dd commit 9f29362

File tree

4 files changed

+127
-116
lines changed

4 files changed

+127
-116
lines changed

‎.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@
99
}
1010
]
1111
]
12-
}
12+
}

‎src/group-css-media-queries.js

+84-87
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,123 @@
1-
const {
2-
plugin: postcssPlugin,
3-
atRule: postcssAtRule
4-
} = require('postcss');
1+
const { plugin: postcssPlugin, atRule: postcssAtRule } = require("postcss");
52

63
const EM_TO_PX_RATIO = 16;
74

8-
const MIN_WIDTH = 'minWidth';
9-
const MAX_WIDTH = 'maxWidth';
10-
const UNIT = 'init';
5+
const MIN_WIDTH = "minWidth";
6+
const MAX_WIDTH = "maxWidth";
7+
const UNIT = "init";
118

12-
const mediaParamsToData = mediaQueries => Object.entries(mediaQueries).map(([media, mediaQueryRules]) => {
9+
const mediaParamsToData = mediaQueries =>
10+
Object.entries(mediaQueries).map(([media, mediaQueryRules]) => {
1311
const mediaQueryData = {
14-
mediaQueryRules,
15-
params: media,
16-
[MIN_WIDTH]: false,
17-
[MAX_WIDTH]: false,
18-
[UNIT]: false,
12+
mediaQueryRules,
13+
params: media,
14+
[MIN_WIDTH]: false,
15+
[MAX_WIDTH]: false,
16+
[UNIT]: false
1917
};
2018

2119
if (media.includes("min-width")) {
22-
const matchResult = media.match(/min-width:\s*(\d+)(px|em)?/);
23-
if (matchResult) {
24-
const [, minWidth, unit] = matchResult;
25-
if (minWidth) {
26-
mediaQueryData[MIN_WIDTH] = parseInt(minWidth);
27-
}
28-
if (unit) {
29-
mediaQueryData[UNIT] = unit;
30-
}
20+
const matchResult = media.match(/min-width:\s*(\d+)(px|em)?/);
21+
if (matchResult) {
22+
const [, minWidth, unit] = matchResult;
23+
if (minWidth) {
24+
mediaQueryData[MIN_WIDTH] = parseInt(minWidth);
3125
}
26+
if (unit) {
27+
mediaQueryData[UNIT] = unit;
28+
}
29+
}
3230
}
3331

3432
if (media.includes("max-width")) {
35-
const matchResult = media.match(/max-width:\s*(\d+)(px|em)?/);
36-
if (matchResult) {
37-
const [, maxWidth, unit] = matchResult;
38-
if (maxWidth) {
39-
mediaQueryData[MAX_WIDTH] = parseInt(maxWidth);
40-
}
41-
if (unit) {
42-
mediaQueryData[UNIT] = unit;
43-
}
33+
const matchResult = media.match(/max-width:\s*(\d+)(px|em)?/);
34+
if (matchResult) {
35+
const [, maxWidth, unit] = matchResult;
36+
if (maxWidth) {
37+
mediaQueryData[MAX_WIDTH] = parseInt(maxWidth);
38+
}
39+
if (unit) {
40+
mediaQueryData[UNIT] = unit;
4441
}
42+
}
4543
}
4644
return mediaQueryData;
47-
});
48-
45+
});
4946

5047
const invertBoolResult = fn => (...args) => !fn(...args);
5148

5249
const sortMedia = dimensionKey => (a, b) => {
53-
if (a[UNIT] === 'em') {
54-
a[dimensionKey] *= EM_TO_PX_RATIO
55-
}
56-
if (b[UNIT] === 'em') {
57-
b[dimensionKey] *= EM_TO_PX_RATIO
58-
}
59-
return a[dimensionKey] - b[dimensionKey];
50+
if (a[UNIT] === "em") {
51+
a[dimensionKey] *= EM_TO_PX_RATIO;
52+
}
53+
if (b[UNIT] === "em") {
54+
b[dimensionKey] *= EM_TO_PX_RATIO;
55+
}
56+
return a[dimensionKey] - b[dimensionKey];
6057
};
6158

62-
const groupCssMediaQueries = postcssPlugin('group-css-media-queries', () => root => {
59+
const groupCssMediaQueries = postcssPlugin(
60+
"group-css-media-queries",
61+
() => root => {
6362
const medias = {};
6463
root.walkAtRules("media", atRule => {
65-
66-
if (!(atRule.parent && atRule.parent.type === "root")) {
67-
return;
68-
}
69-
70-
if (atRule.name !== 'media') {
71-
return;
72-
}
73-
74-
const {params: mediaParams} = atRule;
75-
if (!medias[mediaParams]) {
76-
medias[mediaParams] = [];
77-
}
78-
medias[mediaParams] = medias[mediaParams].concat(atRule);
79-
64+
if (!(atRule.parent && atRule.parent.type === "root")) {
65+
return;
66+
}
67+
68+
if (atRule.name !== "media") {
69+
return;
70+
}
71+
72+
const { params: mediaParams } = atRule;
73+
if (!medias[mediaParams]) {
74+
medias[mediaParams] = [];
75+
}
76+
medias[mediaParams] = medias[mediaParams].concat(atRule);
8077
});
8178

8279
const mediasData = mediaParamsToData(medias);
8380

84-
const onlyMinRules = mediasData.filter(rule => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] === false);
85-
const onlyMaxRules = mediasData.filter(rule => rule[MAX_WIDTH] !== false && rule[MIN_WIDTH] === false);
86-
const intervalRules = mediasData.filter(rule => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] !== false);
87-
const tmp = [
88-
...onlyMinRules,
89-
...onlyMaxRules,
90-
...intervalRules
91-
];
81+
const onlyMinRules = mediasData.filter(
82+
rule => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] === false
83+
);
84+
const onlyMaxRules = mediasData.filter(
85+
rule => rule[MAX_WIDTH] !== false && rule[MIN_WIDTH] === false
86+
);
87+
const intervalRules = mediasData.filter(
88+
rule => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] !== false
89+
);
90+
const tmp = [...onlyMinRules, ...onlyMaxRules, ...intervalRules];
9291
const otherRules = mediasData.filter(rule => tmp.includes(rule) === false);
9392

94-
9593
onlyMinRules.sort(sortMedia(MIN_WIDTH)); // ascending
9694
onlyMaxRules.sort(invertBoolResult(sortMedia(MAX_WIDTH))); // descending
9795

9896
const sortedListRules = [
99-
onlyMinRules,
100-
onlyMaxRules,
101-
intervalRules,
102-
otherRules
97+
onlyMinRules,
98+
onlyMaxRules,
99+
intervalRules,
100+
otherRules
103101
];
104102

105103
for (const rules of sortedListRules) {
106-
for (const {params, mediaQueryRules} of rules) {
107-
const newAtRule = postcssAtRule({
108-
name: 'media',
109-
params,
110-
});
111-
112-
mediaQueryRules.forEach(mediaQueryRule => {
113-
newAtRule.append(mediaQueryRule.nodes);
114-
mediaQueryRule.remove();
115-
});
116-
117-
root.append(newAtRule);
118-
}
104+
for (const { params, mediaQueryRules } of rules) {
105+
const newAtRule = postcssAtRule({
106+
name: "media",
107+
params
108+
});
109+
110+
mediaQueryRules.forEach(mediaQueryRule => {
111+
newAtRule.append(mediaQueryRule.nodes);
112+
mediaQueryRule.remove();
113+
});
114+
115+
root.append(newAtRule);
116+
}
119117
}
120-
121-
});
122-
118+
}
119+
);
123120

124121
module.exports = {
125-
groupCssMediaQueries
126-
};
122+
groupCssMediaQueries
123+
};

‎src/index.js

+28-16
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,43 @@
11
const postcss = require("postcss");
22
const {
3-
getOptions,
4-
getRemainingRequest,
5-
getCurrentRequest
3+
getOptions,
4+
getRemainingRequest,
5+
getCurrentRequest
66
} = require("loader-utils");
77

8-
const {groupCssMediaQueries} = require("./group-css-media-queries");
8+
const { groupCssMediaQueries } = require("./group-css-media-queries");
99

1010
const pipeline = postcss(groupCssMediaQueries);
1111

1212
function GroupCssMediaQueriesLoader(inputSource, prevMap, meta) {
13-
const options = getOptions(this);
14-
const sourceMap = options.sourceMap === undefined ? this.sourceMap : Boolean(options.sourceMap);
15-
const callback = this.async();
13+
const options = getOptions(this);
14+
const sourceMap =
15+
options.sourceMap === undefined
16+
? this.sourceMap
17+
: Boolean(options.sourceMap);
18+
const callback = this.async();
1619

17-
pipeline.process(inputSource, {
18-
from: getRemainingRequest(this).split("!").pop(),
19-
to: getCurrentRequest(this).split("!").pop(),
20-
map: sourceMap ? {
20+
pipeline
21+
.process(inputSource, {
22+
from: getRemainingRequest(this)
23+
.split("!")
24+
.pop(),
25+
to: getCurrentRequest(this)
26+
.split("!")
27+
.pop(),
28+
map: sourceMap
29+
? {
2130
prev: prevMap,
2231
sourcesContent: true,
2332
inline: false,
2433
annotation: false
25-
} : null
26-
}).then(result => {
27-
callback(null, result.css, result.map && result.map.toJSON(), meta);
28-
}).catch(callback);
34+
}
35+
: null
36+
})
37+
.then(result => {
38+
callback(null, result.css, result.map && result.map.toJSON(), meta);
39+
})
40+
.catch(callback);
2941
}
3042

31-
module.exports = GroupCssMediaQueriesLoader;
43+
module.exports = GroupCssMediaQueriesLoader;

‎test/test.js

+14-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
const fs = require('fs');
2-
const postcss = require('postcss');
3-
const {groupCssMediaQueries} = require("../lib/group-css-media-queries");
1+
const fs = require("fs");
2+
const postcss = require("postcss");
3+
const { groupCssMediaQueries } = require("../lib/group-css-media-queries");
44

55
(async () => {
6-
try {
7-
const result = await postcss(groupCssMediaQueries).process(
8-
fs.readFileSync('a.css'), {
9-
from: 'a.css'
10-
});
11-
fs.writeFileSync('b.css', result.css);
12-
} catch (err) {
13-
console.log(err);
14-
}
6+
try {
7+
const result = await postcss(groupCssMediaQueries).process(
8+
fs.readFileSync("a.css"),
9+
{
10+
from: "a.css"
11+
}
12+
);
13+
fs.writeFileSync("b.css", result.css);
14+
} catch (err) {
15+
console.log(err);
16+
}
1517
})();

0 commit comments

Comments
 (0)