feat(css/compat): Implement compat pass for media ranges (#6631)

Co-authored-by: Donny/강동윤 <kdy1997.dev@gmail.com>

crates/swc_atoms/words.txt

@@ -799,6 +799,7 @@ codebase
 col
 colgroup
 color
+color-index
 color-mix
 color-profile
 color-scheme
@@ -853,7 +854,10 @@ del
 delete
 desc
 details
+device-aspect-ratio
 device-cmyk
+device-height
+device-width
 dfn
 dialog
 diffuseConstant
@@ -1237,10 +1241,18 @@ math-shift
 math-style
 matrix
 matrix3d
+max-aspect-ratio
 max-block-size
+max-color
+max-color-index
+max-device-aspect-ratio
+max-device-height
+max-device-width
 max-height
 max-inline-size
 max-lines
+max-monochrome
+max-resolution
 max-width
 maxlength
 media
@@ -1251,9 +1263,17 @@ metadata
 meter
 mglyph
 mi
+min-aspect-ratio
 min-block-size
+min-color
+min-color-index
+min-device-aspect-ratio
+min-device-height
+min-device-width
 min-height
 min-inline-size
+min-monochrome
+min-resolution
 min-width
 missing-glyph
 mix-blend-mode
@@ -1262,6 +1282,7 @@ mm
 mn
 mo
 module
+monochrome
 mozmm
 mpath
 ms
@@ -1526,6 +1547,7 @@ requiredFeatures
 requiredextensions
 requiredfeatures
 resize
+resolution
 return
 revert
 revert-layer

crates/swc_css_compat/src/compiler/media_query_ranges.rs

@@ -0,0 +1,237 @@
+use swc_atoms::js_word;
+use swc_common::DUMMY_SP;
+use swc_css_ast::{
+    Dimension, Ident, MediaFeature, MediaFeatureName, MediaFeaturePlain, MediaFeatureRange,
+    MediaFeatureRangeComparison, MediaFeatureRangeInterval, MediaFeatureValue,
+};
+
+use crate::compiler::Compiler;
+
+impl Compiler {
+    pub(crate) fn get_legacy_media_feature(
+        &mut self,
+        n: &mut MediaFeature,
+    ) -> Option<(MediaFeature, Option<MediaFeature>)> {
+        match n {
+            MediaFeature::Range(MediaFeatureRange {
+                span,
+                left: box left,
+                comparison,
+                right: box right,
+                ..
+            }) => {
+                if let MediaFeatureValue::Ident(name) = &left {
+                    let name = match comparison {
+                        MediaFeatureRangeComparison::Lt | MediaFeatureRangeComparison::Le => {
+                            self.get_right_media_feature_name(name)
+                        }
+                        MediaFeatureRangeComparison::Eq => {
+                            Some(MediaFeatureName::Ident(name.clone()))
+                        }
+                        _ => self.get_left_media_feature_name(name),
+                    }?;
+
+                    let original_value = right.clone();
+                    let value = match comparison {
+                        MediaFeatureRangeComparison::Lt => self.get_lt_value(original_value),
+                        MediaFeatureRangeComparison::Gt => self.get_gt_value(original_value),
+                        _ => Some(original_value),
+                    }?;
+
+                    return Some((
+                        MediaFeature::Plain(MediaFeaturePlain {
+                            span: *span,
+                            name,
+                            value: Box::new(value),
+                        }),
+                        None,
+                    ));
+                } else if let MediaFeatureValue::Ident(name) = &right {
+                    let name = match comparison {
+                        MediaFeatureRangeComparison::Lt | MediaFeatureRangeComparison::Le => {
+                            self.get_left_media_feature_name(name)
+                        }
+                        MediaFeatureRangeComparison::Eq => {
+                            Some(MediaFeatureName::Ident(name.clone()))
+                        }
+                        _ => self.get_right_media_feature_name(name),
+                    }?;
+
+                    let original_value = left.clone();
+                    let value = match comparison {
+                        MediaFeatureRangeComparison::Lt => self.get_gt_value(original_value),
+                        MediaFeatureRangeComparison::Gt => self.get_lt_value(original_value),
+                        _ => Some(original_value),
+                    }?;
+
+                    return Some((
+                        MediaFeature::Plain(MediaFeaturePlain {
+                            span: *span,
+                            name,
+                            value: Box::new(value),
+                        }),
+                        None,
+                    ));
+                }
+            }
+            MediaFeature::RangeInterval(MediaFeatureRangeInterval {
+                span,
+                left: box left,
+                left_comparison,
+                name: MediaFeatureName::Ident(name),
+                right: box right,
+                right_comparison,
+                ..
+            }) => {
+                let left_name = match left_comparison {
+                    MediaFeatureRangeComparison::Gt | MediaFeatureRangeComparison::Ge => {
+                        self.get_right_media_feature_name(name)
+                    }
+                    _ => self.get_left_media_feature_name(name),
+                }?;
+
+                let left_value = match left_comparison {
+                    MediaFeatureRangeComparison::Lt => self.get_gt_value(left.clone()),
+                    MediaFeatureRangeComparison::Gt => self.get_lt_value(left.clone()),
+                    _ => Some(left.clone()),
+                }?;
+
+                let left = MediaFeature::Plain(MediaFeaturePlain {
+                    span: *span,
+                    name: left_name,
+                    value: Box::new(left_value),
+                });
+
+                let right_name = match right_comparison {
+                    MediaFeatureRangeComparison::Gt | MediaFeatureRangeComparison::Ge => {
+                        self.get_left_media_feature_name(name)
+                    }
+                    _ => self.get_right_media_feature_name(name),
+                }?;
+
+                let right_value = match right_comparison {
+                    MediaFeatureRangeComparison::Lt => self.get_lt_value(right.clone()),
+                    MediaFeatureRangeComparison::Gt => self.get_gt_value(right.clone()),
+                    _ => Some(right.clone()),
+                }?;
+
+                let right = MediaFeature::Plain(MediaFeaturePlain {
+                    span: *span,
+                    name: right_name,
+                    value: Box::new(right_value),
+                });
+
+                return Some((left, Some(right)));
+            }
+            _ => {}
+        }
+
+        None
+    }
+
+    fn get_left_media_feature_name(&self, name: &Ident) -> Option<MediaFeatureName> {
+        let value = match name.value {
+            js_word!("width") => js_word!("min-width"),
+            js_word!("height") => js_word!("min-height"),
+            js_word!("device-width") => js_word!("min-device-width"),
+            js_word!("device-height") => js_word!("min-device-height"),
+            js_word!("aspect-ratio") => js_word!("min-aspect-ratio"),
+            js_word!("device-aspect-ratio") => js_word!("min-device-aspect-ratio"),
+            js_word!("color") => js_word!("min-color"),
+            js_word!("color-index") => js_word!("min-color-index"),
+            js_word!("monochrome") => js_word!("min-monochrome"),
+            js_word!("resolution") => js_word!("min-resolution"),
+            _ => return None,
+        };
+
+        Some(MediaFeatureName::Ident(Ident {
+            span: DUMMY_SP,
+            value,
+            raw: None,
+        }))
+    }
+
+    fn get_right_media_feature_name(&self, name: &Ident) -> Option<MediaFeatureName> {
+        let value = match name.value {
+            js_word!("width") => js_word!("max-width"),
+            js_word!("height") => js_word!("max-height"),
+            js_word!("device-width") => js_word!("max-device-width"),
+            js_word!("device-height") => js_word!("max-device-height"),
+            js_word!("aspect-ratio") => js_word!("max-aspect-ratio"),
+            js_word!("device-aspect-ratio") => js_word!("max-device-aspect-ratio"),
+            js_word!("color") => js_word!("max-color"),
+            js_word!("color-index") => js_word!("max-color-index"),
+            js_word!("monochrome") => js_word!("max-monochrome"),
+            js_word!("resolution") => js_word!("max-resolution"),
+            _ => return None,
+        };
+
+        Some(MediaFeatureName::Ident(Ident {
+            span: DUMMY_SP,
+            value,
+            raw: None,
+        }))
+    }
+
+    fn get_lt_value(&self, mut value: MediaFeatureValue) -> Option<MediaFeatureValue> {
+        match &mut value {
+            MediaFeatureValue::Number(number) => {
+                number.value -= 1.0;
+                number.raw = None;
+
+                Some(value)
+            }
+            MediaFeatureValue::Dimension(dimension) => {
+                match dimension {
+                    Dimension::Length(length) => {
+                        length.value.value -= 0.001;
+                        length.value.raw = None;
+                    }
+                    _ => {
+                        return None;
+                    }
+                }
+
+                Some(value)
+            }
+            MediaFeatureValue::Ratio(ration) => {
+                ration.left.value -= 0.001;
+                ration.left.raw = None;
+
+                Some(value)
+            }
+            _ => None,
+        }
+    }
+
+    fn get_gt_value(&self, mut value: MediaFeatureValue) -> Option<MediaFeatureValue> {
+        match &mut value {
+            MediaFeatureValue::Number(number) => {
+                number.value += 1.0;
+                number.raw = None;
+
+                Some(value)
+            }
+            MediaFeatureValue::Dimension(dimension) => {
+                match dimension {
+                    Dimension::Length(length) => {
+                        length.value.value += 0.001;
+                        length.value.raw = None;
+                    }
+                    _ => {
+                        return None;
+                    }
+                }
+
+                Some(value)
+            }
+            MediaFeatureValue::Ratio(ration) => {
+                ration.left.value += 0.001;
+                ration.left.raw = None;
+
+                Some(value)
+            }
+            _ => None,
+        }
+    }
+}

crates/swc_css_compat/src/compiler/mod.rs

@@ -1,10 +1,15 @@
-use swc_css_ast::{AtRule, MediaCondition, MediaConditionWithoutOr, MediaQuery, Rule};
+use swc_common::{Spanned, DUMMY_SP};
+use swc_css_ast::{
+    AtRule, MediaAnd, MediaCondition, MediaConditionAllType, MediaConditionWithoutOr,
+    MediaInParens, MediaQuery, Rule,
+};
 use swc_css_visit::{VisitMut, VisitMutWith};
 
 use self::custom_media::CustomMediaHandler;
 use crate::feature::Features;
 
 mod custom_media;
+mod media_query_ranges;
 
 /// Compiles a modern CSS file to a CSS file which works with old browsers.
 #[derive(Debug)]
@@ -69,4 +74,35 @@ impl VisitMut for Compiler {
             self.custom_media.process_rules(n);
         }
     }
