Parse media query features according to specified type

Fixes #454
parcel-bundler · Apr 15, 2023 · a84fbdb · a84fbdb
1 parent 7413eac
commit a84fbdb
Show file tree

Hide file tree

Showing 6 changed files with 569 additions and 76 deletions.
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 {