From d7ad31a7e0a015a16598c346c3ffc754e97dcce0 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 03:39:26 +0300 Subject: [PATCH 01/14] test: added --- .../tests/media_query_ranges/input.css | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 crates/swc_css_compat/tests/media_query_ranges/input.css diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css new file mode 100644 index 000000000000..416334d5861b --- /dev/null +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -0,0 +1,72 @@ +@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: red } +} + +@media (500px < width) { + a { color: red } +} + +@media (500px <= width) { + a { color: red } +} + +@media (500px > width) { + a { color: red } +} + +@media (500px = width) { + 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 } +} \ No newline at end of file From 718b7df09d2c68a9a94bb57c1aab38b581e8dff9 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 03:56:57 +0300 Subject: [PATCH 02/14] feat: first implementation --- crates/swc_atoms/words.txt | 33 ++ .../src/compiler/media_query_ranges.rs | 169 ++++++++ crates/swc_css_compat/src/compiler/mod.rs | 7 + crates/swc_css_compat/src/feature.rs | 1 + crates/swc_css_compat/tests/fixture.rs | 1 + .../tests/media_query_ranges/input.css | 274 ++++++++++++- .../tests/media_query_ranges/input.expect.css | 377 ++++++++++++++++++ 7 files changed, 857 insertions(+), 5 deletions(-) create mode 100644 crates/swc_css_compat/src/compiler/media_query_ranges.rs create mode 100644 crates/swc_css_compat/tests/media_query_ranges/input.expect.css diff --git a/crates/swc_atoms/words.txt b/crates/swc_atoms/words.txt index 409ff5ab96fe..52c63c5f42fc 100644 --- a/crates/swc_atoms/words.txt +++ b/crates/swc_atoms/words.txt @@ -1843,3 +1843,36 @@ z-index zoom zoomAndPan zoomandpan +width +min-width +max-width +height +min-height +max-height +device-width +min-device-width +max-device-width +device-height +min-device-height +max-device-height +aspect-ratio +min-aspect-ratio +max-aspect-ratio +device-aspect-ratio +min-device-aspect-ratio +max-device-aspect-ratio +aspect-ratio +min-aspect-ratio +max-aspect-ratio +color +min-color +max-color +color-index +min-color-index +max-color-index +monochrome +min-monochrome +max-monochrome +resolution +min-resolution +max-resolution \ No newline at end of file diff --git a/crates/swc_css_compat/src/compiler/media_query_ranges.rs b/crates/swc_css_compat/src/compiler/media_query_ranges.rs new file mode 100644 index 000000000000..76ea9940f30f --- /dev/null +++ b/crates/swc_css_compat/src/compiler/media_query_ranges.rs @@ -0,0 +1,169 @@ +use swc_atoms::js_word; +use swc_common::DUMMY_SP; +use swc_css_ast::{ + Dimension, Ident, MediaFeature, MediaFeatureName, MediaFeaturePlain, MediaFeatureRange, + MediaFeatureRangeComparison, MediaFeatureValue, +}; + +use crate::compiler::Compiler; + +impl Compiler { + pub(crate) fn process_media_feature(&mut self, n: &mut 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::Eq => { + Some(MediaFeatureName::Ident(name.clone())) + } + _ => self.get_left_media_feature_name(name), + }; + + if let Some(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), + }; + + if let Some(value) = value { + *n = MediaFeature::Plain(MediaFeaturePlain { + span: *span, + name, + value: Box::new(value), + }); + } + } + } else if let MediaFeatureValue::Ident(name) = &right { + let name = match comparison { + MediaFeatureRangeComparison::Eq => { + Some(MediaFeatureName::Ident(name.clone())) + } + _ => self.get_right_media_feature_name(name), + }; + + if let Some(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), + }; + + if let Some(value) = value { + *n = MediaFeature::Plain(MediaFeaturePlain { + span: *span, + name, + value: Box::new(value), + }); + } + } + } + } + _ => {} + } + } + + fn get_left_media_feature_name(&self, name: &Ident) -> Option { + 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 { + 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 { + match &mut value { + MediaFeatureValue::Number(number) => { + number.value -= 0.001; + 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) + } + _ => None, + } + } + + fn get_gt_value(&self, mut value: MediaFeatureValue) -> Option { + match &mut value { + MediaFeatureValue::Number(number) => { + number.value += 0.001; + 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) + } + _ => None, + } + } +} diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index 104beee1e7d7..13d67c13f969 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -1,10 +1,12 @@ use swc_css_ast::{AtRule, MediaCondition, MediaConditionWithoutOr, MediaQuery, Rule}; +use swc_css_ast::MediaFeature; 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)] @@ -67,6 +69,11 @@ impl VisitMut for Compiler { if self.c.process.contains(Features::CUSTOM_MEDIA) { self.custom_media.process_rules(n); + fn visit_mut_media_feature(&mut self, n: &mut MediaFeature) { + n.visit_mut_children_with(self); + + if self.c.process.contains(Features::MEDIA_QUERY_RANGES) { + self.process_media_feature(n); } } } diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index a1f5344b9b96..339a48a47393 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/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 << 1; } } diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index fc734d203d88..a2413131d64a 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -83,6 +83,7 @@ fn test_nesting_without_env(input: PathBuf) { } #[testing::fixture("tests/custom-media-query/**/*.css", exclude("expect.css"))] +#[testing::fixture("tests/media_query_ranges/**/*.css", exclude("expect.css"))] fn test_custom_media_query(input: PathBuf) { let output = input.with_extension("expect.css"); diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css index 416334d5861b..2601c0deb13e 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -1,3 +1,6 @@ +@import "foo1.css" screen and (100px > width 200px); +@import "foo2.css" screen and (width >= 500px); + @media (width >= 500px) { a { color: red } } @@ -19,25 +22,286 @@ } @media (500px >= width) { - a { color: red } + a { color: blue } } @media (500px < width) { - a { color: red } + a { color: blue } } @media (500px <= width) { - a { color: red } + a { color: blue } } @media (500px > width) { - a { color: red } + 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) { } +@media screen and (color-index >= 0) and (color-index <= 1000) { } +@media screen and (monochrome >= 0) and (monochrome <= 1000) { } + + +@media screen and (resolution >= 96dpi) and (resolution <= 3dppx) { } +@media screen and (width >= -200px) and (width <= 900.56px) { } +@media screen and (width >= -0.58px) and (width <= .99px) { } + + +@media screen and (resolution) { } +@media screen and (resolution >= 1000dpi) and (resolution <= 3dppx) { } +@media screen and (1000000dpi <= resolution <= 1000000dpcm) { } +@media screen and (1 / 1000 <= resolution <= 16 /9) { } + +/* 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 } } @@ -69,4 +333,4 @@ @media screen and (height) and (.08px <= height <= 0.68px) { a { color: red } -} \ No newline at end of file +} diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css new file mode 100644 index 000000000000..5e0b0a7ae531 --- /dev/null +++ b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css @@ -0,0 +1,377 @@ +@import "foo1.css" screen and (100px > width 200px); +@import "foo2.css" screen and (min-width: 500px); +@media (min-width: 500px) { + a { + color: red; + } +} +@media (min-width: 499.999px) { + a { + color: red; + } +} +@media (min-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 (max-width: 500.001px) { + a { + color: blue; + } +} +@media (max-width: 500px) { + a { + color: blue; + } +} +@media (max-width: 499.999px) { + a { + color: blue; + } +} +@media (width: 500px) { + a { + color: blue; + } +} +@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; + } +} +@media screen and (min-resolution: 1dpi) and (min-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; + } +} +@media screen and (min-width: 500px) and (height) { + .bar { + display: block; + } +} +@media screen and (500px <= 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) {} +@media screen and (min-color-index: 0) and (min-color-index: 1000) {} +@media screen and (min-monochrome: 0) and (min-monochrome: 1000) {} +@media screen and (min-resolution: 96dpi) and (min-resolution: 3dppx) {} +@media screen and (min-width: -200px) and (min-width: 900.56px) {} +@media screen and (min-width: -0.58px) and (min-width: .99px) {} +@media screen and (resolution) {} +@media screen and (min-resolution: 1000dpi) and (min-resolution: 3dppx) {} +@media screen and (1000000dpi <= resolution <= 1000000dpcm) {} +@media screen and (1/1000 <= resolution <= 16/9) {} +@media screen and (min-monochrome: 0) and (min-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; + } +} +@media screen and (min-width: 500.001px) and (min-width: 1199.999px) { + 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; + } +} +@media screen and (min-height: 500.001px) and (min-height: 1199.999px) { + 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; + } +} +@media screen and (min-device-width: 500px) and (min-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; + } +} +@media screen and (min-device-height: 500px) and (min-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; + } +} +@media screen and (min-device-aspect-ratio: 1/1000) and (min-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; + } +} +@media screen and (min-color: 0) and (min-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; + } +} +@media screen and (min-color-index: 0) and (min-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; + } +} +@media screen and (min-aspect-ratio: 1/1000) and (min-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 (min-width: 500.001px) and (min-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; + } +} +@media screen and (min-height: 500px) and (min-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; + } +} From 5f9f62ea28dbef99867d0d29beb0bdbc5d7cc882 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 04:10:21 +0300 Subject: [PATCH 03/14] fix: bugs --- .../src/compiler/media_query_ranges.rs | 22 +++++- .../tests/media_query_ranges/input.css | 20 ++++++ .../tests/media_query_ranges/input.expect.css | 69 +++++++++++++------ 3 files changed, 87 insertions(+), 24 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/media_query_ranges.rs b/crates/swc_css_compat/src/compiler/media_query_ranges.rs index 76ea9940f30f..02efc0b8c276 100644 --- a/crates/swc_css_compat/src/compiler/media_query_ranges.rs +++ b/crates/swc_css_compat/src/compiler/media_query_ranges.rs @@ -19,6 +19,9 @@ impl Compiler { }) => { 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())) } @@ -44,6 +47,9 @@ impl Compiler { } } 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())) } @@ -120,7 +126,7 @@ impl Compiler { fn get_lt_value(&self, mut value: MediaFeatureValue) -> Option { match &mut value { MediaFeatureValue::Number(number) => { - number.value -= 0.001; + number.value -= 1.0; number.raw = None; Some(value) @@ -138,6 +144,12 @@ impl Compiler { Some(value) } + MediaFeatureValue::Ratio(ration) => { + ration.left.value -= 0.001; + ration.left.raw = None; + + Some(value) + } _ => None, } } @@ -145,7 +157,7 @@ impl Compiler { fn get_gt_value(&self, mut value: MediaFeatureValue) -> Option { match &mut value { MediaFeatureValue::Number(number) => { - number.value += 0.001; + number.value += 1.0; number.raw = None; Some(value) @@ -163,6 +175,12 @@ impl Compiler { Some(value) } + MediaFeatureValue::Ratio(ration) => { + ration.left.value += 0.001; + ration.left.raw = None; + + Some(value) + } _ => None, } } diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css index 2601c0deb13e..bc22eba7e019 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -334,3 +334,23 @@ @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 } +} diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css index 5e0b0a7ae531..1dd386959f6c 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css @@ -5,12 +5,12 @@ color: red; } } -@media (min-width: 499.999px) { +@media (max-width: 499.999px) { a { color: red; } } -@media (min-width: 500px) { +@media (max-width: 500px) { a { color: red; } @@ -30,12 +30,12 @@ color: blue; } } -@media (max-width: 500.001px) { +@media (min-width: 500.001px) { a { color: blue; } } -@media (max-width: 500px) { +@media (min-width: 500px) { a { color: blue; } @@ -90,7 +90,7 @@ color: red; } } -@media screen and (min-resolution: 1dpi) and (min-resolution: 192dpi) { +@media screen and (min-resolution: 1dpi) and (max-resolution: 192dpi) { a { color: red; } @@ -131,16 +131,16 @@ } } @media screen and (color-index) {} -@media screen and (min-color-index: 0) and (min-color-index: 1000) {} -@media screen and (min-monochrome: 0) and (min-monochrome: 1000) {} -@media screen and (min-resolution: 96dpi) and (min-resolution: 3dppx) {} -@media screen and (min-width: -200px) and (min-width: 900.56px) {} -@media screen and (min-width: -0.58px) and (min-width: .99px) {} +@media screen and (min-color-index: 0) and (max-color-index: 1000) {} +@media screen and (min-monochrome: 0) and (max-monochrome: 1000) {} +@media screen and (min-resolution: 96dpi) and (max-resolution: 3dppx) {} +@media screen and (min-width: -200px) and (max-width: 900.56px) {} +@media screen and (min-width: -0.58px) and (max-width: .99px) {} @media screen and (resolution) {} -@media screen and (min-resolution: 1000dpi) and (min-resolution: 3dppx) {} +@media screen and (min-resolution: 1000dpi) and (max-resolution: 3dppx) {} @media screen and (1000000dpi <= resolution <= 1000000dpcm) {} @media screen and (1/1000 <= resolution <= 16/9) {} -@media screen and (min-monochrome: 0) and (min-monochrome: 1000) { +@media screen and (min-monochrome: 0) and (max-monochrome: 1000) { a { color: red; } @@ -155,7 +155,7 @@ color: red; } } -@media screen and (min-width: 500.001px) and (min-width: 1199.999px) { +@media screen and (min-width: 500.001px) and (max-width: 1199.999px) { a { color: red; } @@ -190,7 +190,7 @@ color: red; } } -@media screen and (min-height: 500.001px) and (min-height: 1199.999px) { +@media screen and (min-height: 500.001px) and (max-height: 1199.999px) { a { color: red; } @@ -225,7 +225,7 @@ color: red; } } -@media screen and (min-device-width: 500px) and (min-device-width: 1200px) { +@media screen and (min-device-width: 500px) and (max-device-width: 1200px) { a { color: red; } @@ -245,7 +245,7 @@ color: red; } } -@media screen and (min-device-height: 500px) and (min-device-height: 1200px) { +@media screen and (min-device-height: 500px) and (max-device-height: 1200px) { a { color: red; } @@ -265,7 +265,7 @@ color: red; } } -@media screen and (min-device-aspect-ratio: 1/1000) and (min-device-aspect-ratio: 16/9) { +@media screen and (min-device-aspect-ratio: 1/1000) and (max-device-aspect-ratio: 16/9) { a { color: red; } @@ -285,7 +285,7 @@ color: red; } } -@media screen and (min-color: 0) and (min-color: 8) { +@media screen and (min-color: 0) and (max-color: 8) { a { color: red; } @@ -300,7 +300,7 @@ color: red; } } -@media screen and (min-color-index: 0) and (min-color-index: 8) { +@media screen and (min-color-index: 0) and (max-color-index: 8) { a { color: red; } @@ -315,7 +315,7 @@ color: red; } } -@media screen and (min-aspect-ratio: 1/1000) and (min-aspect-ratio: 16/9) { +@media screen and (min-aspect-ratio: 1/1000) and (max-aspect-ratio: 16/9) { a { color: red; } @@ -335,7 +335,7 @@ color: red; } } -@media screen and (min-width: 500.001px) and (min-width: 1200px) { +@media screen and (min-width: 500.001px) and (max-width: 1200px) { a { color: red; } @@ -355,7 +355,7 @@ color: red; } } -@media screen and (min-height: 500px) and (min-height: 1200px) { +@media screen and (min-height: 500px) and (max-height: 1200px) { a { color: red; } @@ -375,3 +375,28 @@ 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; + } +} From 2e137e0ec4b647fe439dea8793f19a8b9dfa3807 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 04:12:24 +0300 Subject: [PATCH 04/14] test: fix broken --- crates/swc_css_compat/tests/media_query_ranges/input.css | 2 +- crates/swc_css_compat/tests/media_query_ranges/input.expect.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css index bc22eba7e019..2b903c6fb4b4 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -1,4 +1,4 @@ -@import "foo1.css" screen and (100px > width 200px); +@import "foo1.css" screen and (100px > width > 200px); @import "foo2.css" screen and (width >= 500px); @media (width >= 500px) { diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css index 1dd386959f6c..78b92299c68b 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css @@ -1,4 +1,4 @@ -@import "foo1.css" screen and (100px > width 200px); +@import "foo1.css" screen and (100px > width > 200px); @import "foo2.css" screen and (min-width: 500px); @media (min-width: 500px) { a { From 31504175126d6f71714ccae4bf75f2df54a237a8 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 05:05:44 +0300 Subject: [PATCH 05/14] feat: more --- .../src/compiler/media_query_ranges.rs | 92 +++++++- crates/swc_css_compat/src/compiler/mod.rs | 28 ++- .../tests/media_query_ranges/input.css | 90 +++++++- .../tests/media_query_ranges/input.expect.css | 218 +++++++++++++----- 4 files changed, 344 insertions(+), 84 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/media_query_ranges.rs b/crates/swc_css_compat/src/compiler/media_query_ranges.rs index 02efc0b8c276..58d091aba872 100644 --- a/crates/swc_css_compat/src/compiler/media_query_ranges.rs +++ b/crates/swc_css_compat/src/compiler/media_query_ranges.rs @@ -2,13 +2,16 @@ use swc_atoms::js_word; use swc_common::DUMMY_SP; use swc_css_ast::{ Dimension, Ident, MediaFeature, MediaFeatureName, MediaFeaturePlain, MediaFeatureRange, - MediaFeatureRangeComparison, MediaFeatureValue, + MediaFeatureRangeComparison, MediaFeatureRangeInterval, MediaFeatureValue, }; use crate::compiler::Compiler; impl Compiler { - pub(crate) fn process_media_feature(&mut self, n: &mut MediaFeature) { + pub(crate) fn get_legacy_media_feature( + &mut self, + n: &mut MediaFeature, + ) -> Option<(MediaFeature, Option)> { match n { MediaFeature::Range(MediaFeatureRange { span, @@ -38,11 +41,14 @@ impl Compiler { }; if let Some(value) = value { - *n = MediaFeature::Plain(MediaFeaturePlain { - span: *span, - name, - value: Box::new(value), - }); + return Some(( + MediaFeature::Plain(MediaFeaturePlain { + span: *span, + name, + value: Box::new(value), + }), + None, + )); } } } else if let MediaFeatureValue::Ident(name) = &right { @@ -66,17 +72,79 @@ impl Compiler { }; if let Some(value) = value { - *n = MediaFeature::Plain(MediaFeaturePlain { - span: *span, - name, - value: Box::new(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 first_name = match left_comparison { + MediaFeatureRangeComparison::Gt | MediaFeatureRangeComparison::Ge => { + self.get_right_media_feature_name(name) + } + _ => self.get_left_media_feature_name(name), + }; + + if let Some(first_name) = first_name { + let value = match left_comparison { + MediaFeatureRangeComparison::Lt => self.get_gt_value(left.clone()), + MediaFeatureRangeComparison::Gt => self.get_lt_value(right.clone()), + _ => Some(left.clone()), + }; + + if let Some(value) = value { + let left = MediaFeature::Plain(MediaFeaturePlain { + span: *span, + name: first_name, + value: Box::new(value), + }); + + let second_name = match right_comparison { + MediaFeatureRangeComparison::Gt | MediaFeatureRangeComparison::Ge => { + self.get_left_media_feature_name(name) + } + _ => self.get_right_media_feature_name(name), + }; + + if let Some(second_name) = second_name { + let value = match left_comparison { + MediaFeatureRangeComparison::Lt => self.get_lt_value(right.clone()), + MediaFeatureRangeComparison::Gt => self.get_gt_value(right.clone()), + _ => Some(right.clone()), + }; + + if let Some(value) = value { + let right = MediaFeature::Plain(MediaFeaturePlain { + span: *span, + name: second_name, + value: Box::new(value), + }); + + return Some((left, Some(right))); + } } } } } _ => {} } + + None } fn get_left_media_feature_name(&self, name: &Ident) -> Option { diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index 13d67c13f969..0cfd0eefa948 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -1,5 +1,7 @@ use swc_css_ast::{AtRule, MediaCondition, MediaConditionWithoutOr, MediaQuery, Rule}; use swc_css_ast::MediaFeature; +use swc_common::{Spanned, DUMMY_SP}; +use swc_css_ast::{MediaAnd, MediaCondition, MediaConditionAllType, MediaInParens}; use swc_css_visit::{VisitMut, VisitMutWith}; use self::custom_media::CustomMediaHandler; @@ -70,10 +72,34 @@ impl VisitMut for Compiler { if self.c.process.contains(Features::CUSTOM_MEDIA) { self.custom_media.process_rules(n); fn visit_mut_media_feature(&mut self, n: &mut MediaFeature) { + 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) { - self.process_media_feature(n); + 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)), + }), + ], + }); + } + } + } + } } } } diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css index 2b903c6fb4b4..ffd4e75746bd 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -115,20 +115,38 @@ /* more-units */ -@media screen and (color-index) { } -@media screen and (color-index >= 0) and (color-index <= 1000) { } -@media screen and (monochrome >= 0) and (monochrome <= 1000) { } - - -@media screen and (resolution >= 96dpi) and (resolution <= 3dppx) { } -@media screen and (width >= -200px) and (width <= 900.56px) { } -@media screen and (width >= -0.58px) and (width <= .99px) { } +@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) { } -@media screen and (resolution >= 1000dpi) and (resolution <= 3dppx) { } -@media screen and (1000000dpi <= resolution <= 1000000dpcm) { } -@media screen and (1 / 1000 <= resolution <= 16 /9) { } +@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) { @@ -354,3 +372,51 @@ @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 } +} diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css index 78b92299c68b..caff985d987f 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css @@ -1,4 +1,4 @@ -@import "foo1.css" screen and (100px > width > 200px); +@import "foo1.css" screen and ((max-width: 199.999px) and (min-width: 200.001px)); @import "foo2.css" screen and (min-width: 500px); @media (min-width: 500px) { a { @@ -50,42 +50,42 @@ color: blue; } } -@media (1024px > width >= 768px) { +@media ((max-width: 767.999px) and (min-width: 768.001px)) { a { color: red; } } -@media (768px <= width < 1024px) { +@media ((min-width: 768px) and (max-width: 1024px)) { a { color: red; } } -@media (1024px >= width > 768px) { +@media ((max-width: 1024px) and (min-width: 768px)) { a { color: red; } } -@media (768px < width <= 1024px) { +@media ((min-width: 768.001px) and (max-width: 1023.999px)) { a { color: red; } } -@media (1024px >= width >= 768px) { +@media ((max-width: 1024px) and (min-width: 768px)) { a { color: red; } } -@media (768px <= width <= 1024px) { +@media ((min-width: 768px) and (max-width: 1024px)) { a { color: red; } } -@media (1024px > width > 768px) { +@media ((max-width: 767.999px) and (min-width: 768.001px)) { a { color: red; } } -@media (768px < width < 1024px) { +@media ((min-width: 768.001px) and (max-width: 1023.999px)) { a { color: red; } @@ -95,17 +95,17 @@ color: red; } } -@media screen and (1.5dppx <= resolution <= 3dppx) { +@media screen and ((min-resolution: 1.5dppx) and (max-resolution: 3dppx)) { a { color: red; } } -@media screen and (.5dppx <= resolution <= 2.5dppx) { +@media screen and ((min-resolution: .5dppx) and (max-resolution: 2.5dppx)) { a { color: red; } } -@media screen and (resolution) and (10dpi <= resolution <= 118dpcm) { +@media screen and (resolution) and ((min-resolution: 10dpi) and (max-resolution: 118dpcm)) { a { color: red; } @@ -115,7 +115,7 @@ display: block; } } -@media screen and (500px <= width <= 1200px) and (height) { +@media screen and ((min-width: 500px) and (max-width: 1200px)) and (height) { .bar { display: block; } @@ -130,27 +130,67 @@ display: block; } } -@media screen and (color-index) {} -@media screen and (min-color-index: 0) and (max-color-index: 1000) {} -@media screen and (min-monochrome: 0) and (max-monochrome: 1000) {} -@media screen and (min-resolution: 96dpi) and (max-resolution: 3dppx) {} -@media screen and (min-width: -200px) and (max-width: 900.56px) {} -@media screen and (min-width: -0.58px) and (max-width: .99px) {} -@media screen and (resolution) {} -@media screen and (min-resolution: 1000dpi) and (max-resolution: 3dppx) {} -@media screen and (1000000dpi <= resolution <= 1000000dpcm) {} -@media screen and (1/1000 <= resolution <= 16/9) {} +@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 (0 <= monochrome <= 1000) { +@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 (monochrome) and (1 <= monochrome <= 300) { +@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; } @@ -160,32 +200,32 @@ color: red; } } -@media screen and (500px < width < 1200px) { +@media screen and ((min-width: 500.001px) and (max-width: 1199.999px)) { a { color: red; } } -@media screen and (40em < width < 60em) { +@media screen and ((min-width: 40.001em) and (max-width: 59.999em)) { a { color: red; } } -@media screen and (13.8rem < width <= 51.2rem) { +@media screen and ((min-width: 13.801rem) and (max-width: 51.199000000000005rem)) { a { color: red; } } -@media screen and (6in < width < 9in) { +@media screen and ((min-width: 6.001in) and (max-width: 8.999in)) { a { color: red; } } -@media screen and (0 < width < 500.58px) { +@media screen and ((min-width: 1) and (max-width: 500.579px)) { a { color: red; } } -@media screen and (width) and (.08px < width < 0.68px) { +@media screen and (width) and ((min-width: 0.081px) and (max-width: 0.679px)) { a { color: red; } @@ -195,32 +235,32 @@ color: red; } } -@media screen and (500px < height < 1200px) { +@media screen and ((min-height: 500.001px) and (max-height: 1199.999px)) { a { color: red; } } -@media screen and (40em < height < 60em) { +@media screen and ((min-height: 40.001em) and (max-height: 59.999em)) { a { color: red; } } -@media screen and (13.8rem <= height < 51.2rem) { +@media screen and ((min-height: 13.8rem) and (max-height: 51.2rem)) { a { color: red; } } -@media screen and (6in < height < 9in) { +@media screen and ((min-height: 6.001in) and (max-height: 8.999in)) { a { color: red; } } -@media screen and (0 < height < 500.58px) { +@media screen and ((min-height: 1) and (max-height: 500.579px)) { a { color: red; } } -@media screen and (height) and (.08px < height < 0.68px) { +@media screen and (height) and ((min-height: 0.081px) and (max-height: 0.679px)) { a { color: red; } @@ -230,17 +270,17 @@ color: red; } } -@media screen and (500px <= device-width <= 1200px) { +@media screen and ((min-device-width: 500px) and (max-device-width: 1200px)) { a { color: red; } } -@media screen and (0 <= device-width <= 500.58px) { +@media screen and ((min-device-width: 0) and (max-device-width: 500.58px)) { a { color: red; } } -@media screen and (device-width) and (.08px <= device-width <= 0.68px) { +@media screen and (device-width) and ((min-device-width: .08px) and (max-device-width: 0.68px)) { a { color: red; } @@ -250,17 +290,17 @@ color: red; } } -@media screen and (500px <= device-height <= 1200px) { +@media screen and ((min-device-height: 500px) and (max-device-height: 1200px)) { a { color: red; } } -@media screen and (0 <= device-height <= 500.58px) { +@media screen and ((min-device-height: 0) and (max-device-height: 500.58px)) { a { color: red; } } -@media screen and (device-height) and (.08px <= device-height <= 0.68px) { +@media screen and (device-height) and ((min-device-height: .08px) and (max-device-height: 0.68px)) { a { color: red; } @@ -270,17 +310,17 @@ color: red; } } -@media screen and (1/1000 <= device-aspect-ratio <= 16/9) { +@media screen and ((min-device-aspect-ratio: 1/1000) and (max-device-aspect-ratio: 16/9)) { a { color: red; } } -@media screen and (0/0 <= device-aspect-ratio <= 16/9) { +@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 (1/1000 <= device-aspect-ratio <= 16/9) { +@media screen and (device-aspect-ratio) and ((min-device-aspect-ratio: 1/1000) and (max-device-aspect-ratio: 16/9)) { a { color: red; } @@ -290,12 +330,12 @@ color: red; } } -@media screen and (0 <= color <= 8) { +@media screen and ((min-color: 0) and (max-color: 8)) { a { color: red; } } -@media screen and (color) and (6 <= color <= 256) { +@media screen and (color) and ((min-color: 6) and (max-color: 256)) { a { color: red; } @@ -305,12 +345,12 @@ color: red; } } -@media screen and (0 <= color-index <= 8) { +@media screen and ((min-color-index: 0) and (max-color-index: 8)) { a { color: red; } } -@media screen and (color-index) and (6 <= color-index <= 256) { +@media screen and (color-index) and ((min-color-index: 6) and (max-color-index: 256)) { a { color: red; } @@ -320,17 +360,17 @@ color: red; } } -@media screen and (1/1000 <= aspect-ratio <= 16/9) { +@media screen and ((min-aspect-ratio: 1/1000) and (max-aspect-ratio: 16/9)) { a { color: red; } } -@media screen and (0/0 <= aspect-ratio <= 16/9) { +@media screen and ((min-aspect-ratio: 0/0) and (max-aspect-ratio: 16/9)) { a { color: red; } } -@media screen and (aspect-ratio) and (1/1000 <= aspect-ratio <= 16/9) { +@media screen and (aspect-ratio) and ((min-aspect-ratio: 1/1000) and (max-aspect-ratio: 16/9)) { a { color: red; } @@ -340,17 +380,17 @@ color: red; } } -@media screen and (500px <= width <= 1200px) { +@media screen and ((min-width: 500px) and (max-width: 1200px)) { a { color: red; } } -@media screen and (0 <= width <= 500.58px) { +@media screen and ((min-width: 0) and (max-width: 500.58px)) { a { color: red; } } -@media screen and (width) and (.08px <= width <= 0.68px) { +@media screen and (width) and ((min-width: .08px) and (max-width: 0.68px)) { a { color: red; } @@ -360,17 +400,17 @@ color: red; } } -@media screen and (500px <= height <= 1200px) { +@media screen and ((min-height: 500px) and (max-height: 1200px)) { a { color: red; } } -@media screen and (0 <= height <= 500.58px) { +@media screen and ((min-height: 0) and (max-height: 500.58px)) { a { color: red; } } -@media screen and (height) and (.08px <= height <= 0.68px) { +@media screen and (height) and ((min-height: .08px) and (max-height: 0.68px)) { a { color: red; } @@ -400,3 +440,63 @@ color: red; } } +@media ((max-width: 767.999px) and (min-width: 768.001px)) { + a { + color: red; + } +} +@media ((max-width: 1024px) and (min-width: 768px)) { + a { + color: red; + } +} +@media ((min-width: 1024.001px) and (max-width: 767.999px)) { + a { + color: red; + } +} +@media ((min-width: 1024px) and (max-width: 768px)) { + a { + color: red; + } +} +@media ((max-width: 399.999px) and (min-width: 400.001px)) { + a { + color: red; + } +} +@media ((max-width: 399.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; + } +} From c6885a1dc085860658e832c1a1a5738bc05ec6b5 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 05:10:02 +0300 Subject: [PATCH 06/14] refactor: code --- .../src/compiler/media_query_ranges.rs | 150 ++++++++---------- 1 file changed, 66 insertions(+), 84 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/media_query_ranges.rs b/crates/swc_css_compat/src/compiler/media_query_ranges.rs index 58d091aba872..4d4bb503e985 100644 --- a/crates/swc_css_compat/src/compiler/media_query_ranges.rs +++ b/crates/swc_css_compat/src/compiler/media_query_ranges.rs @@ -29,28 +29,23 @@ impl Compiler { Some(MediaFeatureName::Ident(name.clone())) } _ => self.get_left_media_feature_name(name), - }; - - if let Some(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), - }; - - if let Some(value) = value { - return Some(( - MediaFeature::Plain(MediaFeaturePlain { - span: *span, - name, - value: Box::new(value), - }), - None, - )); - } - } + }?; + + 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 => { @@ -60,28 +55,23 @@ impl Compiler { Some(MediaFeatureName::Ident(name.clone())) } _ => self.get_right_media_feature_name(name), - }; - - if let Some(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), - }; - - if let Some(value) = value { - return Some(( - MediaFeature::Plain(MediaFeaturePlain { - span: *span, - name, - value: Box::new(value), - }), - None, - )); - } - } + }?; + + 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 { @@ -93,53 +83,45 @@ impl Compiler { right_comparison, .. }) => { - let first_name = match left_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), - }; + }?; - if let Some(first_name) = first_name { - let value = match left_comparison { - MediaFeatureRangeComparison::Lt => self.get_gt_value(left.clone()), - MediaFeatureRangeComparison::Gt => self.get_lt_value(right.clone()), - _ => Some(left.clone()), - }; + let value = match left_comparison { + MediaFeatureRangeComparison::Lt => self.get_gt_value(left.clone()), + MediaFeatureRangeComparison::Gt => self.get_lt_value(right.clone()), + _ => Some(left.clone()), + }?; - if let Some(value) = value { - let left = MediaFeature::Plain(MediaFeaturePlain { - span: *span, - name: first_name, - value: Box::new(value), - }); - - let second_name = match right_comparison { - MediaFeatureRangeComparison::Gt | MediaFeatureRangeComparison::Ge => { - self.get_left_media_feature_name(name) - } - _ => self.get_right_media_feature_name(name), - }; - - if let Some(second_name) = second_name { - let value = match left_comparison { - MediaFeatureRangeComparison::Lt => self.get_lt_value(right.clone()), - MediaFeatureRangeComparison::Gt => self.get_gt_value(right.clone()), - _ => Some(right.clone()), - }; - - if let Some(value) = value { - let right = MediaFeature::Plain(MediaFeaturePlain { - span: *span, - name: second_name, - value: Box::new(value), - }); - - return Some((left, Some(right))); - } - } + let left = MediaFeature::Plain(MediaFeaturePlain { + span: *span, + name: left_name, + value: Box::new(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 value = match left_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(value), + }); + + return Some((left, Some(right))); } _ => {} } From bb02d2a0578c1adc3ec915c1395583b0e68fde64 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 05:12:42 +0300 Subject: [PATCH 07/14] refactor: sort --- crates/swc_atoms/words.txt | 55 +++++++++++++++----------------------- 1 file changed, 22 insertions(+), 33 deletions(-) diff --git a/crates/swc_atoms/words.txt b/crates/swc_atoms/words.txt index 52c63c5f42fc..3f6e34d91483 100644 --- a/crates/swc_atoms/words.txt +++ b/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 @@ -1843,36 +1865,3 @@ z-index zoom zoomAndPan zoomandpan -width -min-width -max-width -height -min-height -max-height -device-width -min-device-width -max-device-width -device-height -min-device-height -max-device-height -aspect-ratio -min-aspect-ratio -max-aspect-ratio -device-aspect-ratio -min-device-aspect-ratio -max-device-aspect-ratio -aspect-ratio -min-aspect-ratio -max-aspect-ratio -color -min-color -max-color -color-index -min-color-index -max-color-index -monochrome -min-monochrome -max-monochrome -resolution -min-resolution -max-resolution \ No newline at end of file From 582d15540b69b3f1dc1b0f72b21a27586c5228c4 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 05:19:34 +0300 Subject: [PATCH 08/14] fix: bug --- .../src/compiler/media_query_ranges.rs | 10 ++-- .../tests/media_query_ranges/input.css | 16 +++++++ .../tests/media_query_ranges/input.expect.css | 46 +++++++++++++------ 3 files changed, 54 insertions(+), 18 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/media_query_ranges.rs b/crates/swc_css_compat/src/compiler/media_query_ranges.rs index 4d4bb503e985..0044b7f8f1e4 100644 --- a/crates/swc_css_compat/src/compiler/media_query_ranges.rs +++ b/crates/swc_css_compat/src/compiler/media_query_ranges.rs @@ -90,16 +90,16 @@ impl Compiler { _ => self.get_left_media_feature_name(name), }?; - let value = match left_comparison { + let left_value = match left_comparison { MediaFeatureRangeComparison::Lt => self.get_gt_value(left.clone()), - MediaFeatureRangeComparison::Gt => self.get_lt_value(right.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(value), + value: Box::new(left_value), }); let right_name = match right_comparison { @@ -109,7 +109,7 @@ impl Compiler { _ => self.get_right_media_feature_name(name), }?; - let value = match left_comparison { + 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()), @@ -118,7 +118,7 @@ impl Compiler { let right = MediaFeature::Plain(MediaFeaturePlain { span: *span, name: right_name, - value: Box::new(value), + value: Box::new(right_value), }); return Some((left, Some(right))); diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css index ffd4e75746bd..0396ca60b6c9 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -420,3 +420,19 @@ @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 } +} diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css index caff985d987f..d83b1cbaef90 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css @@ -1,4 +1,4 @@ -@import "foo1.css" screen and ((max-width: 199.999px) and (min-width: 200.001px)); +@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 { @@ -50,22 +50,22 @@ color: blue; } } -@media ((max-width: 767.999px) and (min-width: 768.001px)) { +@media ((max-width: 1023.999px) and (min-width: 768px)) { a { color: red; } } -@media ((min-width: 768px) and (max-width: 1024px)) { +@media ((min-width: 768px) and (max-width: 1023.999px)) { a { color: red; } } -@media ((max-width: 1024px) and (min-width: 768px)) { +@media ((max-width: 1024px) and (min-width: 768.001px)) { a { color: red; } } -@media ((min-width: 768.001px) and (max-width: 1023.999px)) { +@media ((min-width: 768.001px) and (max-width: 1024px)) { a { color: red; } @@ -80,7 +80,7 @@ color: red; } } -@media ((max-width: 767.999px) and (min-width: 768.001px)) { +@media ((max-width: 1023.999px) and (min-width: 768.001px)) { a { color: red; } @@ -210,7 +210,7 @@ color: red; } } -@media screen and ((min-width: 13.801rem) and (max-width: 51.199000000000005rem)) { +@media screen and ((min-width: 13.801rem) and (max-width: 51.2rem)) { a { color: red; } @@ -245,7 +245,7 @@ color: red; } } -@media screen and ((min-height: 13.8rem) and (max-height: 51.2rem)) { +@media screen and ((min-height: 13.8rem) and (max-height: 51.199000000000005rem)) { a { color: red; } @@ -440,7 +440,7 @@ color: red; } } -@media ((max-width: 767.999px) and (min-width: 768.001px)) { +@media ((max-width: 1023.999px) and (min-width: 768px)) { a { color: red; } @@ -450,22 +450,22 @@ color: red; } } -@media ((min-width: 1024.001px) and (max-width: 767.999px)) { +@media ((min-width: 1024.001px) and (max-width: 768px)) { a { color: red; } } -@media ((min-width: 1024px) and (max-width: 768px)) { +@media ((min-width: 1024px) and (max-width: 767.999px)) { a { color: red; } } -@media ((max-width: 399.999px) and (min-width: 400.001px)) { +@media ((max-width: 99.999px) and (min-width: 400.001px)) { a { color: red; } } -@media ((max-width: 399.999px) and (min-width: 400.001px)) { +@media ((max-width: 99.999px) and (min-width: 400.001px)) { a { color: red; } @@ -500,3 +500,23 @@ 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; + } +} From 0df765f48e2f9bf6729995f62d7e9ba5fac30682 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 05:22:01 +0300 Subject: [PATCH 09/14] fix: bug --- .../tests/media_query_ranges/input.css | 16 +++++++++++++++ .../tests/media_query_ranges/input.expect.css | 20 +++++++++++++++++++ 2 files changed, 36 insertions(+) diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css index 0396ca60b6c9..33261b2dd436 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -436,3 +436,19 @@ @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 } +} diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css index d83b1cbaef90..fd2798765a1b 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css @@ -520,3 +520,23 @@ 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; + } +} From 42874ba8ac67b62408d80456cc11dec97eb9e1ef Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 05:26:31 +0300 Subject: [PATCH 10/14] test: more --- .../tests/media_query_ranges/input.css | 12 ++++++++++++ .../tests/media_query_ranges/input.expect.css | 15 +++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media_query_ranges/input.css index 33261b2dd436..f286da39024d 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.css @@ -452,3 +452,15 @@ @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 } +} diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css index fd2798765a1b..f42502b0c6e7 100644 --- a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css +++ b/crates/swc_css_compat/tests/media_query_ranges/input.expect.css @@ -540,3 +540,18 @@ 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; + } +} From ef922c2b60cd23c58e9d0b77c79311a7b6edaeda Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Tue, 13 Dec 2022 05:29:34 +0300 Subject: [PATCH 11/14] fix: bits --- crates/swc_css_compat/src/feature.rs | 2 +- crates/swc_css_compat/tests/fixture.rs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index 339a48a47393..784f2d957ee3 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/crates/swc_css_compat/src/feature.rs @@ -4,6 +4,6 @@ bitflags! { pub struct Features: u64 { const NESTING = 1 << 0; const CUSTOM_MEDIA = 1 << 1; - const MEDIA_QUERY_RANGES = 1 << 1; + const MEDIA_QUERY_RANGES = 1 << 2; } } diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index a2413131d64a..ed39e4fe6ae7 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -84,7 +84,7 @@ fn test_nesting_without_env(input: PathBuf) { #[testing::fixture("tests/custom-media-query/**/*.css", exclude("expect.css"))] #[testing::fixture("tests/media_query_ranges/**/*.css", exclude("expect.css"))] -fn test_custom_media_query(input: PathBuf) { +fn test_media_query_ranges(input: PathBuf) { let output = input.with_extension("expect.css"); testing::run_test(false, |cm, _| { @@ -93,7 +93,7 @@ fn test_custom_media_query(input: PathBuf) { let mut ss = parse_stylesheet(&fm); ss.visit_mut_with(&mut Compiler::new(Config { - process: Features::CUSTOM_MEDIA, + process: Features::MEDIA_QUERY_RANGES, })); let s = print_stylesheet(&ss); From 87eee6c271061c301b057dfd41c9d8769384db9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= Date: Tue, 13 Dec 2022 14:52:44 +0900 Subject: [PATCH 12/14] Rebase --- crates/swc_css_compat/src/compiler/mod.rs | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index 0cfd0eefa948..d962df16cfa4 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -1,7 +1,8 @@ -use swc_css_ast::{AtRule, MediaCondition, MediaConditionWithoutOr, MediaQuery, Rule}; -use swc_css_ast::MediaFeature; use swc_common::{Spanned, DUMMY_SP}; -use swc_css_ast::{MediaAnd, MediaCondition, MediaConditionAllType, MediaInParens}; +use swc_css_ast::{ + AtRule, MediaAnd, MediaCondition, MediaConditionAllType, MediaConditionWithoutOr, + MediaInParens, MediaQuery, Rule, +}; use swc_css_visit::{VisitMut, VisitMutWith}; use self::custom_media::CustomMediaHandler; @@ -71,7 +72,9 @@ impl VisitMut for Compiler { if self.c.process.contains(Features::CUSTOM_MEDIA) { self.custom_media.process_rules(n); - fn visit_mut_media_feature(&mut self, n: &mut MediaFeature) { + } + } + fn visit_mut_media_in_parens(&mut self, n: &mut MediaInParens) { n.visit_mut_children_with(self); From 6a4c6d2508a4778169705864318207dacdbc45a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= Date: Tue, 13 Dec 2022 14:55:40 +0900 Subject: [PATCH 13/14] Rename --- .../tests/{media_query_ranges => media-query-ranges}/input.css | 0 .../{media_query_ranges => media-query-ranges}/input.expect.css | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename crates/swc_css_compat/tests/{media_query_ranges => media-query-ranges}/input.css (100%) rename crates/swc_css_compat/tests/{media_query_ranges => media-query-ranges}/input.expect.css (100%) diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.css b/crates/swc_css_compat/tests/media-query-ranges/input.css similarity index 100% rename from crates/swc_css_compat/tests/media_query_ranges/input.css rename to crates/swc_css_compat/tests/media-query-ranges/input.css diff --git a/crates/swc_css_compat/tests/media_query_ranges/input.expect.css b/crates/swc_css_compat/tests/media-query-ranges/input.expect.css similarity index 100% rename from crates/swc_css_compat/tests/media_query_ranges/input.expect.css rename to crates/swc_css_compat/tests/media-query-ranges/input.expect.css From 9eb655beaab4353da852f830b2036d5489f96fa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Donny/=EA=B0=95=EB=8F=99=EC=9C=A4?= Date: Tue, 13 Dec 2022 14:55:43 +0900 Subject: [PATCH 14/14] fixture --- crates/swc_css_compat/tests/fixture.rs | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index ed39e4fe6ae7..7e5c04697d9a 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -83,7 +83,28 @@ fn test_nesting_without_env(input: PathBuf) { } #[testing::fixture("tests/custom-media-query/**/*.css", exclude("expect.css"))] -#[testing::fixture("tests/media_query_ranges/**/*.css", exclude("expect.css"))] +fn test_custom_media_query(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::CUSTOM_MEDIA, + })); + + let s = print_stylesheet(&ss); + + NormalizedOutput::from(s).compare_to_file(&output).unwrap(); + + Ok(()) + }) + .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");