+
+    fn visit_mut_media_in_parens(&mut self, n: &mut MediaInParens) {
+        n.visit_mut_children_with(self);
+
+        if self.c.process.contains(Features::MEDIA_QUERY_RANGES) {
+            if let MediaInParens::Feature(media_feature) = n {
+                if let Some(legacy_media_feature) = self.get_legacy_media_feature(media_feature) {
+                    match legacy_media_feature {
+                        (legacy_media_feature, None) => {
+                            *media_feature = Box::new(legacy_media_feature);
+                        }
+                        (left, Some(right)) => {
+                            *n = MediaInParens::MediaCondition(MediaCondition {
+                                span: n.span(),
+                                conditions: vec![
+                                    MediaConditionAllType::MediaInParens(*Box::new(
+                                        MediaInParens::Feature(Box::new(left)),
+                                    )),
+                                    MediaConditionAllType::And(MediaAnd {
+                                        span: DUMMY_SP,
+                                        keyword: None,
+                                        condition: MediaInParens::Feature(Box::new(right)),
+                                    }),
+                                ],
+                            });
+                        }
+                    }
+                }
+            }
+        }
+    }
 }

crates/swc_css_compat/src/feature.rs

@@ -4,5 +4,6 @@ bitflags! {
     pub struct Features: u64 {
         const NESTING = 1 << 0;
         const CUSTOM_MEDIA = 1 << 1;
+        const MEDIA_QUERY_RANGES = 1 << 2;
     }
 }

