Skip to content

Commit 5f6fe56

Browse files
committed
Support nested queries
A nested media queries should be popped up to root and pack. This change resolves hail2u#50 in most case.
1 parent 8a4b488 commit 5f6fe56

File tree

3 files changed

+35
-11
lines changed

3 files changed

+35
-11
lines changed

index.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,26 @@ module.exports = postcss.plugin(pkg.name, (opts) => {
160160
}
161161

162162
css.walkAtRules("media", (atRule) => {
163-
if (atRule.parent.type !== "root") {
163+
if (atRule.parent.parent && atRule.parent.parent.type !== "root") {
164164
return;
165165
}
166166

167+
if (atRule.parent.type !== "root") {
168+
const newAtRule = postcss.atRule({
169+
name: atRule.parent.name,
170+
params: atRule.parent.params
171+
});
172+
173+
atRule.each((rule) => {
174+
newAtRule.append(rule);
175+
});
176+
atRule.remove();
177+
atRule = postcss.atRule({
178+
name: atRule.name,
179+
params: atRule.params
180+
}).append(newAtRule);
181+
}
182+
167183
const queryList = atRule.params;
168184
const past = queries[queryList];
169185

test/fixtures/issue50.css renamed to test/expected/nested-queries.css

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,22 @@
22
z-index: 1;
33
}
44

5-
@media (min-width: 1024px) {
5+
@supports (display: auto) {
66
.foo {
7-
z-index: 4;
7+
z-index: 2;
88
}
99
}
1010

11-
@supports (display: auto) {
11+
@media (min-width: 1024px) {
1212
.foo {
13-
z-index: 2;
13+
z-index: 3;
1414
}
15-
16-
@media (min-width: 1024px) {
15+
@supports (display: auto) {
1716
.foo {
18-
z-index: 3;
17+
z-index: 4;
1918
}
2019
}
20+
.bar {
21+
z-index: 5;
22+
}
2123
}

test/expected/issue50.css renamed to test/fixtures/nested-queries.css

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,26 @@
22
z-index: 1;
33
}
44

5+
@media (min-width: 1024px) {
6+
.foo {
7+
z-index: 3;
8+
}
9+
}
10+
511
@supports (display: auto) {
612
.foo {
713
z-index: 2;
814
}
915

1016
@media (min-width: 1024px) {
1117
.foo {
12-
z-index: 3;
18+
z-index: 4;
1319
}
1420
}
1521
}
1622

1723
@media (min-width: 1024px) {
18-
.foo {
19-
z-index: 4;
24+
.bar {
25+
z-index: 5;
2026
}
2127
}

0 commit comments

Comments
 (0)