Skip to content

Commit b5d93b6

Browse files
committed
got a reasonable test case to start thinking about this
1 parent 6792d5e commit b5d93b6

File tree

4 files changed

+52
-0
lines changed

4 files changed

+52
-0
lines changed
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@custom-media --small (max-width: 30em);
2+
@custom-media --medium (max-width: 60em);
3+
@custom-media --large (max-width: 90em);
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
._media-queries_source__red {
2+
color: red;
3+
}
4+
5+
@media (max-width: 30em) {
6+
._media-queries_source__red {
7+
color: maroon;
8+
}
9+
}
10+
11+
@media (max-width: 60em) {
12+
._media-queries_source__red {
13+
color: darkmagenta;
14+
}
15+
}
16+
17+
@media (max-width: 90em) {
18+
._media-queries_source__red {
19+
color: fuchsia;
20+
}
21+
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"red": "_media-queries_source__red"
3+
}
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@custom-media --small from "./breakpoints.css";
2+
@custom-media --medium from "./breakpoints.css";
3+
@custom-media --large from "./breakpoints.css";
4+
5+
.red {
6+
color: red;
7+
}
8+
9+
@media (--small) {
10+
.red {
11+
color: maroon;
12+
}
13+
}
14+
15+
@media (--medium) {
16+
.red {
17+
color: darkmagenta;
18+
}
19+
}
20+
21+
@media (--large) {
22+
.red {
23+
color: fuchsia;
24+
}
25+
}

0 commit comments

Comments
 (0)