Parse media query features according to specified type

devongovett · devongovett · commit a84fbdbf84cd · 2023-04-15T16:28:09.000-04:00
Fixes parcel-bundler#454
diff --git a/node/ast.d.ts b/node/ast.d.ts
@@ -123,7 +123,7 @@ export type MediaFeature =
       /**
        * The name of the feature.
        */
-      name: String;
+      name: MediaFeatureName;
       type: "plain";
       /**
        * The feature value.
@@ -134,14 +134,14 @@ export type MediaFeature =
       /**
        * The name of the feature.
        */
-      name: String;
+      name: MediaFeatureName;
       type: "boolean";
     }
   | {
       /**
        * The name of the feature.
        */
-      name: String;
+      name: MediaFeatureName;
       /**
        * A comparator.
        */
@@ -164,7 +164,7 @@ export type MediaFeature =
       /**
        * The name of the feature.
        */
-      name: String;
+      name: MediaFeatureName;
       /**
        * A start value.
        */
@@ -175,6 +175,51 @@ export type MediaFeature =
       startOperator: MediaFeatureComparison;
       type: "interval";
     };
+/**
+ * A media feature name.
+ */
+export type MediaFeatureName = MediaFeatureId | String | String;
+/**
+ * A media query feature identifier.
+ */
+export type MediaFeatureId =
+  | "width"
+  | "height"
+  | "aspect-ratio"
+  | "orientation"
+  | "overflow-block"
+  | "overflow-inline"
+  | "horizontal-viewport-segments"
+  | "vertical-viewport-segments"
+  | "display-mode"
+  | "resolution"
+  | "scan"
+  | "grid"
+  | "update"
+  | "environment-blending"
+  | "color"
+  | "color-index"
+  | "monochrome"
+  | "color-gamut"
+  | "dynamic-range"
+  | "inverted-colors"
+  | "pointer"
+  | "hover"
+  | "any-pointer"
+  | "any-hover"
+  | "nav-controls"
+  | "video-color-gamut"
+  | "video-dynamic-range"
+  | "scripting"
+  | "prefers-reduced-motion"
+  | "prefers-reduced-transparency"
+  | "prefers-contrast"
+  | "forced-colors"
+  | "prefers-color-scheme"
+  | "prefers-reduced-data"
+  | "device-width"
+  | "device-height"
+  | "device-aspect-ratio";
 export type String = string;
 /**
  * [media feature value](https://drafts.csswg.org/mediaqueries/#typedef-mf-value) within a media query.
@@ -190,6 +235,14 @@ export type MediaFeatureValue =
       type: "number";
       value: number;
     }
+  | {
+      type: "integer";
+      value: number;
+    }
+  | {
+      type: "boolean";
+      value: boolean;
+    }
   | {
       type: "resolution";
       value: Resolution;
diff --git a/node/test/composeVisitors.test.mjs b/node/test/composeVisitors.test.mjs
@@ -616,7 +616,7 @@ test('environment variables', () => {
     ])
   });
 
-  assert.equal(res.code.toString(), '@media (max-width:600px){body{padding:20px}}');
+  assert.equal(res.code.toString(), '@media (width<=600px){body{padding:20px}}');
 });
 
 test('variables', () => {
diff --git a/node/test/visitor.test.mjs b/node/test/visitor.test.mjs
@@ -170,7 +170,7 @@ test('env function', () => {
     }
   });
 
-  assert.equal(res.code.toString(), '@media (max-width:600px){body{padding:20px}}');
+  assert.equal(res.code.toString(), '@media (width<=600px){body{padding:20px}}');
 });
 
 test('specific environment variables', () => {
@@ -212,7 +212,7 @@ test('specific environment variables', () => {
     }
   });
 
-  assert.equal(res.code.toString(), '@media (max-width:600px){body{padding:20px}}');
+  assert.equal(res.code.toString(), '@media (width<=600px){body{padding:20px}}');
 });
 
 test('url', () => {
diff --git a/src/bundler.rs b/src/bundler.rs
@@ -957,7 +957,7 @@ mod tests {
       .b {
         color: green;
       }
-      
+
       .a {
         color: red;
       }
@@ -986,7 +986,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1015,7 +1015,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1046,7 +1046,7 @@ mod tests {
           }
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1076,7 +1076,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1106,7 +1106,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1139,7 +1139,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       @media print {
         .b {
           color: #ff0;
@@ -1203,7 +1203,7 @@ mod tests {
       .b {
         color: green;
       }
-      
+
       .a {
         color: red;
       }
@@ -1230,7 +1230,7 @@ mod tests {
       .b {
         color: green;
       }
-      
+
       .a {
         color: red;
       }
@@ -1294,7 +1294,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1323,7 +1323,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1362,7 +1362,7 @@ mod tests {
           color: green;
         }
       }
-      
+
       .a {
         color: red;
       }
@@ -1400,7 +1400,7 @@ mod tests {
           "/a.css": r#"
           @layer bar, foo;
           @import "b.css" layer(foo);
-          
+
           @layer bar {
             div {
               background: red;
@@ -1410,7 +1410,7 @@ mod tests {
           "/b.css": r#"
           @layer qux, baz;
           @import "c.css" layer(baz);
-          
+
           @layer qux {
             div {
               background: green;
@@ -1420,7 +1420,7 @@ mod tests {
           "/c.css": r#"
           div {
             background: yellow;
-          }      
+          }
         "#
         },
       },
@@ -1445,7 +1445,7 @@ mod tests {
           }
         }
       }
-      
+
       @layer bar {
         div {
           background: red;
@@ -1479,20 +1479,20 @@ mod tests {
     assert_eq!(
       res,
       indoc! { r#"
-      @media (min-width: 1000px) {
+      @media (width >= 1000px) {
         @layer bar {
           #box {
             background: green;
           }
         }
       }
-      
+
       @layer baz {
         #box {
           background: purple;
         }
       }
-      
+
       @layer bar {
         #box {
           background: #ff0;
@@ -1599,7 +1599,7 @@ mod tests {
           "/c.css": r#"
           body {
             background: white;
-            color: black; 
+            color: black;
           }
         "#
         },
@@ -1886,7 +1886,7 @@ mod tests {
         --_8Cs9ZG_fallback: yellow;
         --_8Cs9ZG_opacity: .5;
       }
-      
+
       .GbJUva_env {
         --GbJUva_env-fallback: 20px;
       }
@@ -1965,16 +1965,16 @@ mod tests {
     let source = r#".imported {
       content: "yay, file support!";
     }
-    
+
     .selector {
       margin: 1em;
       background-color: #f60;
     }
-    
+
     .selector .nested {
       margin: 0.5em;
     }
-    
+
     /*# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJInNvdXJjZVJvb3QiOiAicm9vdCIsCgkiZmlsZSI6ICJzdGRvdXQiLAoJInNvdXJjZXMiOiBbCgkJInN0ZGluIiwKCQkic2Fzcy9fdmFyaWFibGVzLnNjc3MiLAoJCSJzYXNzL19kZW1vLnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSJAaW1wb3J0IFwiX3ZhcmlhYmxlc1wiO1xuQGltcG9ydCBcIl9kZW1vXCI7XG5cbi5zZWxlY3RvciB7XG4gIG1hcmdpbjogJHNpemU7XG4gIGJhY2tncm91bmQtY29sb3I6ICRicmFuZENvbG9yO1xuXG4gIC5uZXN0ZWQge1xuICAgIG1hcmdpbjogJHNpemUgLyAyO1xuICB9XG59IiwKCQkiJGJyYW5kQ29sb3I6ICNmNjA7XG4kc2l6ZTogMWVtOyIsCgkJIi5pbXBvcnRlZCB7XG4gIGNvbnRlbnQ6IFwieWF5LCBmaWxlIHN1cHBvcnQhXCI7XG59IgoJXSwKCSJtYXBwaW5ncyI6ICJBRUFBLFNBQVMsQ0FBQztFQUNSLE9BQU8sRUFBRSxvQkFBcUI7Q0FDL0I7O0FGQ0QsU0FBUyxDQUFDO0VBQ1IsTUFBTSxFQ0hELEdBQUc7RURJUixnQkFBZ0IsRUNMTCxJQUFJO0NEVWhCOztBQVBELFNBQVMsQ0FJUCxPQUFPLENBQUM7RUFDTixNQUFNLEVDUEgsS0FBRztDRFFQIiwKCSJuYW1lcyI6IFtdCn0= */"#;
 
     let fs = TestProvider {
diff --git a/src/lib.rs b/src/lib.rs
diff --git a/src/media_query.rs b/src/media_query.rs

Original file line number	Diff line number	Diff line change
`@@ -170,7 +170,7 @@ test('env function', () => {`
`170`	`170`	`}`
`171`	`171`	`});`
`172`	`172`
`173`		`- assert.equal(res.code.toString(), '@media (max-width:600px){body{padding:20px}}');`
	`173`	`+ assert.equal(res.code.toString(), '@media (width<=600px){body{padding:20px}}');`
`174`	`174`	`});`
`175`	`175`
`176`	`176`	`test('specific environment variables', () => {`
`@@ -212,7 +212,7 @@ test('specific environment variables', () => {`
`212`	`212`	`}`
`213`	`213`	`});`
`214`	`214`
`215`		`- assert.equal(res.code.toString(), '@media (max-width:600px){body{padding:20px}}');`
	`215`	`+ assert.equal(res.code.toString(), '@media (width<=600px){body{padding:20px}}');`
`216`	`216`	`});`
`217`	`217`
`218`	`218`	`test('url', () => {`
Original file line number	Diff line number	Diff line change
`@@ -957,7 +957,7 @@ mod tests {`
`957`	`957`	`.b {`
`958`	`958`	`color: green;`
`959`	`959`	`}`
`960`		`-`
	`960`	`+`
`961`	`961`	`.a {`
`962`	`962`	`color: red;`
`963`	`963`	`}`
`@@ -986,7 +986,7 @@ mod tests {`
`986`	`986`	`color: green;`
`987`	`987`	`}`
`988`	`988`	`}`
`989`		`-`
	`989`	`+`
`990`	`990`	`.a {`
`991`	`991`	`color: red;`
`992`	`992`	`}`
`@@ -1015,7 +1015,7 @@ mod tests {`
`1015`	`1015`	`color: green;`
`1016`	`1016`	`}`
`1017`	`1017`	`}`
`1018`		`-`
	`1018`	`+`
`1019`	`1019`	`.a {`
`1020`	`1020`	`color: red;`
`1021`	`1021`	`}`
`@@ -1046,7 +1046,7 @@ mod tests {`
`1046`	`1046`	`}`
`1047`	`1047`	`}`
`1048`	`1048`	`}`
`1049`		`-`
	`1049`	`+`
`1050`	`1050`	`.a {`
`1051`	`1051`	`color: red;`
`1052`	`1052`	`}`
`@@ -1076,7 +1076,7 @@ mod tests {`
`1076`	`1076`	`color: green;`
`1077`	`1077`	`}`
`1078`	`1078`	`}`
`1079`		`-`
	`1079`	`+`
`1080`	`1080`	`.a {`
`1081`	`1081`	`color: red;`
`1082`	`1082`	`}`
`@@ -1106,7 +1106,7 @@ mod tests {`
`1106`	`1106`	`color: green;`
`1107`	`1107`	`}`
`1108`	`1108`	`}`
`1109`		`-`
	`1109`	`+`
`1110`	`1110`	`.a {`
`1111`	`1111`	`color: red;`
`1112`	`1112`	`}`
`@@ -1139,7 +1139,7 @@ mod tests {`
`1139`	`1139`	`color: green;`
`1140`	`1140`	`}`
`1141`	`1141`	`}`
`1142`		`-`
	`1142`	`+`
`1143`	`1143`	`@media print {`
`1144`	`1144`	`.b {`
`1145`	`1145`	`color: #ff0;`
`@@ -1203,7 +1203,7 @@ mod tests {`
`1203`	`1203`	`.b {`
`1204`	`1204`	`color: green;`
`1205`	`1205`	`}`
`1206`		`-`
	`1206`	`+`
`1207`	`1207`	`.a {`
`1208`	`1208`	`color: red;`
`1209`	`1209`	`}`
`@@ -1230,7 +1230,7 @@ mod tests {`
`1230`	`1230`	`.b {`
`1231`	`1231`	`color: green;`
`1232`	`1232`	`}`
`1233`		`-`
	`1233`	`+`
`1234`	`1234`	`.a {`
`1235`	`1235`	`color: red;`
`1236`	`1236`	`}`
`@@ -1294,7 +1294,7 @@ mod tests {`
`1294`	`1294`	`color: green;`
`1295`	`1295`	`}`
`1296`	`1296`	`}`
`1297`		`-`
	`1297`	`+`
`1298`	`1298`	`.a {`
`1299`	`1299`	`color: red;`
`1300`	`1300`	`}`
`@@ -1323,7 +1323,7 @@ mod tests {`
`1323`	`1323`	`color: green;`
`1324`	`1324`	`}`
`1325`	`1325`	`}`
`1326`		`-`
	`1326`	`+`
`1327`	`1327`	`.a {`
`1328`	`1328`	`color: red;`
`1329`	`1329`	`}`
`@@ -1362,7 +1362,7 @@ mod tests {`
`1362`	`1362`	`color: green;`
`1363`	`1363`	`}`
`1364`	`1364`	`}`
`1365`		`-`
	`1365`	`+`
`1366`	`1366`	`.a {`
`1367`	`1367`	`color: red;`
`1368`	`1368`	`}`
`@@ -1400,7 +1400,7 @@ mod tests {`
`1400`	`1400`	`"/a.css": r#"`
`1401`	`1401`	`@layer bar, foo;`
`1402`	`1402`	`@import "b.css" layer(foo);`
`1403`		`-`
	`1403`	`+`
`1404`	`1404`	`@layer bar {`
`1405`	`1405`	`div {`
`1406`	`1406`	`background: red;`
`@@ -1410,7 +1410,7 @@ mod tests {`
`1410`	`1410`	`"/b.css": r#"`
`1411`	`1411`	`@layer qux, baz;`
`1412`	`1412`	`@import "c.css" layer(baz);`
`1413`		`-`
	`1413`	`+`
`1414`	`1414`	`@layer qux {`
`1415`	`1415`	`div {`
`1416`	`1416`	`background: green;`
`@@ -1420,7 +1420,7 @@ mod tests {`
`1420`	`1420`	`"/c.css": r#"`
`1421`	`1421`	`div {`
`1422`	`1422`	`background: yellow;`
`1423`		`- }`
	`1423`	`+ }`
`1424`	`1424`	`"#`
`1425`	`1425`	`},`
`1426`	`1426`	`},`
`@@ -1445,7 +1445,7 @@ mod tests {`
`1445`	`1445`	`}`
`1446`	`1446`	`}`
`1447`	`1447`	`}`
`1448`		`-`
	`1448`	`+`
`1449`	`1449`	`@layer bar {`
`1450`	`1450`	`div {`
`1451`	`1451`	`background: red;`
`@@ -1479,20 +1479,20 @@ mod tests {`
`1479`	`1479`	`assert_eq!(`
`1480`	`1480`	`res,`
`1481`	`1481`	`indoc! { r#"`
`1482`		`- @media (min-width: 1000px) {`
	`1482`	`+ @media (width >= 1000px) {`
`1483`	`1483`	`@layer bar {`
`1484`	`1484`	`#box {`
`1485`	`1485`	`background: green;`
`1486`	`1486`	`}`
`1487`	`1487`	`}`
`1488`	`1488`	`}`
`1489`		`-`
	`1489`	`+`
`1490`	`1490`	`@layer baz {`
`1491`	`1491`	`#box {`
`1492`	`1492`	`background: purple;`
`1493`	`1493`	`}`
`1494`	`1494`	`}`
`1495`		`-`
	`1495`	`+`
`1496`	`1496`	`@layer bar {`
`1497`	`1497`	`#box {`
`1498`	`1498`	`background: #ff0;`
`@@ -1599,7 +1599,7 @@ mod tests {`
`1599`	`1599`	`"/c.css": r#"`
`1600`	`1600`	`body {`
`1601`	`1601`	`background: white;`
`1602`		`- color: black;`
	`1602`	`+ color: black;`
`1603`	`1603`	`}`
`1604`	`1604`	`"#`
`1605`	`1605`	`},`
`@@ -1886,7 +1886,7 @@ mod tests {`
`1886`	`1886`	`--_8Cs9ZG_fallback: yellow;`
`1887`	`1887`	`--_8Cs9ZG_opacity: .5;`
`1888`	`1888`	`}`
`1889`		`-`
	`1889`	`+`
`1890`	`1890`	`.GbJUva_env {`
`1891`	`1891`	`--GbJUva_env-fallback: 20px;`
`1892`	`1892`	`}`
`@@ -1965,16 +1965,16 @@ mod tests {`
`1965`	`1965`	`let source = r#".imported {`
`1966`	`1966`	`content: "yay, file support!";`
`1967`	`1967`	`}`
`1968`		`-`
	`1968`	`+`
`1969`	`1969`	`.selector {`
`1970`	`1970`	`margin: 1em;`
`1971`	`1971`	`background-color: #f60;`
`1972`	`1972`	`}`
`1973`		`-`
	`1973`	`+`
`1974`	`1974`	`.selector .nested {`
`1975`	`1975`	`margin: 0.5em;`
`1976`	`1976`	`}`
`1977`		`-`
	`1977`	`+`
`1978`	`1978`	/# sourceMappingURL=data:application/json;base64,ewoJInZlcnNpb24iOiAzLAoJInNvdXJjZVJvb3QiOiAicm9vdCIsCgkiZmlsZSI6ICJzdGRvdXQiLAoJInNvdXJjZXMiOiBbCgkJInN0ZGluIiwKCQkic2Fzcy9fdmFyaWFibGVzLnNjc3MiLAoJCSJzYXNzL19kZW1vLnNjc3MiCgldLAoJInNvdXJjZXNDb250ZW50IjogWwoJCSJAaW1wb3J0IFwiX3ZhcmlhYmxlc1wiO1xuQGltcG9ydCBcIl9kZW1vXCI7XG5cbi5zZWxlY3RvciB7XG4gIG1hcmdpbjogJHNpemU7XG4gIGJhY2tncm91bmQtY29sb3I6ICRicmFuZENvbG9yO1xuXG4gIC5uZXN0ZWQge1xuICAgIG1hcmdpbjogJHNpemUgLyAyO1xuICB9XG59IiwKCQkiJGJyYW5kQ29sb3I6ICNmNjA7XG4kc2l6ZTogMWVtOyIsCgkJIi5pbXBvcnRlZCB7XG4gIGNvbnRlbnQ6IFwieWF5LCBmaWxlIHN1cHBvcnQhXCI7XG59IgoJXSwKCSJtYXBwaW5ncyI6ICJBRUFBLFNBQVMsQ0FBQztFQUNSLE9BQU8sRUFBRSxvQkFBcUI7Q0FDL0I7O0FGQ0QsU0FBUyxDQUFDO0VBQ1IsTUFBTSxFQ0hELEdBQUc7RURJUixnQkFBZ0IsRUNMTCxJQUFJO0NEVWhCOztBQVBELFNBQVMsQ0FJUCxPQUFPLENBQUM7RUFDTixNQUFNLEVDUEgsS0FBRztDRFFQIiwKCSJuYW1lcyI6IFtdCn0= /"#;
`1979`	`1979`
`1980`	`1980`	`let fs = TestProvider {`