feat: validate media queries (#651)

Author: amorriscode

.changeset/moody-poems-tan.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/css': minor
+---
+
+Add CSS media query validation

packages/css/package.json

@@ -110,6 +110,7 @@
     "@emotion/hash": "^0.8.0",
     "@vanilla-extract/private": "^1.0.3",
     "chalk": "^4.1.1",
+    "css-mediaquery": "^0.1.2",
     "css-what": "^5.0.1",
     "cssesc": "^3.0.0",
     "csstype": "^3.0.7",
@@ -119,6 +120,7 @@
     "outdent": "^0.8.0"
   },
   "devDependencies": {
+    "@types/css-mediaquery": "^0.1.1",
     "@types/cssesc": "^3.0.0"
   }
 }

packages/css/src/transformCss.ts

@@ -20,6 +20,7 @@ import { forEach, omit, mapKeys } from './utils';
 import { validateSelector } from './validateSelector';
 import { ConditionalRuleset } from './conditionalRulesets';
 import { simplePseudos, simplePseudoLookup } from './simplePseudos';
+import { validateMediaQuery } from './validateMediaQuery';
 
 const UNITLESS: Record<string, boolean> = {
   animationIterationCount: true,
@@ -328,6 +329,8 @@ class Stylesheet {
       );
 
       forEach(rules, (mediaRule, query) => {
+        validateMediaQuery(query);
+
         const conditions = [...parentConditions, `@media ${query}`];
 
         this.addConditionalRule(

packages/css/src/validateMediaQuery.test.ts

@@ -0,0 +1,36 @@
+import { validateMediaQuery } from './validateMediaQuery';
+
+describe('validateMediaQuery', () => {
+  describe('valid selectors', () => {
+    const validMediaQueries = [
+      'screen',
+      'screen, print',
+      'screen and (max-width: 600px)',
+      '(min-width: 5rem)',
+      '(min-width: 30em) and (orientation: landscape)',
+      'only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi)',
+      'not screen and (color), print and (color)',
+    ];
+
+    validMediaQueries.forEach((query) =>
+      it(query, () => {
+        expect(() => validateMediaQuery(query)).not.toThrow();
+      }),
+    );
+  });
+
+  describe('invalid media queries', () => {
+    const invalidMediaQueries = [
+      '',
+      'random query',
+      '(min-height: 600px',
+      'min-width: 600px)',
+    ];
+
+    invalidMediaQueries.forEach((query) =>
+      it(query, () => {
+        expect(() => validateMediaQuery(query)).toThrow();
+      }),
+    );
+  });
+});

packages/css/src/validateMediaQuery.ts

@@ -0,0 +1,25 @@
+import outdent from 'outdent';
+import { parse } from 'css-mediaquery';
+
+const mediaTypes = ['all', 'print', 'screen'];
+
+export const validateMediaQuery = (mediaQuery: string) => {
+  const { type, expressions } = parse(mediaQuery)?.[0];
+
+  const isAllQuery = mediaQuery === 'all';
+  const isValidType = mediaTypes.includes(type);
+
+  // If the parser returns all for the type, we should have expressions
+  // or the query should match 'all' otherwise it is invalid
+  if (!isValidType || (!isAllQuery && type === 'all' && !expressions.length)) {
+    throw new Error(
+      outdent`
+      Invalid media query: ${mediaQuery}
+
+      A media query can contain an optional media type and any number of media feature expressions.
+  
+      Read more on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
+    `,
+    );
+  }
+};