From 435dd32d484a4fd95cc4a09002c03445d016e25f Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 19:49:18 +0300 Subject: [PATCH 01/11] feat(css/compat): space separated syntax --- ...color_space_separated_function_notation.rs | 72 ++++++++++++++ crates/swc_css_compat/src/compiler/mod.rs | 19 +++- crates/swc_css_compat/src/feature.rs | 1 + .../input.css | 97 +++++++++++++++++++ .../input.expect.css | 83 ++++++++++++++++ crates/swc_css_compat/tests/fixture.rs | 25 +++++ 6 files changed, 296 insertions(+), 1 deletion(-) create mode 100644 crates/swc_css_compat/src/compiler/color_space_separated_function_notation.rs create mode 100644 crates/swc_css_compat/tests/color-space-separated-function-notation/input.css create mode 100644 crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css diff --git a/crates/swc_css_compat/src/compiler/color_space_separated_function_notation.rs b/crates/swc_css_compat/src/compiler/color_space_separated_function_notation.rs new file mode 100644 index 000000000000..2398050edf8a --- /dev/null +++ b/crates/swc_css_compat/src/compiler/color_space_separated_function_notation.rs @@ -0,0 +1,72 @@ +use std::mem::take; + +use swc_atoms::js_word; +use swc_common::DUMMY_SP; +use swc_css_ast::{AbsoluteColorBase, ComponentValue, Delimiter, DelimiterValue}; + +use crate::compiler::Compiler; + +impl Compiler { + pub(crate) fn process_color_space_separated_function_notation( + &mut self, + n: &mut AbsoluteColorBase, + ) { + if let AbsoluteColorBase::Function(function) = n { + let name = function.name.value.to_ascii_lowercase(); + + if !matches!( + name, + js_word!("rgb") | js_word!("rgba") | js_word!("hsl") | js_word!("hsla") + ) { + return; + } + + if function.value.len() != 3 && function.value.len() != 5 { + return; + } + + if function.value.iter().any(|n| { + matches!( + n, + ComponentValue::Delimiter(box Delimiter { + value: DelimiterValue::Comma, + .. + }) + ) + }) { + return; + } + + let new_value: Vec = take(&mut function.value) + .into_iter() + .enumerate() + .flat_map(|(idx, node)| { + if matches!(idx, 0 | 1) { + vec![ + node, + ComponentValue::Delimiter(Box::new(Delimiter { + value: DelimiterValue::Comma, + span: DUMMY_SP, + })), + ] + } else if matches!( + node, + ComponentValue::Delimiter(box Delimiter { + value: DelimiterValue::Solidus, + .. + }) + ) { + vec![ComponentValue::Delimiter(Box::new(Delimiter { + value: DelimiterValue::Comma, + span: DUMMY_SP, + }))] + } else { + vec![node] + } + }) + .collect::>(); + + function.value = new_value; + } + } +} diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index f1b1e352ebfd..e522188d64b0 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -1,6 +1,6 @@ use swc_common::{Spanned, DUMMY_SP}; use swc_css_ast::{ - AtRule, ComponentValue, MediaAnd, MediaCondition, MediaConditionAllType, + AbsoluteColorBase, AtRule, ComponentValue, MediaAnd, MediaCondition, MediaConditionAllType, MediaConditionWithoutOr, MediaInParens, MediaQuery, Rule, SupportsCondition, }; use swc_css_visit::{VisitMut, VisitMutWith}; @@ -9,6 +9,7 @@ use self::custom_media::CustomMediaHandler; use crate::feature::Features; mod color_hex_alpha; +mod color_space_separated_function_notation; mod custom_media; mod media_query_ranges; @@ -130,4 +131,20 @@ impl VisitMut for Compiler { self.process_color_hex_alpha(n); } } + + fn visit_mut_absolute_color_base(&mut self, n: &mut AbsoluteColorBase) { + n.visit_mut_children_with(self); + + if self.in_supports_condition { + return; + } + + if self + .c + .process + .contains(Features::COLOR_SPACE_SEPARATED_FUNCTION_NOTATION) + { + self.process_color_space_separated_function_notation(n); + } + } } diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index b94df38e91dd..6db329dabc4a 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/crates/swc_css_compat/src/feature.rs @@ -6,5 +6,6 @@ bitflags! { const CUSTOM_MEDIA = 1 << 1; const MEDIA_QUERY_RANGES = 1 << 2; const COLOR_HEX_ALPHA = 1 << 3; + const COLOR_SPACE_SEPARATED_FUNCTION_NOTATION = 1 << 4; } } diff --git a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css new file mode 100644 index 000000000000..4f87ec83efdc --- /dev/null +++ b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css @@ -0,0 +1,97 @@ +.test-rgb { + color: rgb(178 34 34); + color: rgb(178 34 34 / 1); + color: rGB(178 34 34 / .5); + color: rgb(178 34 34 / 100%); + color: rgb(178 34 34 / 50%); + color: rgb(178 34 34 / var(--alpha-50)); + color: rgb(178 34 34 / calc(1 / 2)); +} + +.test-rgba { + color: rgba(178 34 34); + color: rgbA(178 34 34 / 1); + color: rgba(178 34 34 / .5); + color: rgba(178 34 34 / VaR(--alpha-50)); + color: rgba(178 34 34 / CaLC(1 / 2)); +} + +.test-rgb-percentages { + color: rgba(70% 13.5% 13.5%); + color: rgba(70% 13.5% 13.5% / 100%); + color: rgba(70% 13.5% 13.5% / 50%); +} + +.test-hsl { + color: hsl(0 0% 100%); + color: hsl(120deg 100% 50%); + color: hsl(120 100% 50%); + color: HSL(120 100% 50% / 1); + color: hsl(120 100% 50% / .5); + color: hsl(120 100% 50% / 100%); + color: hsl(120 100% 50% / 50%); + color: hslA(120deg 100% 50%); + + color: hsl(0.5turn 100% 50%); + color: hsl(200grad 100% 50%); + color: hsl(3.14159rad 100% 50%); + color: hsl(3.14159rad 100% 50% / var(--alpha-50)); + color: hsl(3.14159rad 100% 50% / calc(1 / 2)); +} + +.test-hsla { + color: hsla(120 100% 50%); + color: hsla(120 100% 50% / 1); + color: hsla(120 100% 50% / .5); + color: hsla(120 100% 50% / 100%); + color: hsla(120 100% 50% / 50%); + color: hsla(120 100% 50% / var(--alpha-50)); + color: hsla(120 100% 50% / calc(1 / 2)); +} + +.test-hwb { + color: hwb(0deg 0% 0%); + color: hwb(0 0% 0%); + color: hwb(0 0% 0% / 1); + color: hwb(0 0% 0% / .5); + color: hwb(0 0% 0% / 100%); + color: hwb(0 0% 0% / 50%); +} + +.test-unparseable-color-function { + color: rgb(; ); +} + +.rgb-with-alpha { + color: rgb(70% 13.5% 13.5% / 50%); + color: rgb(0, 0, 0, 0); +} + +.hsl-with-alpha { + color: hsl(120 100% 50% / 50%); + color: hsl(120, 100%, 50%, 0); +} + +.test-legacy-notation-with-modern-components--rgb { + color: rgb(50%, 34, 34); + color: rgb(178, 10%, 34); + color: rgb(178, 34, 10%); +} + +.test-legacy-notation-with-modern-components--rgba { + color: rgba(50%, 34, 34, 1); + color: rgba(178, 10%, 34, 1); + color: rgba(178, 34, 10%, 1); + color: rgba(178, 34, 34, 100%); +} + +.test-legacy-notation-with-modern-components--hsla { + color: hsla(120, 100%, 50%, 100%); +} + +.test-ignore { + /* this plugin shouldn't format */ + color: rgba(0,0,0,0.1); /* spaceless */ + color: rgba(0, 0, 0, 0.2); /* with spaces */ + color: rGB(178, 34, 34); /* legacy format, but with capitals */ +} diff --git a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css new file mode 100644 index 000000000000..57c6828b07ab --- /dev/null +++ b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css @@ -0,0 +1,83 @@ +.test-rgb { + color: rgb(178, 34, 34); + color: rgb(178, 34, 34, 1); + color: rGB(178, 34, 34, .5); + color: rgb(178, 34, 34, 100%); + color: rgb(178, 34, 34, 50%); + color: rgb(178, 34, 34, var(--alpha-50)); + color: rgb(178, 34, 34, calc(1 / 2)); +} +.test-rgba { + color: rgba(178, 34, 34); + color: rgbA(178, 34, 34, 1); + color: rgba(178, 34, 34, .5); + color: rgba(178, 34, 34, VaR(--alpha-50)); + color: rgba(178, 34, 34, CaLC(1 / 2)); +} +.test-rgb-percentages { + color: rgba(70%, 13.5%, 13.5%); + color: rgba(70%, 13.5%, 13.5%, 100%); + color: rgba(70%, 13.5%, 13.5%, 50%); +} +.test-hsl { + color: hsl(0, 0%, 100%); + color: hsl(120deg, 100%, 50%); + color: hsl(120, 100%, 50%); + color: HSL(120, 100%, 50%, 1); + color: hsl(120, 100%, 50%, .5); + color: hsl(120, 100%, 50%, 100%); + color: hsl(120, 100%, 50%, 50%); + color: hslA(120deg, 100%, 50%); + color: hsl(0.5turn, 100%, 50%); + color: hsl(200grad, 100%, 50%); + color: hsl(3.14159rad, 100%, 50%); + color: hsl(3.14159rad, 100%, 50%, var(--alpha-50)); + color: hsl(3.14159rad, 100%, 50%, calc(1 / 2)); +} +.test-hsla { + color: hsla(120, 100%, 50%); + color: hsla(120, 100%, 50%, 1); + color: hsla(120, 100%, 50%, .5); + color: hsla(120, 100%, 50%, 100%); + color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, var(--alpha-50)); + color: hsla(120, 100%, 50%, calc(1 / 2)); +} +.test-hwb { + color: hwb(0deg 0% 0%); + color: hwb(0 0% 0%); + color: hwb(0 0% 0% / 1); + color: hwb(0 0% 0% / .5); + color: hwb(0 0% 0% / 100%); + color: hwb(0 0% 0% / 50%); +} +.test-unparseable-color-function { + color: rgb(; ); +} +.rgb-with-alpha { + color: rgb(70%, 13.5%, 13.5%, 50%); + color: rgb(0, 0, 0, 0); +} +.hsl-with-alpha { + color: hsl(120, 100%, 50%, 50%); + color: hsl(120, 100%, 50%, 0); +} +.test-legacy-notation-with-modern-components--rgb { + color: rgb(50%, 34, 34); + color: rgb(178, 10%, 34); + color: rgb(178, 34, 10%); +} +.test-legacy-notation-with-modern-components--rgba { + color: rgba(50%, 34, 34, 1); + color: rgba(178, 10%, 34, 1); + color: rgba(178, 34, 10%, 1); + color: rgba(178, 34, 34, 100%); +} +.test-legacy-notation-with-modern-components--hsla { + color: hsla(120, 100%, 50%, 100%); +} +.test-ignore { + color: rgba(0, 0, 0, 0.1); + color: rgba(0, 0, 0, 0.2); + color: rGB(178, 34, 34); +} diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index 83b60c8e46a0..4e43a909e43e 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -147,3 +147,28 @@ fn test_color_hex_alpha(input: PathBuf) { }) .unwrap(); } + +#[testing::fixture( + "tests/color-space-separated-function-notation/**/*.css", + exclude("expect.css") +)] +fn test_color_space_separated_function_notation(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::COLOR_SPACE_SEPARATED_FUNCTION_NOTATION, + })); + + let s = print_stylesheet(&ss); + + NormalizedOutput::from(s).compare_to_file(&output).unwrap(); + + Ok(()) + }) + .unwrap(); +} From f67e01b19e511cc2bfb4a6eda6c621b9e66dc013 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 19:53:51 +0300 Subject: [PATCH 02/11] test: more --- .../input.css | 131 ++++++++++++++++++ .../input.expect.css | 95 +++++++++++++ 2 files changed, 226 insertions(+) diff --git a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css index 4f87ec83efdc..3a455403b37e 100644 --- a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css +++ b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css @@ -95,3 +95,134 @@ color: rgba(0, 0, 0, 0.2); /* with spaces */ color: rGB(178, 34, 34); /* legacy format, but with capitals */ } + +.order-0 { + order: rgba(178 34 34 / 1) !important; +} + +.order-1 { + order: var(1, rgba(178 34 34 / 1)); +} + +.order-2 { + order: var(rgba(178 34 34 / 1), 1); +} + +.order-3 { + order: var(rgba(178 34 34 / 1), rgba(178 34 34 / 1)); +} + +.order-4 { + order: prergba(178 34 34 / 1); +} + +.order-5 { + order: pre rgba(178 34 34 / 1); +} + +.order-6 { + order: pre,rgba(178 34 34 / 1); +} + +.order-7 { + order: rgba(178 34 34 / 1)post; +} + +.order-8 { + order: rgba(178 34 34 / 1) post; +} + +.order-9 { + order: rgba(178 34 34 / 1),post; +} + +/* rgba(178 34 34 / 1) */ + +:root { + --some-var: rgba(178 34 34 / 1); +} + +.content { + content: 'rgba(178 34 34 / 1)'; +} + +@supports (order: rgba(178 34 34 / 1)) { + .support { + order: rgba(178 34 34 / 1); + } +} + +.order-0 { + order: hsl(120 100% 50% / 1) !important; +} + +.order-1 { + order: var(1, hsl(120 100% 50% / 1)); +} + +.order-2 { + order: var(hsl(120 100% 50% / 1), 1); +} + +.order-3 { + order: var(hsl(120 100% 50% / 1), hsl(120 100% 50% / 1)); +} + +.order-4 { + order: prehsl(120 100% 50% / 1); +} + +.order-5 { + order: pre hsl(120 100% 50% / 1); +} + +.order-6 { + order: pre,hsl(120 100% 50% / 1); +} + +.order-7 { + order: hsl(120 100% 50% / 1)post; +} + +.order-8 { + order: hsl(120 100% 50% / 1) post; +} + +.order-9 { + order: hsl(120 100% 50% / 1),post; +} + +/* hsl(120 100% 50% / 1) */ + +:root { + --some-var: hsl(120 100% 50% / 1); +} + +.content { + content: 'hsl(120 100% 50% / 1)'; +} + +@supports (order: hsl(120 100% 50% / 1)) { + .support { + order: hsl(120 100% 50% / 1); + } +} + +:root { + --firebrick: rgb(40% 56.6 39); + --firebrick-a50: rgb(40% 68.8 34.5 / 50%); + + --opacity-50: 0.5; + --firebrick-a50-var: hsl(40 68.8% 34.5% / var(--opacity-50)); + --firebrick-rgb-a50-var: rgb(40% 68.8 34.5 / var(--opacity-50)); + + --fifty: 50%; + --firebrick-var: hsl(40 var(--fifty) 34.5% / var(--opacity-50)); +} + +:root { + /* Not expected to be handled here at the moment, but might be needed in the future */ + --rgba-functional-notation-percentage-alpha: rgba(0, 0, 0, 100%); + + --hsla-functional-notation-percentage-alpha: hsla(0, 0%, 0%, 100%); +} diff --git a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css index 57c6828b07ab..8b64ebe6fe0e 100644 --- a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css +++ b/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css @@ -81,3 +81,98 @@ color: rgba(0, 0, 0, 0.2); color: rGB(178, 34, 34); } +.order-0 { + order: rgba(178, 34, 34, 1) !important; +} +.order-1 { + order: var(1, rgba(178, 34, 34, 1)); +} +.order-2 { + order: var(rgba(178, 34, 34, 1), 1); +} +.order-3 { + order: var(rgba(178, 34, 34, 1), rgba(178, 34, 34, 1)); +} +.order-4 { + order: prergba(178 34 34/ 1); +} +.order-5 { + order: pre rgba(178, 34, 34, 1); +} +.order-6 { + order: pre, rgba(178, 34, 34, 1); +} +.order-7 { + order: rgba(178, 34, 34, 1) post; +} +.order-8 { + order: rgba(178, 34, 34, 1) post; +} +.order-9 { + order: rgba(178, 34, 34, 1), post; +} +:root { + --some-var: rgba(178 34 34 / 1); +} +.content { + content: 'rgba(178 34 34 / 1)'; +} +@supports (order: rgba(178 34 34/ 1)) { + .support { + order: rgba(178, 34, 34, 1); + } +} +.order-0 { + order: hsl(120, 100%, 50%, 1) !important; +} +.order-1 { + order: var(1, hsl(120, 100%, 50%, 1)); +} +.order-2 { + order: var(hsl(120, 100%, 50%, 1), 1); +} +.order-3 { + order: var(hsl(120, 100%, 50%, 1), hsl(120, 100%, 50%, 1)); +} +.order-4 { + order: prehsl(120 100% 50% / 1); +} +.order-5 { + order: pre hsl(120, 100%, 50%, 1); +} +.order-6 { + order: pre, hsl(120, 100%, 50%, 1); +} +.order-7 { + order: hsl(120, 100%, 50%, 1) post; +} +.order-8 { + order: hsl(120, 100%, 50%, 1) post; +} +.order-9 { + order: hsl(120, 100%, 50%, 1), post; +} +:root { + --some-var: hsl(120 100% 50% / 1); +} +.content { + content: 'hsl(120 100% 50% / 1)'; +} +@supports (order: hsl(120 100% 50% / 1)) { + .support { + order: hsl(120, 100%, 50%, 1); + } +} +:root { + --firebrick: rgb(40% 56.6 39); + --firebrick-a50: rgb(40% 68.8 34.5 / 50%); + --opacity-50: 0.5; + --firebrick-a50-var: hsl(40 68.8% 34.5% / var(--opacity-50)); + --firebrick-rgb-a50-var: rgb(40% 68.8 34.5 / var(--opacity-50)); + --fifty: 50%; + --firebrick-var: hsl(40 var(--fifty) 34.5% / var(--opacity-50)); +} +:root { + --rgba-functional-notation-percentage-alpha: rgba(0, 0, 0, 100%); + --hsla-functional-notation-percentage-alpha: hsla(0, 0%, 0%, 100%); +} From b50b5d9df7eb0b1e32848dd19ae184c20743b76a Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 20:21:41 +0300 Subject: [PATCH 03/11] feat(css/compat): alpha --- .../src/compiler/color_alpha_parameter.rs | 29 ++++++++++++ ...rs => color_space_separated_parameters.rs} | 0 crates/swc_css_compat/src/compiler/mod.rs | 9 +++- crates/swc_css_compat/src/feature.rs | 3 +- .../input.css | 0 .../input.expect.css | 44 +++++++++---------- crates/swc_css_compat/tests/fixture.rs | 7 +-- 7 files changed, 62 insertions(+), 30 deletions(-) create mode 100644 crates/swc_css_compat/src/compiler/color_alpha_parameter.rs rename crates/swc_css_compat/src/compiler/{color_space_separated_function_notation.rs => color_space_separated_parameters.rs} (100%) rename crates/swc_css_compat/tests/{color-space-separated-function-notation => color-legacy}/input.css (100%) rename crates/swc_css_compat/tests/{color-space-separated-function-notation => color-legacy}/input.expect.css (80%) diff --git a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs new file mode 100644 index 000000000000..5e86a04829ea --- /dev/null +++ b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs @@ -0,0 +1,29 @@ +use std::mem::take; + +use swc_atoms::js_word; +use swc_common::DUMMY_SP; +use swc_css_ast::{AbsoluteColorBase, ComponentValue, Delimiter, DelimiterValue}; + +use crate::compiler::Compiler; + +impl Compiler { + pub(crate) fn process_color_alpha_parameter(&mut self, n: &mut AbsoluteColorBase) { + if let AbsoluteColorBase::Function(function) = n { + let name = function.name.value.to_ascii_lowercase(); + + if let Some(ComponentValue::AlphaValue(_)) = function.value.last() { + match name { + js_word!("rgb") => { + function.name.value = js_word!("rgba"); + function.name.raw = None; + } + js_word!("hsl") => { + function.name.value = js_word!("hsla"); + function.name.raw = None; + } + _ => {} + } + } + } + } +} diff --git a/crates/swc_css_compat/src/compiler/color_space_separated_function_notation.rs b/crates/swc_css_compat/src/compiler/color_space_separated_parameters.rs similarity index 100% rename from crates/swc_css_compat/src/compiler/color_space_separated_function_notation.rs rename to crates/swc_css_compat/src/compiler/color_space_separated_parameters.rs diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index e522188d64b0..11360aa7b6fe 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -8,8 +8,9 @@ use swc_css_visit::{VisitMut, VisitMutWith}; use self::custom_media::CustomMediaHandler; use crate::feature::Features; +mod color_alpha_parameter; mod color_hex_alpha; -mod color_space_separated_function_notation; +mod color_space_separated_parameters; mod custom_media; mod media_query_ranges; @@ -142,9 +143,13 @@ impl VisitMut for Compiler { if self .c .process - .contains(Features::COLOR_SPACE_SEPARATED_FUNCTION_NOTATION) + .contains(Features::COLOR_SPACE_SEPARATED_PARAMETERS) { self.process_color_space_separated_function_notation(n); } + + if self.c.process.contains(Features::COLOR_ALPHA_PARAMETER) { + self.process_color_alpha_parameter(n); + } } } diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index 6db329dabc4a..af7edcb2b4e7 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/crates/swc_css_compat/src/feature.rs @@ -6,6 +6,7 @@ bitflags! { const CUSTOM_MEDIA = 1 << 1; const MEDIA_QUERY_RANGES = 1 << 2; const COLOR_HEX_ALPHA = 1 << 3; - const COLOR_SPACE_SEPARATED_FUNCTION_NOTATION = 1 << 4; + const COLOR_ALPHA_PARAMETER = 1 << 4; + const COLOR_SPACE_SEPARATED_PARAMETERS = 1 << 5; } } diff --git a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.css b/crates/swc_css_compat/tests/color-legacy/input.css similarity index 100% rename from crates/swc_css_compat/tests/color-space-separated-function-notation/input.css rename to crates/swc_css_compat/tests/color-legacy/input.css diff --git a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css similarity index 80% rename from crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css rename to crates/swc_css_compat/tests/color-legacy/input.expect.css index 8b64ebe6fe0e..91b2cc3a2b7d 100644 --- a/crates/swc_css_compat/tests/color-space-separated-function-notation/input.expect.css +++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css @@ -1,9 +1,9 @@ .test-rgb { color: rgb(178, 34, 34); - color: rgb(178, 34, 34, 1); - color: rGB(178, 34, 34, .5); - color: rgb(178, 34, 34, 100%); - color: rgb(178, 34, 34, 50%); + color: rgba(178, 34, 34, 1); + color: rgba(178, 34, 34, .5); + color: rgba(178, 34, 34, 100%); + color: rgba(178, 34, 34, 50%); color: rgb(178, 34, 34, var(--alpha-50)); color: rgb(178, 34, 34, calc(1 / 2)); } @@ -23,10 +23,10 @@ color: hsl(0, 0%, 100%); color: hsl(120deg, 100%, 50%); color: hsl(120, 100%, 50%); - color: HSL(120, 100%, 50%, 1); - color: hsl(120, 100%, 50%, .5); - color: hsl(120, 100%, 50%, 100%); - color: hsl(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 1); + color: hsla(120, 100%, 50%, .5); + color: hsla(120, 100%, 50%, 100%); + color: hsla(120, 100%, 50%, 50%); color: hslA(120deg, 100%, 50%); color: hsl(0.5turn, 100%, 50%); color: hsl(200grad, 100%, 50%); @@ -55,12 +55,12 @@ color: rgb(; ); } .rgb-with-alpha { - color: rgb(70%, 13.5%, 13.5%, 50%); - color: rgb(0, 0, 0, 0); + color: rgba(70%, 13.5%, 13.5%, 50%); + color: rgba(0, 0, 0, 0); } .hsl-with-alpha { - color: hsl(120, 100%, 50%, 50%); - color: hsl(120, 100%, 50%, 0); + color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 0); } .test-legacy-notation-with-modern-components--rgb { color: rgb(50%, 34, 34); @@ -123,34 +123,34 @@ } } .order-0 { - order: hsl(120, 100%, 50%, 1) !important; + order: hsla(120, 100%, 50%, 1) !important; } .order-1 { - order: var(1, hsl(120, 100%, 50%, 1)); + order: var(1, hsla(120, 100%, 50%, 1)); } .order-2 { - order: var(hsl(120, 100%, 50%, 1), 1); + order: var(hsla(120, 100%, 50%, 1), 1); } .order-3 { - order: var(hsl(120, 100%, 50%, 1), hsl(120, 100%, 50%, 1)); + order: var(hsla(120, 100%, 50%, 1), hsla(120, 100%, 50%, 1)); } .order-4 { order: prehsl(120 100% 50% / 1); } .order-5 { - order: pre hsl(120, 100%, 50%, 1); + order: pre hsla(120, 100%, 50%, 1); } .order-6 { - order: pre, hsl(120, 100%, 50%, 1); + order: pre, hsla(120, 100%, 50%, 1); } .order-7 { - order: hsl(120, 100%, 50%, 1) post; + order: hsla(120, 100%, 50%, 1) post; } .order-8 { - order: hsl(120, 100%, 50%, 1) post; + order: hsla(120, 100%, 50%, 1) post; } .order-9 { - order: hsl(120, 100%, 50%, 1), post; + order: hsla(120, 100%, 50%, 1), post; } :root { --some-var: hsl(120 100% 50% / 1); @@ -160,7 +160,7 @@ } @supports (order: hsl(120 100% 50% / 1)) { .support { - order: hsl(120, 100%, 50%, 1); + order: hsla(120, 100%, 50%, 1); } } :root { diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index 4e43a909e43e..f459452c5ce1 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -148,10 +148,7 @@ fn test_color_hex_alpha(input: PathBuf) { .unwrap(); } -#[testing::fixture( - "tests/color-space-separated-function-notation/**/*.css", - exclude("expect.css") -)] +#[testing::fixture("tests/color-legacy/**/*.css", exclude("expect.css"))] fn test_color_space_separated_function_notation(input: PathBuf) { let output = input.with_extension("expect.css"); @@ -161,7 +158,7 @@ fn test_color_space_separated_function_notation(input: PathBuf) { let mut ss = parse_stylesheet(&fm); ss.visit_mut_with(&mut Compiler::new(Config { - process: Features::COLOR_SPACE_SEPARATED_FUNCTION_NOTATION, + process: Features::COLOR_SPACE_SEPARATED_PARAMETERS | Features::COLOR_ALPHA_PARAMETER, })); let s = print_stylesheet(&ss); From 312dec27fccef3b6889cc9ab92f5d9c0f17cf6af Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 20:33:16 +0300 Subject: [PATCH 04/11] refactor: add todo --- .../swc_css_compat/src/compiler/color_alpha_parameter.rs | 9 +++------ crates/swc_css_compat/src/compiler/mod.rs | 3 +++ 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs index 5e86a04829ea..555ee42d1545 100644 --- a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs +++ b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs @@ -1,17 +1,14 @@ -use std::mem::take; - use swc_atoms::js_word; -use swc_common::DUMMY_SP; -use swc_css_ast::{AbsoluteColorBase, ComponentValue, Delimiter, DelimiterValue}; +use swc_css_ast::{AbsoluteColorBase, ComponentValue}; use crate::compiler::Compiler; impl Compiler { pub(crate) fn process_color_alpha_parameter(&mut self, n: &mut AbsoluteColorBase) { if let AbsoluteColorBase::Function(function) = n { - let name = function.name.value.to_ascii_lowercase(); - if let Some(ComponentValue::AlphaValue(_)) = function.value.last() { + let name = function.name.value.to_ascii_lowercase(); + match name { js_word!("rgb") => { function.name.value = js_word!("rgba"); diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index 11360aa7b6fe..e8ab555e00f1 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -140,6 +140,9 @@ impl VisitMut for Compiler { return; } + // TODO handle color functions in custom variables under the option + // TODO implement the `preserve` option to preserve the original color + if self .c .process From fddda5232ddebec6823f8a910688b1bb203189f8 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 21:06:28 +0300 Subject: [PATCH 05/11] feat(css/compat): float values --- .../src/compiler/color_alpha_parameter.rs | 54 +++++++++++++++++-- .../src/compiler/color_hex_alpha.rs | 26 ++------- crates/swc_css_compat/src/compiler/mod.rs | 15 +++--- crates/swc_css_compat/src/compiler/utils.rs | 15 ++++++ crates/swc_css_compat/src/feature.rs | 3 +- .../tests/color-legacy/input.expect.css | 24 ++++----- crates/swc_css_compat/tests/fixture.rs | 4 +- 7 files changed, 97 insertions(+), 44 deletions(-) create mode 100644 crates/swc_css_compat/src/compiler/utils.rs diff --git a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs index 555ee42d1545..254cda48613e 100644 --- a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs +++ b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs @@ -1,14 +1,21 @@ use swc_atoms::js_word; -use swc_css_ast::{AbsoluteColorBase, ComponentValue}; +use swc_css_ast::{AbsoluteColorBase, AlphaValue, ComponentValue, Number, Percentage}; -use crate::compiler::Compiler; +use crate::compiler::{utils::round_alpha, Compiler}; impl Compiler { pub(crate) fn process_color_alpha_parameter(&mut self, n: &mut AbsoluteColorBase) { if let AbsoluteColorBase::Function(function) = n { - if let Some(ComponentValue::AlphaValue(_)) = function.value.last() { + if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() { let name = function.name.value.to_ascii_lowercase(); + if !matches!( + name, + js_word!("rgb") | js_word!("rgba") | js_word!("hsl") | js_word!("hsla") + ) { + return; + } + match name { js_word!("rgb") => { function.name.value = js_word!("rgba"); @@ -20,6 +27,47 @@ impl Compiler { } _ => {} } + + if let AlphaValue::Percentage(Percentage { + span, + value: Number { value: a, .. }, + .. + }) = alpha_value + { + *alpha_value = AlphaValue::Number(Number { + span: *span, + value: round_alpha(*a / 100.0), + raw: None, + }); + } + } + } + } + + pub(crate) fn process_float_values_in_parameters(&mut self, n: &mut AbsoluteColorBase) { + if let AbsoluteColorBase::Function(function) = n { + if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() { + let name = function.name.value.to_ascii_lowercase(); + + if !matches!( + name, + js_word!("rgb") | js_word!("rgba") | js_word!("hsl") | js_word!("hsla") + ) { + return; + } + + if let AlphaValue::Percentage(Percentage { + span, + value: Number { value: a, .. }, + .. + }) = alpha_value + { + *alpha_value = AlphaValue::Number(Number { + span: *span, + value: round_alpha(*a / 100.0), + raw: None, + }); + } } } } diff --git a/crates/swc_css_compat/src/compiler/color_hex_alpha.rs b/crates/swc_css_compat/src/compiler/color_hex_alpha.rs index de85a51c88cd..f0c2fd12a0c4 100644 --- a/crates/swc_css_compat/src/compiler/color_hex_alpha.rs +++ b/crates/swc_css_compat/src/compiler/color_hex_alpha.rs @@ -5,7 +5,7 @@ use swc_css_ast::{ Ident, Number, }; -use crate::compiler::Compiler; +use crate::compiler::{utils::round_alpha, Compiler}; #[inline] fn from_hex(c: u8) -> u8 { @@ -19,11 +19,6 @@ fn from_hex(c: u8) -> u8 { } } -#[inline] -fn clamp_unit_f32(val: f64) -> u8 { - (val * 255.).round().max(0.).min(255.) as u8 -} - fn shorten_hex_color(value: &str) -> Option<&str> { let length = value.len(); let chars = value.as_bytes(); @@ -86,17 +81,6 @@ impl Compiler { let rgba = hex_to_rgba(&hex_color.value); - let r = rgba.0 as f64; - let g = rgba.1 as f64; - let b = rgba.2 as f64; - let a = rgba.3; - - let mut rounded_alpha = (a * 100.).round() / 100.; - - if clamp_unit_f32(rounded_alpha) != clamp_unit_f32(a) { - rounded_alpha = (a * 1000.).round() / 1000.; - } - *n = ComponentValue::Color(Box::new(Color::AbsoluteColorBase( AbsoluteColorBase::Function(Function { span: hex_color.span, @@ -108,7 +92,7 @@ impl Compiler { value: vec![ ComponentValue::Number(Box::new(Number { span: DUMMY_SP, - value: r, + value: rgba.0 as f64, raw: None, })), ComponentValue::Delimiter(Box::new(Delimiter { @@ -117,7 +101,7 @@ impl Compiler { })), ComponentValue::Number(Box::new(Number { span: DUMMY_SP, - value: g, + value: rgba.1 as f64, raw: None, })), ComponentValue::Delimiter(Box::new(Delimiter { @@ -126,7 +110,7 @@ impl Compiler { })), ComponentValue::Number(Box::new(Number { span: DUMMY_SP, - value: b, + value: rgba.2 as f64, raw: None, })), ComponentValue::Delimiter(Box::new(Delimiter { @@ -135,7 +119,7 @@ impl Compiler { })), ComponentValue::AlphaValue(Box::new(AlphaValue::Number(Number { span: DUMMY_SP, - value: rounded_alpha, + value: round_alpha(rgba.3), raw: None, }))), ], diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index e8ab555e00f1..d63480a2a101 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -13,6 +13,7 @@ mod color_hex_alpha; mod color_space_separated_parameters; mod custom_media; mod media_query_ranges; +mod utils; /// Compiles a modern CSS file to a CSS file which works with old browsers. #[derive(Debug)] @@ -143,16 +144,18 @@ impl VisitMut for Compiler { // TODO handle color functions in custom variables under the option // TODO implement the `preserve` option to preserve the original color - if self - .c - .process - .contains(Features::COLOR_SPACE_SEPARATED_PARAMETERS) - { + let process = self.c.process; + + if process.contains(Features::COLOR_SPACE_SEPARATED_PARAMETERS) { self.process_color_space_separated_function_notation(n); } - if self.c.process.contains(Features::COLOR_ALPHA_PARAMETER) { + if process.contains(Features::COLOR_ALPHA_PARAMETER) { self.process_color_alpha_parameter(n); } + + if process.contains(Features::COLOR_FLOAT_VALUES_IN_PARAMETERS) { + self.process_float_values_in_parameters(n); + } } } diff --git a/crates/swc_css_compat/src/compiler/utils.rs b/crates/swc_css_compat/src/compiler/utils.rs new file mode 100644 index 000000000000..355163f9bb5c --- /dev/null +++ b/crates/swc_css_compat/src/compiler/utils.rs @@ -0,0 +1,15 @@ +#[inline] +pub(crate) fn clamp_unit_f32(val: f64) -> u8 { + (val * 255.).round().max(0.).min(255.) as u8 +} + +#[inline] +pub(crate) fn round_alpha(alpha: f64) -> f64 { + let mut rounded_alpha = (alpha * 100.).round() / 100.; + + if clamp_unit_f32(rounded_alpha) != clamp_unit_f32(alpha) { + rounded_alpha = (alpha * 1000.).round() / 1000.; + } + + rounded_alpha +} diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index af7edcb2b4e7..eaeaf00ece4b 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/crates/swc_css_compat/src/feature.rs @@ -7,6 +7,7 @@ bitflags! { const MEDIA_QUERY_RANGES = 1 << 2; const COLOR_HEX_ALPHA = 1 << 3; const COLOR_ALPHA_PARAMETER = 1 << 4; - const COLOR_SPACE_SEPARATED_PARAMETERS = 1 << 5; + const COLOR_FLOAT_VALUES_IN_PARAMETERS = 1 << 5; + const COLOR_SPACE_SEPARATED_PARAMETERS = 1 << 6; } } diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css index 91b2cc3a2b7d..3bb3f81f0634 100644 --- a/crates/swc_css_compat/tests/color-legacy/input.expect.css +++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css @@ -2,8 +2,8 @@ color: rgb(178, 34, 34); color: rgba(178, 34, 34, 1); color: rgba(178, 34, 34, .5); - color: rgba(178, 34, 34, 100%); - color: rgba(178, 34, 34, 50%); + color: rgba(178, 34, 34, 1); + color: rgba(178, 34, 34, 0.5); color: rgb(178, 34, 34, var(--alpha-50)); color: rgb(178, 34, 34, calc(1 / 2)); } @@ -16,8 +16,8 @@ } .test-rgb-percentages { color: rgba(70%, 13.5%, 13.5%); - color: rgba(70%, 13.5%, 13.5%, 100%); - color: rgba(70%, 13.5%, 13.5%, 50%); + color: rgba(70%, 13.5%, 13.5%, 1); + color: rgba(70%, 13.5%, 13.5%, 0.5); } .test-hsl { color: hsl(0, 0%, 100%); @@ -25,8 +25,8 @@ color: hsl(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); - color: hsla(120, 100%, 50%, 100%); - color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 1); + color: hsla(120, 100%, 50%, 0.5); color: hslA(120deg, 100%, 50%); color: hsl(0.5turn, 100%, 50%); color: hsl(200grad, 100%, 50%); @@ -38,8 +38,8 @@ color: hsla(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); - color: hsla(120, 100%, 50%, 100%); - color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 1); + color: hsla(120, 100%, 50%, 0.5); color: hsla(120, 100%, 50%, var(--alpha-50)); color: hsla(120, 100%, 50%, calc(1 / 2)); } @@ -55,11 +55,11 @@ color: rgb(; ); } .rgb-with-alpha { - color: rgba(70%, 13.5%, 13.5%, 50%); + color: rgba(70%, 13.5%, 13.5%, 0.5); color: rgba(0, 0, 0, 0); } .hsl-with-alpha { - color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 0.5); color: hsla(120, 100%, 50%, 0); } .test-legacy-notation-with-modern-components--rgb { @@ -71,10 +71,10 @@ color: rgba(50%, 34, 34, 1); color: rgba(178, 10%, 34, 1); color: rgba(178, 34, 10%, 1); - color: rgba(178, 34, 34, 100%); + color: rgba(178, 34, 34, 1); } .test-legacy-notation-with-modern-components--hsla { - color: hsla(120, 100%, 50%, 100%); + color: hsla(120, 100%, 50%, 1); } .test-ignore { color: rgba(0, 0, 0, 0.1); diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index f459452c5ce1..5c83b8edd87e 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -158,7 +158,9 @@ fn test_color_space_separated_function_notation(input: PathBuf) { let mut ss = parse_stylesheet(&fm); ss.visit_mut_with(&mut Compiler::new(Config { - process: Features::COLOR_SPACE_SEPARATED_PARAMETERS | Features::COLOR_ALPHA_PARAMETER, + process: Features::COLOR_SPACE_SEPARATED_PARAMETERS + | Features::COLOR_FLOAT_VALUES_IN_PARAMETERS + | Features::COLOR_ALPHA_PARAMETER, })); let s = print_stylesheet(&ss); From 5bd5fa0f36227b7bce38f6adfca0f0e96952795c Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 21:16:20 +0300 Subject: [PATCH 06/11] fix: some bugs --- .../src/compiler/color_alpha_parameter.rs | 29 ++++++++++--------- .../tests/color-legacy/input.expect.css | 16 +++++----- 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs index 254cda48613e..1b0100da6739 100644 --- a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs +++ b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs @@ -6,9 +6,11 @@ use crate::compiler::{utils::round_alpha, Compiler}; impl Compiler { pub(crate) fn process_color_alpha_parameter(&mut self, n: &mut AbsoluteColorBase) { if let AbsoluteColorBase::Function(function) = n { - if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() { - let name = function.name.value.to_ascii_lowercase(); + let name = function.name.value.to_ascii_lowercase(); + if let Some(ComponentValue::AlphaValue(_) | ComponentValue::Function(_)) = + function.value.last() + { if !matches!( name, js_word!("rgb") | js_word!("rgba") | js_word!("hsl") | js_word!("hsla") @@ -27,18 +29,17 @@ impl Compiler { } _ => {} } - - if let AlphaValue::Percentage(Percentage { - span, - value: Number { value: a, .. }, - .. - }) = alpha_value - { - *alpha_value = AlphaValue::Number(Number { - span: *span, - value: round_alpha(*a / 100.0), - raw: None, - }); + } else { + match name { + js_word!("rgba") => { + function.name.value = js_word!("rgb"); + function.name.raw = None; + } + js_word!("hsla") => { + function.name.value = js_word!("hsl"); + function.name.raw = None; + } + _ => {} } } } diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css index 3bb3f81f0634..f6d5b29110fb 100644 --- a/crates/swc_css_compat/tests/color-legacy/input.expect.css +++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css @@ -4,18 +4,18 @@ color: rgba(178, 34, 34, .5); color: rgba(178, 34, 34, 1); color: rgba(178, 34, 34, 0.5); - color: rgb(178, 34, 34, var(--alpha-50)); - color: rgb(178, 34, 34, calc(1 / 2)); + color: rgba(178, 34, 34, var(--alpha-50)); + color: rgba(178, 34, 34, calc(1 / 2)); } .test-rgba { - color: rgba(178, 34, 34); + color: rgb(178, 34, 34); color: rgbA(178, 34, 34, 1); color: rgba(178, 34, 34, .5); color: rgba(178, 34, 34, VaR(--alpha-50)); color: rgba(178, 34, 34, CaLC(1 / 2)); } .test-rgb-percentages { - color: rgba(70%, 13.5%, 13.5%); + color: rgb(70%, 13.5%, 13.5%); color: rgba(70%, 13.5%, 13.5%, 1); color: rgba(70%, 13.5%, 13.5%, 0.5); } @@ -27,15 +27,15 @@ color: hsla(120, 100%, 50%, .5); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, 0.5); - color: hslA(120deg, 100%, 50%); + color: hsl(120deg, 100%, 50%); color: hsl(0.5turn, 100%, 50%); color: hsl(200grad, 100%, 50%); color: hsl(3.14159rad, 100%, 50%); - color: hsl(3.14159rad, 100%, 50%, var(--alpha-50)); - color: hsl(3.14159rad, 100%, 50%, calc(1 / 2)); + color: hsla(3.14159rad, 100%, 50%, var(--alpha-50)); + color: hsla(3.14159rad, 100%, 50%, calc(1 / 2)); } .test-hsla { - color: hsla(120, 100%, 50%); + color: hsl(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); color: hsla(120, 100%, 50%, 1); From a39a14ad5930b181e464fd9f6b5390b642005eec Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 21:46:58 +0300 Subject: [PATCH 07/11] feat(css/compat): handle rgb/rgba/hsl/hsla --- .../src/compiler/color_alpha_parameter.rs | 32 +----------- crates/swc_css_compat/src/compiler/mod.rs | 5 +- .../src/compiler/percentage_in_parameters.rs | 51 +++++++++++++++++++ crates/swc_css_compat/src/feature.rs | 2 +- .../tests/color-legacy/input.expect.css | 32 ++++++------ crates/swc_css_compat/tests/fixture.rs | 2 +- 6 files changed, 74 insertions(+), 50 deletions(-) create mode 100644 crates/swc_css_compat/src/compiler/percentage_in_parameters.rs diff --git a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs index 1b0100da6739..0bd68e11f1e3 100644 --- a/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs +++ b/crates/swc_css_compat/src/compiler/color_alpha_parameter.rs @@ -1,7 +1,7 @@ use swc_atoms::js_word; -use swc_css_ast::{AbsoluteColorBase, AlphaValue, ComponentValue, Number, Percentage}; +use swc_css_ast::{AbsoluteColorBase, ComponentValue}; -use crate::compiler::{utils::round_alpha, Compiler}; +use crate::compiler::Compiler; impl Compiler { pub(crate) fn process_color_alpha_parameter(&mut self, n: &mut AbsoluteColorBase) { @@ -44,32 +44,4 @@ impl Compiler { } } } - - pub(crate) fn process_float_values_in_parameters(&mut self, n: &mut AbsoluteColorBase) { - if let AbsoluteColorBase::Function(function) = n { - if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() { - let name = function.name.value.to_ascii_lowercase(); - - if !matches!( - name, - js_word!("rgb") | js_word!("rgba") | js_word!("hsl") | js_word!("hsla") - ) { - return; - } - - if let AlphaValue::Percentage(Percentage { - span, - value: Number { value: a, .. }, - .. - }) = alpha_value - { - *alpha_value = AlphaValue::Number(Number { - span: *span, - value: round_alpha(*a / 100.0), - raw: None, - }); - } - } - } - } } diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index d63480a2a101..a9aae2fd8da4 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -13,6 +13,7 @@ mod color_hex_alpha; mod color_space_separated_parameters; mod custom_media; mod media_query_ranges; +mod percentage_in_parameters; mod utils; /// Compiles a modern CSS file to a CSS file which works with old browsers. @@ -154,8 +155,8 @@ impl VisitMut for Compiler { self.process_color_alpha_parameter(n); } - if process.contains(Features::COLOR_FLOAT_VALUES_IN_PARAMETERS) { - self.process_float_values_in_parameters(n); + if process.contains(Features::COLOR_PERCENTAGE_IN_PARAMETERS) { + self.process_percentage_in_parameters(n); } } } diff --git a/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs b/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs new file mode 100644 index 000000000000..51656e7d50d9 --- /dev/null +++ b/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs @@ -0,0 +1,51 @@ +use swc_atoms::js_word; +use swc_css_ast::{AbsoluteColorBase, AlphaValue, ComponentValue, Number, Percentage}; + +use crate::compiler::{utils::round_alpha, Compiler}; + +impl Compiler { + pub(crate) fn process_percentage_in_parameters(&mut self, n: &mut AbsoluteColorBase) { + if let AbsoluteColorBase::Function(function) = n { + let name = function.name.value.to_ascii_lowercase(); + + if !matches!(name, js_word!("rgb") | js_word!("rgba")) { + return; + } + + // TODO handle angle for hsl/hsla + + function.value = function + .value + .drain(..) + .into_iter() + .map(|n| match n { + ComponentValue::Percentage(box Percentage { + span, + value: Number { value, .. }, + .. + }) => ComponentValue::Number(Box::new(Number { + span, + value: round_alpha(value), + raw: None, + })), + _ => n, + }) + .collect(); + + if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() { + if let AlphaValue::Percentage(Percentage { + span, + value: Number { value: a, .. }, + .. + }) = alpha_value + { + *alpha_value = AlphaValue::Number(Number { + span: *span, + value: round_alpha(*a / 100.0), + raw: None, + }); + } + } + } + } +} diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index eaeaf00ece4b..500791f154fc 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/crates/swc_css_compat/src/feature.rs @@ -7,7 +7,7 @@ bitflags! { const MEDIA_QUERY_RANGES = 1 << 2; const COLOR_HEX_ALPHA = 1 << 3; const COLOR_ALPHA_PARAMETER = 1 << 4; - const COLOR_FLOAT_VALUES_IN_PARAMETERS = 1 << 5; + const COLOR_PERCENTAGE_IN_PARAMETERS = 1 << 5; const COLOR_SPACE_SEPARATED_PARAMETERS = 1 << 6; } } diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css index f6d5b29110fb..da0efedd06d4 100644 --- a/crates/swc_css_compat/tests/color-legacy/input.expect.css +++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css @@ -15,9 +15,9 @@ color: rgba(178, 34, 34, CaLC(1 / 2)); } .test-rgb-percentages { - color: rgb(70%, 13.5%, 13.5%); - color: rgba(70%, 13.5%, 13.5%, 1); - color: rgba(70%, 13.5%, 13.5%, 0.5); + color: rgb(70, 13.5, 13.5); + color: rgba(70, 13.5, 13.5, 1); + color: rgba(70, 13.5, 13.5, 0.5); } .test-hsl { color: hsl(0, 0%, 100%); @@ -25,8 +25,8 @@ color: hsl(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); - color: hsla(120, 100%, 50%, 1); - color: hsla(120, 100%, 50%, 0.5); + color: hsla(120, 100%, 50%, 100%); + color: hsla(120, 100%, 50%, 50%); color: hsl(120deg, 100%, 50%); color: hsl(0.5turn, 100%, 50%); color: hsl(200grad, 100%, 50%); @@ -38,8 +38,8 @@ color: hsl(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); - color: hsla(120, 100%, 50%, 1); - color: hsla(120, 100%, 50%, 0.5); + color: hsla(120, 100%, 50%, 100%); + color: hsla(120, 100%, 50%, 50%); color: hsla(120, 100%, 50%, var(--alpha-50)); color: hsla(120, 100%, 50%, calc(1 / 2)); } @@ -55,26 +55,26 @@ color: rgb(; ); } .rgb-with-alpha { - color: rgba(70%, 13.5%, 13.5%, 0.5); + color: rgba(70, 13.5, 13.5, 0.5); color: rgba(0, 0, 0, 0); } .hsl-with-alpha { - color: hsla(120, 100%, 50%, 0.5); + color: hsla(120, 100%, 50%, 50%); color: hsla(120, 100%, 50%, 0); } .test-legacy-notation-with-modern-components--rgb { - color: rgb(50%, 34, 34); - color: rgb(178, 10%, 34); - color: rgb(178, 34, 10%); + color: rgb(50, 34, 34); + color: rgb(178, 10, 34); + color: rgb(178, 34, 10); } .test-legacy-notation-with-modern-components--rgba { - color: rgba(50%, 34, 34, 1); - color: rgba(178, 10%, 34, 1); - color: rgba(178, 34, 10%, 1); + color: rgba(50, 34, 34, 1); + color: rgba(178, 10, 34, 1); + color: rgba(178, 34, 10, 1); color: rgba(178, 34, 34, 1); } .test-legacy-notation-with-modern-components--hsla { - color: hsla(120, 100%, 50%, 1); + color: hsla(120, 100%, 50%, 100%); } .test-ignore { color: rgba(0, 0, 0, 0.1); diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index 5c83b8edd87e..5c1318bc1d5f 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -159,7 +159,7 @@ fn test_color_space_separated_function_notation(input: PathBuf) { ss.visit_mut_with(&mut Compiler::new(Config { process: Features::COLOR_SPACE_SEPARATED_PARAMETERS - | Features::COLOR_FLOAT_VALUES_IN_PARAMETERS + | Features::COLOR_PERCENTAGE_IN_PARAMETERS | Features::COLOR_ALPHA_PARAMETER, })); From 8fdaa6a66fc9ec46e6b264bab04a381d7fda8220 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 22:08:54 +0300 Subject: [PATCH 08/11] fix: percentage in rgb --- .../src/compiler/percentage_in_parameters.rs | 8 +++++--- .../tests/color-legacy/input.expect.css | 20 +++++++++---------- 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs b/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs index 51656e7d50d9..8b1a5cadf845 100644 --- a/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs +++ b/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs @@ -1,8 +1,10 @@ use swc_atoms::js_word; use swc_css_ast::{AbsoluteColorBase, AlphaValue, ComponentValue, Number, Percentage}; -use crate::compiler::{utils::round_alpha, Compiler}; - +use crate::compiler::{ + utils::{clamp_unit_f32, round_alpha}, + Compiler, +}; impl Compiler { pub(crate) fn process_percentage_in_parameters(&mut self, n: &mut AbsoluteColorBase) { if let AbsoluteColorBase::Function(function) = n { @@ -25,7 +27,7 @@ impl Compiler { .. }) => ComponentValue::Number(Box::new(Number { span, - value: round_alpha(value), + value: clamp_unit_f32(value / 100.0) as f64, raw: None, })), _ => n, diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css index da0efedd06d4..269ce7d45ab4 100644 --- a/crates/swc_css_compat/tests/color-legacy/input.expect.css +++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css @@ -15,9 +15,9 @@ color: rgba(178, 34, 34, CaLC(1 / 2)); } .test-rgb-percentages { - color: rgb(70, 13.5, 13.5); - color: rgba(70, 13.5, 13.5, 1); - color: rgba(70, 13.5, 13.5, 0.5); + color: rgb(179, 34, 34); + color: rgba(179, 34, 34, 1); + color: rgba(179, 34, 34, 0.5); } .test-hsl { color: hsl(0, 0%, 100%); @@ -55,7 +55,7 @@ color: rgb(; ); } .rgb-with-alpha { - color: rgba(70, 13.5, 13.5, 0.5); + color: rgba(179, 34, 34, 0.5); color: rgba(0, 0, 0, 0); } .hsl-with-alpha { @@ -63,14 +63,14 @@ color: hsla(120, 100%, 50%, 0); } .test-legacy-notation-with-modern-components--rgb { - color: rgb(50, 34, 34); - color: rgb(178, 10, 34); - color: rgb(178, 34, 10); + color: rgb(128, 34, 34); + color: rgb(178, 26, 34); + color: rgb(178, 34, 26); } .test-legacy-notation-with-modern-components--rgba { - color: rgba(50, 34, 34, 1); - color: rgba(178, 10, 34, 1); - color: rgba(178, 34, 10, 1); + color: rgba(128, 34, 34, 1); + color: rgba(178, 26, 34, 1); + color: rgba(178, 34, 26, 1); color: rgba(178, 34, 34, 1); } .test-legacy-notation-with-modern-components--hsla { From 67b2530c0b28f1f3ef493b9ad8a5c4525e759b4d Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 22:19:08 +0300 Subject: [PATCH 09/11] fix: alpha for legacy hsl --- .../src/compiler/legacy_rgb_and_hsl.rs | 57 +++++++++++++++++++ crates/swc_css_compat/src/compiler/mod.rs | 6 +- .../src/compiler/percentage_in_parameters.rs | 53 ----------------- crates/swc_css_compat/src/feature.rs | 4 +- .../tests/color-legacy/input.expect.css | 12 ++-- crates/swc_css_compat/tests/fixture.rs | 4 +- 6 files changed, 70 insertions(+), 66 deletions(-) create mode 100644 crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs delete mode 100644 crates/swc_css_compat/src/compiler/percentage_in_parameters.rs diff --git a/crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs b/crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs new file mode 100644 index 000000000000..c9d9a4693432 --- /dev/null +++ b/crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs @@ -0,0 +1,57 @@ +use swc_atoms::js_word; +use swc_css_ast::{AbsoluteColorBase, AlphaValue, ComponentValue, Number, Percentage}; + +use crate::compiler::{ + utils::{clamp_unit_f32, round_alpha}, + Compiler, +}; +impl Compiler { + pub(crate) fn process_rgb_and_hsl(&mut self, n: &mut AbsoluteColorBase) { + if let AbsoluteColorBase::Function(function) = n { + let name = function.name.value.to_ascii_lowercase(); + + let is_rgb = matches!(name, js_word!("rgb") | js_word!("rgba")); + let is_hsl = matches!(name, js_word!("hsl") | js_word!("hsla")); + + if is_rgb { + function.value = function + .value + .drain(..) + .into_iter() + .map(|n| match n { + ComponentValue::Percentage(box Percentage { + span, + value: Number { value, .. }, + .. + }) => ComponentValue::Number(Box::new(Number { + span, + value: clamp_unit_f32(value / 100.0) as f64, + raw: None, + })), + _ => n, + }) + .collect(); + } else if is_hsl { + } + + // TODO handle angle for hsl/hsla + if is_rgb || is_hsl { + if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() + { + if let AlphaValue::Percentage(Percentage { + span, + value: Number { value: a, .. }, + .. + }) = alpha_value + { + *alpha_value = AlphaValue::Number(Number { + span: *span, + value: round_alpha(*a / 100.0), + raw: None, + }); + } + } + } + } + } +} diff --git a/crates/swc_css_compat/src/compiler/mod.rs b/crates/swc_css_compat/src/compiler/mod.rs index a9aae2fd8da4..c8904c857a55 100644 --- a/crates/swc_css_compat/src/compiler/mod.rs +++ b/crates/swc_css_compat/src/compiler/mod.rs @@ -12,8 +12,8 @@ mod color_alpha_parameter; mod color_hex_alpha; mod color_space_separated_parameters; mod custom_media; +mod legacy_rgb_and_hsl; mod media_query_ranges; -mod percentage_in_parameters; mod utils; /// Compiles a modern CSS file to a CSS file which works with old browsers. @@ -155,8 +155,8 @@ impl VisitMut for Compiler { self.process_color_alpha_parameter(n); } - if process.contains(Features::COLOR_PERCENTAGE_IN_PARAMETERS) { - self.process_percentage_in_parameters(n); + if process.contains(Features::COLOR_LEGACY_RGB_AND_HSL) { + self.process_rgb_and_hsl(n); } } } diff --git a/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs b/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs deleted file mode 100644 index 8b1a5cadf845..000000000000 --- a/crates/swc_css_compat/src/compiler/percentage_in_parameters.rs +++ /dev/null @@ -1,53 +0,0 @@ -use swc_atoms::js_word; -use swc_css_ast::{AbsoluteColorBase, AlphaValue, ComponentValue, Number, Percentage}; - -use crate::compiler::{ - utils::{clamp_unit_f32, round_alpha}, - Compiler, -}; -impl Compiler { - pub(crate) fn process_percentage_in_parameters(&mut self, n: &mut AbsoluteColorBase) { - if let AbsoluteColorBase::Function(function) = n { - let name = function.name.value.to_ascii_lowercase(); - - if !matches!(name, js_word!("rgb") | js_word!("rgba")) { - return; - } - - // TODO handle angle for hsl/hsla - - function.value = function - .value - .drain(..) - .into_iter() - .map(|n| match n { - ComponentValue::Percentage(box Percentage { - span, - value: Number { value, .. }, - .. - }) => ComponentValue::Number(Box::new(Number { - span, - value: clamp_unit_f32(value / 100.0) as f64, - raw: None, - })), - _ => n, - }) - .collect(); - - if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() { - if let AlphaValue::Percentage(Percentage { - span, - value: Number { value: a, .. }, - .. - }) = alpha_value - { - *alpha_value = AlphaValue::Number(Number { - span: *span, - value: round_alpha(*a / 100.0), - raw: None, - }); - } - } - } - } -} diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index 500791f154fc..904c23431799 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/crates/swc_css_compat/src/feature.rs @@ -7,7 +7,7 @@ bitflags! { const MEDIA_QUERY_RANGES = 1 << 2; const COLOR_HEX_ALPHA = 1 << 3; const COLOR_ALPHA_PARAMETER = 1 << 4; - const COLOR_PERCENTAGE_IN_PARAMETERS = 1 << 5; - const COLOR_SPACE_SEPARATED_PARAMETERS = 1 << 6; + const COLOR_SPACE_SEPARATED_PARAMETERS = 1 << 5; + const COLOR_LEGACY_RGB_AND_HSL = 1 << 5; } } diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css index 269ce7d45ab4..bc4a342cc8a1 100644 --- a/crates/swc_css_compat/tests/color-legacy/input.expect.css +++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css @@ -25,8 +25,8 @@ color: hsl(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); - color: hsla(120, 100%, 50%, 100%); - color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 1); + color: hsla(120, 100%, 50%, 0.5); color: hsl(120deg, 100%, 50%); color: hsl(0.5turn, 100%, 50%); color: hsl(200grad, 100%, 50%); @@ -38,8 +38,8 @@ color: hsl(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); - color: hsla(120, 100%, 50%, 100%); - color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 1); + color: hsla(120, 100%, 50%, 0.5); color: hsla(120, 100%, 50%, var(--alpha-50)); color: hsla(120, 100%, 50%, calc(1 / 2)); } @@ -59,7 +59,7 @@ color: rgba(0, 0, 0, 0); } .hsl-with-alpha { - color: hsla(120, 100%, 50%, 50%); + color: hsla(120, 100%, 50%, 0.5); color: hsla(120, 100%, 50%, 0); } .test-legacy-notation-with-modern-components--rgb { @@ -74,7 +74,7 @@ color: rgba(178, 34, 34, 1); } .test-legacy-notation-with-modern-components--hsla { - color: hsla(120, 100%, 50%, 100%); + color: hsla(120, 100%, 50%, 1); } .test-ignore { color: rgba(0, 0, 0, 0.1); diff --git a/crates/swc_css_compat/tests/fixture.rs b/crates/swc_css_compat/tests/fixture.rs index 5c1318bc1d5f..6197c8fa571e 100644 --- a/crates/swc_css_compat/tests/fixture.rs +++ b/crates/swc_css_compat/tests/fixture.rs @@ -159,8 +159,8 @@ fn test_color_space_separated_function_notation(input: PathBuf) { ss.visit_mut_with(&mut Compiler::new(Config { process: Features::COLOR_SPACE_SEPARATED_PARAMETERS - | Features::COLOR_PERCENTAGE_IN_PARAMETERS - | Features::COLOR_ALPHA_PARAMETER, + | Features::COLOR_ALPHA_PARAMETER + | Features::COLOR_LEGACY_RGB_AND_HSL, })); let s = print_stylesheet(&ss); From 014a797ca0f95730de37db6786f4d9313834a371 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Wed, 14 Dec 2022 22:40:51 +0300 Subject: [PATCH 10/11] fix: more for hsl --- .../src/compiler/legacy_rgb_and_hsl.rs | 36 +++++++++++++++++-- .../tests/color-legacy/input.css | 5 +++ .../tests/color-legacy/input.expect.css | 18 ++++++---- 3 files changed, 50 insertions(+), 9 deletions(-) diff --git a/crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs b/crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs index c9d9a4693432..19771d84b943 100644 --- a/crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs +++ b/crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs @@ -1,10 +1,13 @@ +use std::f64::consts::PI; + use swc_atoms::js_word; -use swc_css_ast::{AbsoluteColorBase, AlphaValue, ComponentValue, Number, Percentage}; +use swc_css_ast::{AbsoluteColorBase, AlphaValue, Angle, ComponentValue, Hue, Number, Percentage}; use crate::compiler::{ utils::{clamp_unit_f32, round_alpha}, Compiler, }; + impl Compiler { pub(crate) fn process_rgb_and_hsl(&mut self, n: &mut AbsoluteColorBase) { if let AbsoluteColorBase::Function(function) = n { @@ -32,9 +35,38 @@ impl Compiler { }) .collect(); } else if is_hsl { + function.value = function + .value + .drain(..) + .into_iter() + .map(|n| match n { + ComponentValue::Hue(box Hue::Angle(Angle { + span, + value: Number { value, .. }, + unit, + .. + })) => { + let value = match unit.value.to_ascii_lowercase() { + js_word!("deg") => value, + js_word!("grad") => value * 180.0 / 200.0, + js_word!("rad") => value * 180.0 / PI, + js_word!("turn") => value * 360.0, + _ => { + unreachable!(); + } + }; + + ComponentValue::Number(Box::new(Number { + span, + value: value.round(), + raw: None, + })) + } + _ => n, + }) + .collect(); } - // TODO handle angle for hsl/hsla if is_rgb || is_hsl { if let Some(ComponentValue::AlphaValue(box alpha_value)) = function.value.last_mut() { diff --git a/crates/swc_css_compat/tests/color-legacy/input.css b/crates/swc_css_compat/tests/color-legacy/input.css index 3a455403b37e..3f66a1746238 100644 --- a/crates/swc_css_compat/tests/color-legacy/input.css +++ b/crates/swc_css_compat/tests/color-legacy/input.css @@ -226,3 +226,8 @@ --hsla-functional-notation-percentage-alpha: hsla(0, 0%, 0%, 100%); } + +.foo { + color: hsl(720deg 100% 50%); + color: hsl(240grad 100% 50%); +} diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css index bc4a342cc8a1..49cdb8cf1b8d 100644 --- a/crates/swc_css_compat/tests/color-legacy/input.expect.css +++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css @@ -21,18 +21,18 @@ } .test-hsl { color: hsl(0, 0%, 100%); - color: hsl(120deg, 100%, 50%); + color: hsl(120, 100%, 50%); color: hsl(120, 100%, 50%); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, .5); color: hsla(120, 100%, 50%, 1); color: hsla(120, 100%, 50%, 0.5); - color: hsl(120deg, 100%, 50%); - color: hsl(0.5turn, 100%, 50%); - color: hsl(200grad, 100%, 50%); - color: hsl(3.14159rad, 100%, 50%); - color: hsla(3.14159rad, 100%, 50%, var(--alpha-50)); - color: hsla(3.14159rad, 100%, 50%, calc(1 / 2)); + color: hsl(120, 100%, 50%); + color: hsl(180, 100%, 50%); + color: hsl(180, 100%, 50%); + color: hsl(180, 100%, 50%); + color: hsla(180, 100%, 50%, var(--alpha-50)); + color: hsla(180, 100%, 50%, calc(1 / 2)); } .test-hsla { color: hsl(120, 100%, 50%); @@ -176,3 +176,7 @@ --rgba-functional-notation-percentage-alpha: rgba(0, 0, 0, 100%); --hsla-functional-notation-percentage-alpha: hsla(0, 0%, 0%, 100%); } +.foo { + color: hsl(720, 100%, 50%); + color: hsl(216, 100%, 50%); +} From f7bb812616445855b75b795ca1e22203e23cec69 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Thu, 15 Dec 2022 18:34:43 +0300 Subject: [PATCH 11/11] fix: features --- crates/swc_css_compat/src/feature.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/swc_css_compat/src/feature.rs b/crates/swc_css_compat/src/feature.rs index 904c23431799..05984fc04f9e 100644 --- a/crates/swc_css_compat/src/feature.rs +++ b/crates/swc_css_compat/src/feature.rs @@ -8,6 +8,6 @@ bitflags! { const COLOR_HEX_ALPHA = 1 << 3; const COLOR_ALPHA_PARAMETER = 1 << 4; const COLOR_SPACE_SEPARATED_PARAMETERS = 1 << 5; - const COLOR_LEGACY_RGB_AND_HSL = 1 << 5; + const COLOR_LEGACY_RGB_AND_HSL = 1 << 6; } }