actually got the expectations in line with the plugins

Author: geelen

test/cssi/media-queries/breakpoints.css

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

test/cssi/media-queries/expected.css

@@ -1,25 +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);
+@custom-media --small (max-width: 30em);
+@custom-media --medium (max-width: 60em);
+@custom-media --large (max-width: 90em);
 
-._media-queries_source__red {
+.exported-red {
   color: red;
 }
 
-@media (max-width: 30em) {
-  ._media-queries_source__red {
+@media (--small) {
+  .exported-red {
     color: maroon;
   }
 }
 
-@media (max-width: 60em) {
-  ._media-queries_source__red {
+@media (--medium) {
+  .exported-red {
     color: darkmagenta;
   }
 }
 
-@media (max-width: 90em) {
-  ._media-queries_source__red {
+@media (--large) {
+  .exported-red {
     color: fuchsia;
   }
 }

test/cssi/media-queries/source.css

@@ -1,37 +1,38 @@
-:imports("./breakpoints.css") {
-  --i__breakpoints__small: --small;
-  --i__breakpoints__medium: --medium;
-  --i__breakpoints__large: --large;
+:import("./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;
+:export {
+  --small: i__breakpoints__small;
+  --medium: i__breakpoints__medium;
+  --large: i__breakpoints__large;
+  red: exported-red;
 }
 
-@custom-media --x__source__small --i__breakpoints__small;
-@custom-media --x__source__medium --i__breakpoints__medium;
-@custom-media --x__source__large --i__breakpoints__large;
+@custom-media --small i__breakpoints__small;
+@custom-media --medium i__breakpoints__medium;
+@custom-media --large i__breakpoints__large;
 
-.red {
+.exported-red {
   color: red;
 }
 
-@media (--x__source__small) {
-  .red {
+@media (--small) {
+  .exported-red {
     color: maroon;
   }
 }
 
-@media (--x__source__medium) {
-  .red {
+@media (--medium) {
+  .exported-red {
     color: darkmagenta;
   }
 }
 
-@media (--x__source__large) {
-  .red {
+@media (--large) {
+  .exported-red {
     color: fuchsia;
   }
 }