got a reasonable test case to start thinking about this

Author: geelen

test/test-cases/media-queries/breakpoints.css

@@ -0,0 +1,3 @@
+@custom-media --small (max-width: 30em);
+@custom-media --medium (max-width: 60em);
+@custom-media --large (max-width: 90em);

test/test-cases/media-queries/expected.css

@@ -0,0 +1,21 @@
+._media-queries_source__red {
+  color: red;
+}
+
+@media (max-width: 30em) {
+  ._media-queries_source__red {
+    color: maroon;
+  }
+}
+
+@media (max-width: 60em) {
+  ._media-queries_source__red {
+    color: darkmagenta;
+  }
+}
+
+@media (max-width: 90em) {
+  ._media-queries_source__red {
+    color: fuchsia;
+  }
+}

test/test-cases/media-queries/expected.json

@@ -0,0 +1,3 @@
+{
+  "red": "_media-queries_source__red"
+}

test/test-cases/media-queries/source.css

@@ -0,0 +1,25 @@
+@custom-media --small from "./breakpoints.css";
+@custom-media --medium from "./breakpoints.css";
+@custom-media --large from "./breakpoints.css";
+
+.red {
+  color: red;
+}
+
+@media (--small) {
+  .red {
+    color: maroon;
+  }
+}
+
+@media (--medium) {
+  .red {
+    color: darkmagenta;
+  }
+}
+
+@media (--large) {
+  .red {
+    color: fuchsia;
+  }
+}