crates/swc_css_compat/tests/fixture.rs

@@ -103,3 +103,25 @@ fn test_custom_media_query(input: PathBuf) {
     })
     .unwrap();
 }
+
+#[testing::fixture("tests/media-query-ranges/**/*.css", exclude("expect.css"))]
+fn test_media_query_ranges(input: PathBuf) {
+    let output = input.with_extension("expect.css");
+
+    testing::run_test(false, |cm, _| {
+        //
+        let fm = cm.load_file(&input).unwrap();
+        let mut ss = parse_stylesheet(&fm);
+
+        ss.visit_mut_with(&mut Compiler::new(Config {
+            process: Features::MEDIA_QUERY_RANGES,
+        }));
+
+        let s = print_stylesheet(&ss);
+
+        NormalizedOutput::from(s).compare_to_file(&output).unwrap();
+
+        Ok(())
+    })
+    .unwrap();
+}

crates/swc_css_compat/tests/media-query-ranges/input.css

@@ -0,0 +1,466 @@
+@import "foo1.css" screen and (100px > width > 200px);
+@import "foo2.css" screen and (width >= 500px);
+
+@media (width >= 500px) {
+    a { color: red }
+}
+
+@media (width < 500px) {
+    a { color: red }
+}
+
+@media (width <= 500px) {
+    a { color: red }
+}
+
+@media (width > 500px) {
+    a { color: red }
+}
+
+@media (width = 500px) {
+    a { color: red }
+}
+
+@media (500px >= width) {
+    a { color: blue }
+}
+
+@media (500px < width) {
+    a { color: blue }
+}
+
+@media (500px <= width) {
+    a { color: blue }
+}
+
+@media (500px > width) {
+    a { color: blue }
+}
+
+@media (500px = width) {
+    a { color: blue }
+}
+
+/* shorthands */
+@media (1024px > width >= 768px) {
+    a { color: red }
+}
+@media (768px <= width < 1024px) {
+    a { color: red }
+}
+
+@media (1024px >= width > 768px) {
+    a { color: red }
+}
+@media (768px < width <= 1024px) {
+    a { color: red }
+}
+
+@media (1024px >= width >= 768px) {
+    a { color: red }
+}
+@media (768px <= width <= 1024px) {
+    a { color: red }
+}
+
+@media (1024px > width > 768px) {
+    a { color: red }
+}
+@media (768px < width < 1024px) {
+    a { color: red }
+}
+
+/* resolution */
+@media screen and (resolution >= 1dpi) and (resolution <= 192dpi) {
+    a { color: red }
+}
+
+@media screen and (1.5dppx <= resolution <= 3dppx) {
+    a { color: red }
+}
+
+@media screen and (.5dppx <= resolution <= 2.5dppx) {
+    a { color: red }
+}
+
+@media screen and (resolution) and (10dpi <= resolution <= 118dpcm) {
+    a { color: red }
+}
+
+/* other-name */
+
+@media screen and (width >= 500px) and (height) {
+    .bar {
+        display: block;
+    }
+}
+
+@media screen and (500px <= width <= 1200px) and (height) {
+    .bar {
+        display: block;
+    }
+}
+
+@media screen and (any-hover) and (width >= 500px) and (device-width) {
+    .bar {
+        display: block;
+    }
+}
+
+@media screen and (any-hover) and (width >= 500px) and (device-width) {
+    .bar {
+        display: block;
+    }
+}
+
+
+/* more-units */
+@media screen and (color-index) {
+    a { color: red }
+}
+@media screen and (color-index >= 0) and (color-index <= 1000) {
+    a { color: red }
+}
+@media screen and (monochrome >= 0) and (monochrome <= 1000) {
+    a { color: red }
+}
+
+@media screen and (resolution >= 96dpi) and (resolution <= 3dppx) {
+    a { color: red }
+}
+@media screen and (width >= -200px) and (width <= 900.56px) {
+    a { color: red }
+}
+@media screen and (width >= -0.58px) and (width <= .99px) {
+    a { color: red }
+}
+
+@media screen and (resolution) {
+    a { color: red }
+}
+@media screen and (resolution >= 1000dpi) and (resolution <= 3dppx) {
+    a { color: red }
+}
+@media screen and (1000000dpi <= resolution <= 1000000dpcm) {
+    a { color: red }
+}
+@media screen and (1 / 1000 <= resolution <= 16 /9) {
+    a { color: red }
+}
+
+/* monochrome */
+@media screen and (monochrome >= 0) and (monochrome <= 1000) {
+    a { color: red }
+}
+
+@media screen and (0 <= monochrome <= 1000) {
+    a { color: red }
+}
+
+@media screen and (monochrome) and (1 <= monochrome <= 300) {
+    a { color: red }
+}
+
+/* min-max */
+
+/* width */
+@media screen and (width > 500px) and (width < 1200px) {
+    a { color: red }
+}
+
+@media screen and (500px < width < 1200px) {
+    a { color: red }
+}
+
+@media screen and (40em < width < 60em) {
+    a { color: red }
+}
+
+@media screen and (13.8rem < width <= 51.2rem) {
+    a { color: red }
+}
+
+@media screen and (6in < width < 9in) {
+    a { color: red }
+}
+
+@media screen and (0 < width < 500.58px) {
+    a { color: red }
+}
+
+@media screen and (width) and (.08px < width < 0.68px) {
+    a { color: red }
+}
+
+/* height */
+@media screen and (height > 500px) and (height < 1200px) {
+    a { color: red }
+}
+
+@media screen and (500px < height < 1200px) {
+    a { color: red }
+}
+
+@media screen and (40em < height < 60em) {
+    a { color: red }
+}
+
+@media screen and (13.8rem <= height < 51.2rem) {
+    a { color: red }
+}
+
+@media screen and (6in < height < 9in) {
+    a { color: red }
+}
+
+@media screen and (0 < height < 500.58px) {
+    a { color: red }
+}
+
+@media screen and (height) and (.08px < height < 0.68px) {
+    a { color: red }
+}
+
+
+/* device-width-height */
+@media screen and (device-width >= 500px) and (device-width <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (500px <= device-width <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (0 <= device-width <= 500.58px) {
+    a { color: red }
+}
+
+@media screen and (device-width) and (.08px <= device-width <= 0.68px) {
+    a { color: red }
+}
+
+/* device-height */
+@media screen and (device-height >= 500px) and (device-height <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (500px <= device-height <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (0 <= device-height <= 500.58px) {
+    a { color: red }
+}
+
+@media screen and (device-height) and (.08px <= device-height <= 0.68px) {
+    a { color: red }
+}
+
+/* device-aspect-ratio */
+
+@media screen and (device-aspect-ratio >= 1/1000) and (device-aspect-ratio <= 16/9) {
+    a { color: red }
+}
+
+@media screen and (1 / 1000 <= device-aspect-ratio <= 16  /  9) {
+    a { color: red }
+}
+
+@media screen and (0/0 <= device-aspect-ratio <= 16/9) {
+    a { color: red }
+}
+
+@media screen and (device-aspect-ratio) and (1 / 1000 <= device-aspect-ratio <= 16  /  9) {
+    a { color: red }
+}
+
+
+/* color */
+@media screen and (color >= 0) and (color <= 8) {
+    a { color: red }
+}
+
+@media screen and (0 <= color <= 8) {
+    a { color: red }
+}
+
+@media screen and (color) and (6 <= color <= 256) {
+    a { color: red }
+}
+
+/* color-index */
+
+@media screen and (color-index >= 0) and (color-index <= 8) {
+    a { color: red }
+}
+
+@media screen and (0 <= color-index <= 8) {
+    a { color: red }
+}
+
+@media screen and (color-index) and (6 <= color-index <= 256) {
+    a { color: red }
+}
+
+/* aspect-ratio */
+
+@media screen and (aspect-ratio >= 1/1000) and (aspect-ratio <= 16/9) {
+    a { color: red }
+}
+
+@media screen and (1 / 1000 <= aspect-ratio <= 16  /  9) {
+    a { color: red }
+}
+
+@media screen and (0/0 <= aspect-ratio <= 16/9) {
+    a { color: red }
+}
+
+@media screen and (aspect-ratio) and (1 / 1000 <= aspect-ratio <= 16  /  9) {
+    a { color: red }
+}
+    
+@media screen and (width > 500px) and (width <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (500px <= width <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (0 <= width <= 500.58px) {
+    a { color: red }
+}
+
+@media screen and (width) and (.08px <= width <= 0.68px) {
+    a { color: red }
+}
+
+/* height */
+@media screen and (height >= 500px) and (height <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (500px <= height <= 1200px) {
+    a { color: red }
+}
+
+@media screen and (0 <= height <= 500.58px) {
+    a { color: red }
+}
+
+@media screen and (height) and (.08px <= height <= 0.68px) {
+    a { color: red }
+}
+
+@media screen and (aspect-ratio > 1/1000) {
+    a { color: red }
+}
+
+@media screen and (aspect-ratio < 1/1000) {
+    a { color: red }
+}
+
+@media screen and (aspect-ratio < 1/1000) {
+    a { color: red }
+}
+
+@media screen and (color < 10) {
+    a { color: red }
+}
+
+@media screen and (color > 10) {
+    a { color: red }
+}
+
+@media (1024px > width >= 768px) {
+    a { color: red }
+}
+
+@media (1024px >= width >= 768px) {
+    a { color: red }
+}
+
+@media (1024px < width <= 768px) {
+    a { color: red }
+}
+
+@media (1024px <= width < 768px) {
+    a { color: red }
+}
+
+@media (100px > width > 400px) {
+    a { color: red }
+}
+
+@media (100px > width > 400px) {
+    a { color: red }
+}
+
+@media (100px < width < 400px) {
+    a { color: red }
+}
+
+@media (768px > width > 768px) {
+    a { color: red }
+}
+
+@media (768px < width < 768px) {
+    a { color: red }
+}
+
+@media (768px <= width <= 768px) {
+    a { color: red }
+}
+
+@media (768px > width > 768px) {
+    a { color: red }
+}
+
+@media (768px >= width >= 768px) {
+    a { color: red }
+}
+
+@media (200px > width > 500px) {
+    a { color: red }
+}
+
+@media (200px > width >= 500px) {
+    a { color: red }
+}
+
+@media (200px >= width > 500px) {
+    a { color: red }
+}
+
+@media (200px >= width >= 500px) {
+    a { color: red }
+}
+
+@media (200px < width < 500px) {
+    a { color: red }
+}
+
+@media (200px < width <= 500px) {
+    a { color: red }
+}
+
+@media (200px <= width < 500px) {
+    a { color: red }
+}
+
+@media (200px <= width <= 500px) {
+    a { color: red }
+}
+
+@media (1 <= color <= 256) {
+    a { color: red }
+}
+
+@media (1 < color < 256) {
+    a { color: red }
+}
+
+@media (1 > color > 256) {
+    a { color: red }
+}

crates/swc_css_compat/tests/media-query-ranges/input.expect.css

@@ -0,0 +1,557 @@
+@import "foo1.css" screen and ((max-width: 99.999px) and (min-width: 200.001px));
+@import "foo2.css" screen and (min-width: 500px);
+@media (min-width: 500px) {
+  a {
+    color: red;
+  }
+}
+@media (max-width: 499.999px) {
+  a {
+    color: red;
+  }
+}
+@media (max-width: 500px) {
+  a {
+    color: red;
+  }
+}
+@media (min-width: 500.001px) {
+  a {
+    color: red;
+  }
+}
+@media (width: 500px) {
+  a {
+    color: red;
+  }
+}
+@media (max-width: 500px) {
+  a {
+    color: blue;
+  }
+}
+@media (min-width: 500.001px) {
+  a {
+    color: blue;
+  }
+}
+@media (min-width: 500px) {
+  a {
+    color: blue;
+  }
+}
+@media (max-width: 499.999px) {
+  a {
+    color: blue;
+  }
+}
+@media (width: 500px) {
+  a {
+    color: blue;
+  }
+}
+@media ((max-width: 1023.999px) and (min-width: 768px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 768px) and (max-width: 1023.999px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 1024px) and (min-width: 768.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 768.001px) and (max-width: 1024px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 1024px) and (min-width: 768px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 768px) and (max-width: 1024px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 1023.999px) and (min-width: 768.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 768.001px) and (max-width: 1023.999px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-resolution: 1dpi) and (max-resolution: 192dpi) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-resolution: 1.5dppx) and (max-resolution: 3dppx)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-resolution: .5dppx) and (max-resolution: 2.5dppx)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (resolution) and ((min-resolution: 10dpi) and (max-resolution: 118dpcm)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-width: 500px) and (height) {
+  .bar {
+    display: block;
+  }
+}
+@media screen and ((min-width: 500px) and (max-width: 1200px)) and (height) {
+  .bar {
+    display: block;
+  }
+}
+@media screen and (any-hover) and (min-width: 500px) and (device-width) {
+  .bar {
+    display: block;
+  }
+}
+@media screen and (any-hover) and (min-width: 500px) and (device-width) {
+  .bar {
+    display: block;
+  }
+}
+@media screen and (color-index) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-color-index: 0) and (max-color-index: 1000) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-monochrome: 0) and (max-monochrome: 1000) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-resolution: 96dpi) and (max-resolution: 3dppx) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-width: -200px) and (max-width: 900.56px) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-width: -0.58px) and (max-width: .99px) {
+  a {
+    color: red;
+  }
+}
+@media screen and (resolution) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-resolution: 1000dpi) and (max-resolution: 3dppx) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-resolution: 1000000dpi) and (max-resolution: 1000000dpcm)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-resolution: 1/1000) and (max-resolution: 16/9)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-monochrome: 0) and (max-monochrome: 1000) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-monochrome: 0) and (max-monochrome: 1000)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (monochrome) and ((min-monochrome: 1) and (max-monochrome: 300)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-width: 500.001px) and (max-width: 1199.999px) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-width: 500.001px) and (max-width: 1199.999px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-width: 40.001em) and (max-width: 59.999em)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-width: 13.801rem) and (max-width: 51.2rem)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-width: 6.001in) and (max-width: 8.999in)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-width: 1) and (max-width: 500.579px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (width) and ((min-width: 0.081px) and (max-width: 0.679px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-height: 500.001px) and (max-height: 1199.999px) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-height: 500.001px) and (max-height: 1199.999px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-height: 40.001em) and (max-height: 59.999em)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-height: 13.8rem) and (max-height: 51.199000000000005rem)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-height: 6.001in) and (max-height: 8.999in)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-height: 1) and (max-height: 500.579px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (height) and ((min-height: 0.081px) and (max-height: 0.679px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-device-width: 500px) and (max-device-width: 1200px) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-device-width: 500px) and (max-device-width: 1200px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-device-width: 0) and (max-device-width: 500.58px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (device-width) and ((min-device-width: .08px) and (max-device-width: 0.68px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-device-height: 500px) and (max-device-height: 1200px) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-device-height: 500px) and (max-device-height: 1200px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-device-height: 0) and (max-device-height: 500.58px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (device-height) and ((min-device-height: .08px) and (max-device-height: 0.68px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-device-aspect-ratio: 1/1000) and (max-device-aspect-ratio: 16/9) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-device-aspect-ratio: 1/1000) and (max-device-aspect-ratio: 16/9)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-device-aspect-ratio: 0/0) and (max-device-aspect-ratio: 16/9)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (device-aspect-ratio) and ((min-device-aspect-ratio: 1/1000) and (max-device-aspect-ratio: 16/9)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-color: 0) and (max-color: 8) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-color: 0) and (max-color: 8)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (color) and ((min-color: 6) and (max-color: 256)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-color-index: 0) and (max-color-index: 8) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-color-index: 0) and (max-color-index: 8)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (color-index) and ((min-color-index: 6) and (max-color-index: 256)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-aspect-ratio: 1/1000) and (max-aspect-ratio: 16/9) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-aspect-ratio: 1/1000) and (max-aspect-ratio: 16/9)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-aspect-ratio: 0/0) and (max-aspect-ratio: 16/9)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (aspect-ratio) and ((min-aspect-ratio: 1/1000) and (max-aspect-ratio: 16/9)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-width: 500.001px) and (max-width: 1200px) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-width: 500px) and (max-width: 1200px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-width: 0) and (max-width: 500.58px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (width) and ((min-width: .08px) and (max-width: 0.68px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-height: 500px) and (max-height: 1200px) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-height: 500px) and (max-height: 1200px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and ((min-height: 0) and (max-height: 500.58px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (height) and ((min-height: .08px) and (max-height: 0.68px)) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-aspect-ratio: 1.001/1000) {
+  a {
+    color: red;
+  }
+}
+@media screen and (max-aspect-ratio: 0.999/1000) {
+  a {
+    color: red;
+  }
+}
+@media screen and (max-aspect-ratio: 0.999/1000) {
+  a {
+    color: red;
+  }
+}
+@media screen and (max-color: 9) {
+  a {
+    color: red;
+  }
+}
+@media screen and (min-color: 11) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 1023.999px) and (min-width: 768px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 1024px) and (min-width: 768px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 1024.001px) and (max-width: 768px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 1024px) and (max-width: 767.999px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 99.999px) and (min-width: 400.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 99.999px) and (min-width: 400.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 100.001px) and (max-width: 399.999px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 767.999px) and (min-width: 768.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 768.001px) and (max-width: 767.999px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 768px) and (max-width: 768px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 767.999px) and (min-width: 768.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 768px) and (min-width: 768px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 199.999px) and (min-width: 500.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 199.999px) and (min-width: 500px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 200px) and (min-width: 500.001px)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-width: 200px) and (min-width: 500px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 200.001px) and (max-width: 499.999px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 200.001px) and (max-width: 500px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 200px) and (max-width: 499.999px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-width: 200px) and (max-width: 500px)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-color: 1) and (max-color: 256)) {
+  a {
+    color: red;
+  }
+}
+@media ((min-color: 2) and (max-color: 255)) {
+  a {
+    color: red;
+  }
+}
+@media ((max-color: 0) and (min-color: 257)) {
+  a {
+    color: red;
+  }
+}