Skip to content

Commit 2b977e2

Browse files
And Grigoryanretyui
And Grigoryan
authored and
retyui
committed
Migrated to postcss 8.0
1 parent 6b0fefb commit 2b977e2

14 files changed

+1427
-1661
lines changed

‎.babelrc

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎.travis.yml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
sudo: false
22
language: node_js
33
node_js:
4+
- "18"
5+
- "16"
6+
- "14"
7+
- "12"
48
- "10"
5-
- "8"
69
install:
710
- yarn
811
script:

‎CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
# Change Log
22

3+
## 4.0.0
4+
5+
### ⚠ BREAKING CHANGES
6+
7+
- Migrate to [postcss@8.x.x](https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users)
8+
- Minimum required [Node.js](https://nodejs.org/en/about/releases/) version is 10.0.0
9+
310
## 3.0.0
11+
412
- Update babel
513
- Update dependencies
614
- Add test

‎README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,18 +35,18 @@ module.exports = {
3535
"style-loader",
3636
{
3737
loader: "css-loader",
38-
options: { sourceMap }
38+
options: { sourceMap },
3939
},
4040
// 'group-css-media-queries-loader',
4141
// or with config
4242
{
4343
loader: "group-css-media-queries-loader",
44-
options: { sourceMap }
45-
}
46-
]
47-
}
48-
]
49-
}
44+
options: { sourceMap },
45+
},
46+
],
47+
},
48+
],
49+
},
5050
};
5151
```
5252

‎appveyor.yml

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ os: Visual Studio 2015
22
platform: x64
33
environment:
44
matrix:
5+
- nodejs_version: "18"
6+
- nodejs_version: "16"
7+
- nodejs_version: "14"
8+
- nodejs_version: "12"
59
- nodejs_version: "10"
6-
- nodejs_version: "8"
710

811
install:
912
- ps: Install-Product node $env:nodejs_version x64

‎babel.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
"@babel/preset-env",
5+
{
6+
targets: {
7+
node: "10.0.0",
8+
},
9+
},
10+
],
11+
],
12+
};

‎package.json

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,34 @@
11
{
22
"name": "group-css-media-queries-loader",
3-
"version": "3.0.2",
3+
"version": "4.0.0",
44
"main": "lib/index.js",
55
"files": [
66
"lib"
77
],
8-
"dependencies": {
9-
"loader-utils": "^1.1.0"
10-
},
118
"peerDependencies": {
12-
"postcss": ">=6.0.0",
9+
"loader-utils": "^2.0.0 || ^1.0.0",
10+
"postcss": ">=8.1.0",
1311
"webpack": ">=2.0.0"
1412
},
1513
"scripts": {
1614
"prebuild": "rimraf ./lib",
1715
"build": "babel src --out-dir lib",
18-
"test": "npm run build && node ./test/test.js",
19-
"prepublishOnly": "npm run build & npm run test"
16+
"postbuild": "prettier --write ./lib",
17+
"pretest": "npm run build",
18+
"test": "node ./test/test.js",
19+
"prepublishOnly": "npm run test"
2020
},
2121
"devDependencies": {
22-
"@babel/cli": "^7.0.0",
23-
"@babel/core": "^7.0.0",
24-
"@babel/preset-env": "^7.0.0",
25-
"postcss": "^7.0.0",
26-
"rimraf": "^2.6.2"
22+
"@babel/cli": "^7.15.7",
23+
"@babel/core": "^7.15.5",
24+
"@babel/preset-env": "^7.15.6",
25+
"loader-utils": "^2.0.0",
26+
"postcss": "^8.1.0",
27+
"prettier": "^2.4.1",
28+
"rimraf": "^3.0.2"
2729
},
2830
"engines": {
29-
"node": ">=6.11.0"
31+
"node": ">=10.0.0"
3032
},
3133
"repository": "https://github.com/retyui/group-css-media-queries-loader",
3234
"author": "David Narbutovich <vamnemne@gmail.com>",

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

Lines changed: 74 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
const { plugin: postcssPlugin, atRule: postcssAtRule } = require("postcss");
1+
import { atRule as postcssAtRule } from "postcss";
22

33
const EM_TO_PX_RATIO = 16;
44

55
const MIN_WIDTH = "minWidth";
66
const MAX_WIDTH = "maxWidth";
77
const UNIT = "init";
88

9-
const mediaParamsToData = mediaQueries =>
9+
const mediaParamsToData = (mediaQueries) =>
1010
Object.entries(mediaQueries).map(([media, mediaQueryRules]) => {
1111
const mediaQueryData = {
1212
mediaQueryRules,
1313
params: media,
1414
[MIN_WIDTH]: false,
1515
[MAX_WIDTH]: false,
16-
[UNIT]: false
16+
[UNIT]: false,
1717
};
1818

1919
if (media.includes("min-width")) {
@@ -44,9 +44,12 @@ const mediaParamsToData = mediaQueries =>
4444
return mediaQueryData;
4545
});
4646

47-
const invertBoolResult = fn => (...args) => !fn(...args);
47+
const invertBoolResult =
48+
(fn) =>
49+
(...args) =>
50+
!fn(...args);
4851

49-
const sortMedia = dimensionKey => (a, b) => {
52+
const sortMedia = (dimensionKey) => (a, b) => {
5053
if (a[UNIT] === "em") {
5154
a[dimensionKey] *= EM_TO_PX_RATIO;
5255
}
@@ -56,68 +59,73 @@ const sortMedia = dimensionKey => (a, b) => {
5659
return a[dimensionKey] - b[dimensionKey];
5760
};
5861

59-
const groupCssMediaQueries = postcssPlugin(
60-
"group-css-media-queries",
61-
() => root => {
62-
const medias = {};
63-
root.walkAtRules("media", atRule => {
64-
if (!(atRule.parent && atRule.parent.type === "root")) {
65-
return;
66-
}
62+
function GroupCssMediaQueriesPostCssPlugin() {
63+
return {
64+
postcssPlugin: "group-css-media-queries",
65+
Once(root) {
66+
const medias = {};
6767

68-
if (atRule.name !== "media") {
69-
return;
70-
}
68+
root.walkAtRules("media", (atRule) => {
69+
if (!(atRule.parent && atRule.parent.type === "root")) {
70+
return;
71+
}
7172

72-
const { params: mediaParams } = atRule;
73-
if (!medias[mediaParams]) {
74-
medias[mediaParams] = [];
75-
}
76-
medias[mediaParams] = medias[mediaParams].concat(atRule);
77-
});
78-
79-
const mediasData = mediaParamsToData(medias);
80-
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];
91-
const otherRules = mediasData.filter(rule => tmp.includes(rule) === false);
92-
93-
onlyMinRules.sort(sortMedia(MIN_WIDTH)); // ascending
94-
onlyMaxRules.sort(invertBoolResult(sortMedia(MAX_WIDTH))); // descending
95-
96-
const sortedListRules = [
97-
onlyMinRules,
98-
onlyMaxRules,
99-
intervalRules,
100-
otherRules
101-
];
102-
103-
for (const rules of sortedListRules) {
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);
73+
if (atRule.name !== "media") {
74+
return;
75+
}
76+
77+
const { params: mediaParams } = atRule;
78+
if (!medias[mediaParams]) {
79+
medias[mediaParams] = [];
80+
}
81+
medias[mediaParams] = medias[mediaParams].concat(atRule);
82+
});
83+
84+
const mediasData = mediaParamsToData(medias);
85+
86+
const onlyMinRules = mediasData.filter(
87+
(rule) => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] === false
88+
);
89+
const onlyMaxRules = mediasData.filter(
90+
(rule) => rule[MAX_WIDTH] !== false && rule[MIN_WIDTH] === false
91+
);
92+
const intervalRules = mediasData.filter(
93+
(rule) => rule[MIN_WIDTH] !== false && rule[MAX_WIDTH] !== false
94+
);
95+
const tmp = [...onlyMinRules, ...onlyMaxRules, ...intervalRules];
96+
const otherRules = mediasData.filter(
97+
(rule) => tmp.includes(rule) === false
98+
);
99+
100+
onlyMinRules.sort(sortMedia(MIN_WIDTH)); // ascending
101+
onlyMaxRules.sort(invertBoolResult(sortMedia(MAX_WIDTH))); // descending
102+
103+
const sortedListRules = [
104+
onlyMinRules,
105+
onlyMaxRules,
106+
intervalRules,
107+
otherRules,
108+
];
109+
110+
for (const rules of sortedListRules) {
111+
for (const { params, mediaQueryRules } of rules) {
112+
const newAtRule = postcssAtRule({
113+
name: "media",
114+
params,
115+
});
116+
117+
mediaQueryRules.forEach((mediaQueryRule) => {
118+
newAtRule.append(mediaQueryRule.nodes);
119+
mediaQueryRule.remove();
120+
});
121+
122+
root.append(newAtRule);
123+
}
116124
}
117-
}
118-
}
119-
);
125+
},
126+
};
127+
}
120128

121-
module.exports = {
122-
groupCssMediaQueries
123-
};
129+
GroupCssMediaQueriesPostCssPlugin.postcss = true;
130+
131+
export { GroupCssMediaQueriesPostCssPlugin };

‎src/index.js

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
1-
const postcss = require("postcss");
2-
const {
1+
import postcss from "postcss";
2+
import {
33
getOptions,
44
getRemainingRequest,
5-
getCurrentRequest
6-
} = require("loader-utils");
5+
getCurrentRequest,
6+
} from "loader-utils";
77

8-
const { groupCssMediaQueries } = require("./group-css-media-queries");
9-
10-
const pipeline = postcss(groupCssMediaQueries);
8+
import { GroupCssMediaQueriesPostCssPlugin } from "./group-css-media-queries";
119

1210
function GroupCssMediaQueriesLoader(inputSource, prevMap, meta) {
11+
// 1.x.x return null if empty query
12+
// 2.x.x return empty object if empty query
1313
const options = getOptions(this) || {};
1414
const sourceMap =
1515
options.sourceMap === undefined
1616
? this.sourceMap
1717
: Boolean(options.sourceMap);
1818
const callback = this.async();
19+
const pipeline = postcss(GroupCssMediaQueriesPostCssPlugin);
1920

2021
pipeline
2122
.process(inputSource, {
22-
from: getRemainingRequest(this)
23-
.split("!")
24-
.pop(),
25-
to: getCurrentRequest(this)
26-
.split("!")
27-
.pop(),
23+
from: getRemainingRequest(this).split("!").pop(),
24+
to: getCurrentRequest(this).split("!").pop(),
2825
map: sourceMap
2926
? {
3027
prev: prevMap,
3128
sourcesContent: true,
3229
inline: false,
33-
annotation: false
30+
annotation: false,
3431
}
35-
: null
32+
: null,
3633
})
37-
.then(result => {
34+
.then((result) => {
3835
callback(null, result.css, result.map && result.map.toJSON(), meta);
3936
})
4037
.catch(callback);

0 commit comments

Comments
 (0)