Merge pull request #329 from sunesimonsen/ssimonsen/support-media-que…

…ries

Support media queries

src/index.mjs

@@ -98,9 +98,10 @@ class CSSTemplate {
     let result = "";
     let close = null;
     const tokens = this._content
-      .split(/(&\([^)]+\)|[:;{}&]|\\?["']|\\)/g)
+      .split(/(&\([^)]+\)|@media|[:;{}&]|\\?["']|\\)/g)
       .filter(Boolean);
 
+    let inMediaRule = false;
     for (let i = 0; i < tokens.length; i++) {
       const token = tokens[i];
 
@@ -109,6 +110,10 @@ class CSSTemplate {
         continue;
       }
 
+      if (token === "@media") {
+        inMediaRule = true;
+      }
+
       if (close) {
         if (token === close) {
           close = null;
@@ -117,7 +122,11 @@ class CSSTemplate {
         continue;
       }
 
-      close = pairs[token];
+      if (inMediaRule && token === "{") {
+        inMediaRule = false;
+      } else {
+        close = pairs[token];
+      }
 
       if (close) {
         result += token;

test/index.spec.mjs

@@ -507,6 +507,29 @@ describe("css", () => {
     );
   });
 
+  it("supports media queries", () => {
+    const foo = css`
+      & {
+        background: red;
+      }
+
+      @media only screen and (width <= 1000px) {
+        & {
+          background: green;
+        }
+      }
+    `;
+
+    expect(foo.toString(), "to equal snapshot", "c4212962c");
+
+    expect(
+      document,
+      "to have CSS satisfying",
+      "to equal snapshot",
+      ".c4212962c {background: red;}@media only screen and (width <= 1000px) {.c4212962c {background: green;}}",
+    );
+  });
+
   it("returns a hash of the content", () => {
     const foo = css`
       & {