media queries test passing!

Author: geelen

src/index.js

@@ -21,7 +21,6 @@ export default class Core {
   }
 }
 
-
 // These three plugins are aliased under this package for simplicity.
 Core.localByDefault = localByDefault
 Core.extractImports = extractImports

src/parser.js

@@ -53,7 +53,7 @@ export default class Parser {
         Object.keys(this.translations).forEach( translation => {
           decl.value = decl.value.replace(translation, this.translations[translation])
         } )
-        this.exportTokens[decl.prop] = decl.value
+        this.exportTokens[decl.prop] = decl.value.replace(/^['"]|['"]$/g, '')
       }
     } )
     exportNode.removeSelf()
@@ -65,7 +65,12 @@ export default class Parser {
     return this.pathFetcher( file, relativeTo, depTrace ).then( exports => {
       importNode.each( decl => {
         if ( decl.type == 'decl' ) {
-          this.translations[decl.prop] = exports[decl.value].replace(/^['"]|['"]$/g,'')
+          let translation = exports[decl.value]
+          if ( translation ) {
+            this.translations[decl.prop] = translation.replace(/^['"]|['"]$/g, '')
+          } else {
+            console.warn( `Missing ${decl.value} for ${decl.prop}` )
+          }
         }
       } )
       importNode.removeSelf()

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

@@ -1,3 +1,2 @@
 @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

@@ -1,21 +1,27 @@
-._media-queries_source__red {
+@custom-media --small (max-width: 30em);
+@custom-media --medium (max-width: 60em);
+@custom-media --small (max-width: 30em);
+@custom-media --medium (max-width: 60em);
+@custom-media --large (max-width: 90em);
+
+._media_queries_source__red {
   color: red;
 }
 
-@media (max-width: 30em) {
-  ._media-queries_source__red {
+@media (--small) {
+  ._media_queries_source__red {
     color: maroon;
   }
 }
 
-@media (max-width: 60em) {
-  ._media-queries_source__red {
+@media (--medium) {
+  ._media_queries_source__red {
     color: darkmagenta;
   }
 }
 
-@media (max-width: 90em) {
-  ._media-queries_source__red {
+@media (--large) {
+  ._media_queries_source__red {
     color: fuchsia;
   }
 }

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

@@ -1,3 +1,6 @@
 {
-  "red": "_media-queries_source__red"
+  "red": "_media_queries_source__red",
+  "--small": "(max-width: 30em)",
+  "--medium": "(max-width: 60em)",
+  "--large": "(max-width: 90em)"
 }

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 (min-width: 90em);
+@custom-media --large (max-width: 90em);
 
 .red {
   color: red;