wip

Author: geelen

test/cssi/media-queries/breakpoints.css

@@ -0,0 +1,9 @@
+:exports {
+  --small: --x__breakpoints__small;
+  --medium: --x__breakpoints__medium;
+  --large: --x__breakpoints__large;
+}
+
+@custom-media --x__breakpoints__small (max-width: 30em);
+@custom-media --x__breakpoints__medium (max-width: 60em);
+@custom-media --x__breakpoints__large (max-width: 90em);

test/cssi/media-queries/expected.css

@@ -0,0 +1,25 @@
+@custom-media --x__source__small (max-width: 30em);
+@custom-media --x__source__medium (max-width: 60em);
+@custom-media --x__source__large (max-width: 90em);
+
+._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/cssi/media-queries/expected.json

@@ -0,0 +1,5 @@
+{
+  "--small": "--x__source__small",
+  "--medium": "--x__source__medium",
+  "--large": "--x__source__large"
+}

test/cssi/media-queries/source.css

@@ -0,0 +1,37 @@
+:imports("./breakpoints.css") {
+  --i__breakpoints__small: --small;
+  --i__breakpoints__medium: --medium;
+  --i__breakpoints__large: --large;
+}
+
+:exports {
+  --small: --x__source__small;
+  --medium: --x__source__medium;
+  --large: --x__source__large;
+}
+
+@custom-media --x__source__small --i__breakpoints__small;
+@custom-media --x__source__medium --i__breakpoints__medium;
+@custom-media --x__source__large --i__breakpoints__large;
+
+.red {
+  color: red;
+}
+
+@media (--x__source__small) {
+  .red {
+    color: maroon;
+  }
+}
+
+@media (--x__source__medium) {
+  .red {
+    color: darkmagenta;
+  }
+}
+
+@media (--x__source__large) {
+  .red {
+    color: fuchsia;
+  }
+}

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

@@ -1,6 +1,6 @@
 @custom-media --small from "./breakpoints.css";
 @custom-media --medium from "./breakpoints.css";
-@custom-media --large from "./breakpoints.css";
+@custom-media --large (min-width: 90em);
 
 .red {
   color: red;