Parse media queries and throw an error for invalid queries

Author: kristerkari

.prettierignore

@@ -1 +1,3 @@
 dist
+package.json
+package-lock.json

package.json

@@ -30,20 +30,33 @@
     }
   },
   "lint-staged": {
-    "*.{js,json,md}": ["prettier --write", "git add"]
+    "*.{js,json,md}": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "prettier": {
     "trailingComma": "all"
   },
   "dependencies": {
     "css": "^2.2.1",
+    "css-mediaquery": "^0.1.2",
     "css-to-react-native": "^2.1.2"
   },
   "repository": {
     "type": "git",
-    "url":
-      "git+https://github.com/kristerkari/css-to-react-native-transform.git"
+    "url": "git+https://github.com/kristerkari/css-to-react-native-transform.git"
   },
-  "keywords": ["React", "ReactNative", "styles", "CSS"],
-  "files": ["dist", "src", "CHANGELOG.md", "README.md"]
+  "keywords": [
+    "React",
+    "ReactNative",
+    "styles",
+    "CSS"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md",
+    "README.md"
+  ]
 }

src/index.js

@@ -1,10 +1,17 @@
 import parseCSS from "css/lib/parse";
 import transformCSS from "css-to-react-native";
+import mediaQuery from "css-mediaquery";
 import { remToPx } from "./transforms/rem";
 import { camelCase } from "./utils/camelCase";
 import { allEqual } from "./utils/allEqual";
 import { values } from "./utils/values";
+import { mediaQueryTypes } from "./transforms/media-queries/types";
+import {
+  mediaQueryFeatures,
+  dimensionFeatures,
+} from "./transforms/media-queries/features";
 
+const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px|rem$))/;
 const shorthandBorderProps = [
   "border-radius",
   "border-width",
@@ -56,6 +63,32 @@ const transform = (css, options) => {
       options != null &&
       options.parseMediaQueries === true
     ) {
+      const parsed = mediaQuery.parse(rule.media);
+
+      parsed.forEach(mq => {
+        if (mediaQueryTypes.indexOf(mq.type) === -1) {
+          throw new Error(`Failed to parse media query type "${mq.type}"`);
+        }
+
+        mq.expressions.forEach(e => {
+          const mf = e.modifier ? `${e.modifier}-${e.feature}` : e.feature;
+          const val = e.value ? `: ${e.value}` : "";
+
+          if (mediaQueryFeatures.indexOf(e.feature) === -1) {
+            throw new Error(`Failed to parse media query feature "${mf}"`);
+          }
+
+          if (
+            dimensionFeatures.indexOf(e.feature) > -1 &&
+            lengthRe.test(e.value) === false
+          ) {
+            throw new Error(
+              `Failed to parse media query expression "(${mf}${val})"`,
+            );
+          }
+        });
+      });
+
       const media = "@media " + rule.media;
       for (const r in rule.rules) {
         const ruleRule = rule.rules[r];

src/index.spec.js

@@ -2232,4 +2232,199 @@ describe("media queries", () => {
       },
     });
   });
+
+  it("should support screen type", () => {
+    expect(
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+        @media screen and (min-height: 50px) and (max-height: 150px) {
+          .foo {
+            color: red;
+          }
+        }
+        @media screen and (min-height: 150px) and (max-height: 200px) {
+          .foo {
+            color: green;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toEqual({
+      foo: { color: "blue" },
+      "@media screen and (min-height: 50px) and (max-height: 150px)": {
+        foo: { color: "red" },
+      },
+      "@media screen and (min-height: 150px) and (max-height: 200px)": {
+        foo: { color: "green" },
+      },
+    });
+  });
+
+  it("should support all type", () => {
+    expect(
+      transform(
+        `
+      .foo {
+        color: blue;
+      }
+      @media all and (min-height: 50px) and (max-height: 150px) {
+        .foo {
+          color: red;
+        }
+      }
+      @media all and (min-height: 150px) and (max-height: 200px) {
+        .foo {
+          color: green;
+        }
+      }
+    `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toEqual({
+      foo: { color: "blue" },
+      "@media all and (min-height: 50px) and (max-height: 150px)": {
+        foo: { color: "red" },
+      },
+      "@media all and (min-height: 150px) and (max-height: 200px)": {
+        foo: { color: "green" },
+      },
+    });
+  });
+
+  it("should throw for invalid types", () => {
+    expect(() =>
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+
+        @media screens {
+          .foo {
+            color: red;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toThrow('Failed to parse media query type "screens"');
+    expect(() =>
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+        @media sdfgsdfg {
+          .foo {
+            color: red;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toThrow('Failed to parse media query type "sdfgsdfg"');
+  });
+
+  it("should throw for invalid features", () => {
+    expect(() =>
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+        @media (min-heigh: 50px) and (max-height: 150px) {
+          .foo {
+            color: red;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toThrow('Failed to parse media query feature "min-heigh"');
+    expect(() =>
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+        @media (orientations: landscape) {
+          .foo {
+            color: red;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toThrow('Failed to parse media query feature "orientations"');
+  });
+
+  it("should throw for values without units", () => {
+    expect(() =>
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+        @media (min-height: 50) and (max-height: 150px) {
+          .foo {
+            color: red;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toThrow('Failed to parse media query expression "(min-height: 50)"');
+    expect(() =>
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+        @media (min-height: 50px) and (max-height: 150) {
+          .foo {
+            color: red;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toThrow('Failed to parse media query expression "(max-height: 150)"');
+    expect(() =>
+      transform(
+        `
+        .foo {
+          color: blue;
+        }
+        @media (min-width) {
+          .foo {
+            color: red;
+          }
+        }
+      `,
+        {
+          parseMediaQueries: true,
+        },
+      ),
+    ).toThrow('Failed to parse media query expression "(min-width)"');
+  });
 });

src/transforms/media-queries/features.js

@@ -0,0 +1,17 @@
+export const dimensionFeatures = [
+  "width",
+  "height",
+  "device-width",
+  "device-height",
+];
+export const mediaQueryFeatures = [
+  "orientation",
+  "scan",
+  "resolution",
+  "aspect-ratio",
+  "device-aspect-ratio",
+  "grid",
+  "color",
+  "color-index",
+  "monochrome",
+].concat(dimensionFeatures);

src/transforms/media-queries/types.js

@@ -0,0 +1,17 @@
+export const defaultTypes = [
+  "all",
+  "braille",
+  "embossed",
+  "handheld",
+  "print",
+  "projection",
+  "screen",
+  "speech",
+  "tty",
+  "tv",
+];
+export const cssnextMediaQueryTypes = ["pointer", "hover", "block-overflow"];
+export const reactNativeMediaQueryTypes = ["android", "ios"];
+export const mediaQueryTypes = defaultTypes
+  .concat(cssnextMediaQueryTypes)
+  .concat(reactNativeMediaQueryTypes);