From 296e4632049a19700462d242e0733ff3dd9e6d55 Mon Sep 17 00:00:00 2001 From: Denis Bezrukov <6227442+denbezrukov@users.noreply.github.com> Date: Wed, 8 May 2024 18:59:12 +0300 Subject: [PATCH] feat(css_formatter): use format_number_token utils for css number --- .../src/css/value/number.rs | 8 +- .../css/color/functional_colors.css.snap | 9 +- .../tests/specs/css/number.css | 20 ++ .../tests/specs/css/number.css.snap | 67 ++++++ .../css/color/functional-syntax.css.snap | 13 +- .../css/color/whitespace-syntax.css.snap | 74 ------- .../prettier/css/numbers/numbers.css.snap | 202 +++++++----------- 7 files changed, 169 insertions(+), 224 deletions(-) create mode 100644 crates/biome_css_formatter/tests/specs/css/number.css create mode 100644 crates/biome_css_formatter/tests/specs/css/number.css.snap delete mode 100644 crates/biome_css_formatter/tests/specs/prettier/css/color/whitespace-syntax.css.snap diff --git a/crates/biome_css_formatter/src/css/value/number.rs b/crates/biome_css_formatter/src/css/value/number.rs index fac91c56cccd..eef907352711 100644 --- a/crates/biome_css_formatter/src/css/value/number.rs +++ b/crates/biome_css_formatter/src/css/value/number.rs @@ -1,13 +1,11 @@ use crate::prelude::*; -use biome_css_syntax::{CssNumber, CssNumberFields}; -use biome_formatter::write; +use biome_css_syntax::CssNumber; +use biome_formatter::token::number::format_number_token; #[derive(Debug, Clone, Default)] pub(crate) struct FormatCssNumber; impl FormatNodeRule for FormatCssNumber { fn fmt_fields(&self, node: &CssNumber, f: &mut CssFormatter) -> FormatResult<()> { - let CssNumberFields { value_token } = node.as_fields(); - - write!(f, [value_token.format()]) + format_number_token(&node.value_token()?).fmt(f) } } diff --git a/crates/biome_css_formatter/tests/specs/css/color/functional_colors.css.snap b/crates/biome_css_formatter/tests/specs/css/color/functional_colors.css.snap index 121893dfbd98..260203313078 100644 --- a/crates/biome_css_formatter/tests/specs/css/color/functional_colors.css.snap +++ b/crates/biome_css_formatter/tests/specs/css/color/functional_colors.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/color/functional_colors.css --- - # Input ```css @@ -60,17 +59,15 @@ Quote style: Double Quotes color: rgb(100%, 0%, 60%); color: rgba(51, 170, 51, 0.1); color: hsl(.75turn, 60%, 70%); - color: hsla(240, 100%, 50%, .05); + color: hsla(240, 100%, 50%, 0.05); } .whitespace { color: rgba(51 170 51 / 0.4); color: rgba( 51 170 51 / 40%); - color: hsl(270 60% 50% / .15); - color: hsla(240 100% 50% / .05); + color: hsl(270 60% 50% / 0.15); + color: hsla(240 100% 50% / 0.05); color: hsla(240 100% 50% / 5%); } ``` - - diff --git a/crates/biome_css_formatter/tests/specs/css/number.css b/crates/biome_css_formatter/tests/specs/css/number.css new file mode 100644 index 000000000000..621dba6153ab --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/number.css @@ -0,0 +1,20 @@ +hr { + opacity: .25; +} + +h3 { + font-size: calc(1.3rem + .6vw); +} +h4 { + font-size: calc(1.275rem + .3vw); +} +sup { + top: -.5em; +} +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + margin-top: calc(var(--bs-gutter-y) * -1); + margin-right: calc(var(--bs-gutter-x) * -.5); + margin-left: calc(var(--bs-gutter-x) * -.5); +} diff --git a/crates/biome_css_formatter/tests/specs/css/number.css.snap b/crates/biome_css_formatter/tests/specs/css/number.css.snap new file mode 100644 index 000000000000..3c0f13f57b5e --- /dev/null +++ b/crates/biome_css_formatter/tests/specs/css/number.css.snap @@ -0,0 +1,67 @@ +--- +source: crates/biome_formatter_test/src/snapshot_builder.rs +info: css/number.css +--- +# Input + +```css +hr { + opacity: .25; +} + +h3 { + font-size: calc(1.3rem + .6vw); +} +h4 { + font-size: calc(1.275rem + .3vw); +} +sup { + top: -.5em; +} +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + margin-top: calc(var(--bs-gutter-y) * -1); + margin-right: calc(var(--bs-gutter-x) * -.5); + margin-left: calc(var(--bs-gutter-x) * -.5); +} + +``` + + +============================= + +# Outputs + +## Output 1 + +----- +Indent style: Tab +Indent width: 2 +Line ending: LF +Line width: 80 +Quote style: Double Quotes +----- + +```css +hr { + opacity: 0.25; +} + +h3 { + font-size: calc(1.3rem + .6vw); +} +h4 { + font-size: calc(1.275rem + .3vw); +} +sup { + top: -.5em; +} +.row { + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + margin-top: calc(var(--bs-gutter-y) * -1); + margin-right: calc(var(--bs-gutter-x) * -0.5); + margin-left: calc(var(--bs-gutter-x) * -0.5); +} +``` diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/color/functional-syntax.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/color/functional-syntax.css.snap index 006af3c7b1f1..ff161f63e79b 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/color/functional-syntax.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/color/functional-syntax.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/color/functional-syntax.css --- - # Input ```css @@ -28,11 +27,9 @@ info: css/color/functional-syntax.css color: rgb(100%, 0%, 60%); color: rgba(51, 170, 51, 0.1); - color: hsl(0.75turn, 60%, 70%); -- color: hsl(270 60% 50% / 0.15); -- color: hsla(240, 100%, 50%, 0.05); + color: hsl(.75turn, 60%, 70%); -+ color: hsl(270 60% 50% / .15); -+ color: hsla(240, 100%, 50%, .05); + color: hsl(270 60% 50% / 0.15); + color: hsla(240, 100%, 50%, 0.05); } ``` @@ -44,9 +41,7 @@ info: css/color/functional-syntax.css color: rgb(100%, 0%, 60%); color: rgba(51, 170, 51, 0.1); color: hsl(.75turn, 60%, 70%); - color: hsl(270 60% 50% / .15); - color: hsla(240, 100%, 50%, .05); + color: hsl(270 60% 50% / 0.15); + color: hsla(240, 100%, 50%, 0.05); } ``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/color/whitespace-syntax.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/color/whitespace-syntax.css.snap deleted file mode 100644 index aecf59f7873f..000000000000 --- a/crates/biome_css_formatter/tests/specs/prettier/css/color/whitespace-syntax.css.snap +++ /dev/null @@ -1,74 +0,0 @@ ---- -source: crates/biome_formatter_test/src/snapshot_builder.rs -info: css/color/whitespace-syntax.css ---- - -# Input - -```css -.foo { - color: rgba(51 170 51 / 0.4); - color: rgba(51 170 51 / 40%); - color: hsl(270 60% 50% / .15); - color: hsla(240 100% 50% / .05); - color: hsla(240 100% 50% / 5%); -} - -``` - - -# Prettier differences - -```diff ---- Prettier -+++ Biome -@@ -1,7 +1,7 @@ - .foo { - color: rgba(51 170 51 / 0.4); - color: rgba(51 170 51 / 40%); -- color: hsl(270 60% 50% / 0.15); -- color: hsla(240 100% 50% / 0.05); -+ color: hsl(270 60% 50% / .15); -+ color: hsla(240 100% 50% / .05); - color: hsla(240 100% 50% / 5%); - } -``` - -# Output - -```css -.foo { - color: rgba(51 170 51 / 0.4); - color: rgba(51 170 51 / 40%); - color: hsl(270 60% 50% / .15); - color: hsla(240 100% 50% / .05); - color: hsla(240 100% 50% / 5%); -} -``` - -# Errors -``` -whitespace-syntax.css:3:29 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ - - × Expected a number but instead found '40'. - - 1 │ .foo { - 2 │ color: rgba(51 170 51 / 0.4); - > 3 │ color: rgba(51 170 51 / 40%); - │ ^^ - 4 │ color: hsl(270 60% 50% / .15); - 5 │ color: hsla(240 100% 50% / .05); - - i Expected a number here. - - 1 │ .foo { - 2 │ color: rgba(51 170 51 / 0.4); - > 3 │ color: rgba(51 170 51 / 40%); - │ ^^ - 4 │ color: hsl(270 60% 50% / .15); - 5 │ color: hsla(240 100% 50% / .05); - - -``` - - diff --git a/crates/biome_css_formatter/tests/specs/prettier/css/numbers/numbers.css.snap b/crates/biome_css_formatter/tests/specs/prettier/css/numbers/numbers.css.snap index 502b70d3bfe1..ade2fed4b294 100644 --- a/crates/biome_css_formatter/tests/specs/prettier/css/numbers/numbers.css.snap +++ b/crates/biome_css_formatter/tests/specs/prettier/css/numbers/numbers.css.snap @@ -2,7 +2,6 @@ source: crates/biome_formatter_test/src/snapshot_builder.rs info: css/numbers/numbers.css --- - # Input ```css @@ -94,122 +93,67 @@ info: css/numbers/numbers.css a { a: 0; a: 1; -@@ -6,70 +6,72 @@ - a: 0.1; +@@ -7,14 +7,14 @@ a: 1.1; -- a: 0.1; + a: 0.1; - a: 1; -- a: +0.1; -- a: -0.1; -+ a: .1; + a: 1.; -+ a: +.1; -+ a: -.1; + a: +0.1; + a: -0.1; a: 1e1; -- a: 1e1; -+ a: 1e+1; + a: 1e1; a: 1e-1; - a: 1e1; -- a: 0.1e1; + a: 1.e1; -+ a: .1e1; + a: 0.1e1; a: 1.1e1; -- a: 1.1e10; -- a: +1.1e10; -- a: -1.1e10; -- a: 0.1e10; -- a: 0.1e-10; -+ a: 1.1e0010; -+ a: +1.1e0010; -+ a: -1.1e0010; -+ a: .1e+0010; -+ a: .1e-0010; - -- a: 1e1; -- a: 1e1; -- a: 1e-1; + a: 1.1e10; +@@ -26,7 +26,7 @@ + a: 1e1; + a: 1e1; + a: 1e-1; - a: 1e1; -- a: 0.1e1; -- a: 1.1e1; -- a: 1.1e10; -- a: 0.1e10; -- a: 0.1e-10; -+ a: 1E1; -+ a: 1E+1; -+ a: 1E-1; + a: 1.E1; -+ a: .1E1; -+ a: 1.1E1; -+ a: 1.1E0010; -+ a: .1E+0010; -+ a: .1E-0010; - -- a: 0.5; -- a: 0.5; -- a: 0.5; -- a: 0.5; -- a: 0.5; -- a: 0.5; -- a: +0.5; -- a: -0.5; -+ a: 0.5e0; -+ a: 0.5e00; -+ a: 0.5e+0; -+ a: 0.5e+00; -+ a: 0.5e-0; -+ a: 0.5e-00; -+ a: +0.5e0; -+ a: -0.5e0; + a: 0.1e1; + a: 1.1e1; + a: 1.1e10; +@@ -44,23 +44,23 @@ a: 1; -- a: 1.005; + a: 1.005; - a: 1; -- a: 1.5; -+ a: 1.00500; + a: 1.0; a: 1.5; -+ a: 1.50; + a: 1.5; -- a: 0.005; + a: 0.005; - a: 0; - a: 0; -+ a: 0.00500; + a: 0.0; -+ a: 0.0000; ++ a: 0.0; -- a: 500600.001230045; -- a: 1.005e60; + a: 500600.001230045; + a: 1.005e60; - a: 1e60; -- a: 0.005e60; -- a: 0e60; -- a: 0e60; -- a: 0e60; -- a: 0e60; -+ a: 500600.001230045000; -+ a: 1.00500e60; + a: 1.0e60; -+ a: 0.00500e60; + a: 0.005e60; +- a: 0e60; ++ a: 0.0e60; ++ a: 0.0e60; + a: 0.0e60; -+ a: 0.0000e60; -+ a: .0e60; + a: 0.e60; a: 0e60; -- a: 500600.001230045e60; -+ a: 500600.001230045000e60; +- a: 0e60; +- a: 0e60; +- a: 0e60; + a: 500600.001230045e60; a: 10; a: 9700; - a: 10e100; -- height: attr(data-size em, 0.01); -+ height: attr(data-size em, .01); - } - } - --@media only screen and (-webkit-min-device-pixel-ratio: 0.5), -- only screen and (min-device-pixel-ratio: 0.5) { -+@media only screen and (-webkit-min-device-pixel-ratio: .5), -+ only screen and (min-device-pixel-ratio: .5) { +@@ -72,4 +72,6 @@ + @media only screen and (-webkit-min-device-pixel-ratio: 0.5), + only screen and (min-device-pixel-ratio: 0.5) { } -@include single-transition(transform, 0.5s ease); +@ @@ -228,71 +172,71 @@ info: css/numbers/numbers.css a: 0.1; a: 1.1; - a: .1; + a: 0.1; a: 1.; - a: +.1; - a: -.1; + a: +0.1; + a: -0.1; a: 1e1; - a: 1e+1; + a: 1e1; a: 1e-1; a: 1.e1; - a: .1e1; + a: 0.1e1; a: 1.1e1; - a: 1.1e0010; - a: +1.1e0010; - a: -1.1e0010; - a: .1e+0010; - a: .1e-0010; + a: 1.1e10; + a: +1.1e10; + a: -1.1e10; + a: 0.1e10; + a: 0.1e-10; - a: 1E1; - a: 1E+1; - a: 1E-1; + a: 1e1; + a: 1e1; + a: 1e-1; a: 1.E1; - a: .1E1; - a: 1.1E1; - a: 1.1E0010; - a: .1E+0010; - a: .1E-0010; - - a: 0.5e0; - a: 0.5e00; - a: 0.5e+0; - a: 0.5e+00; - a: 0.5e-0; - a: 0.5e-00; - a: +0.5e0; - a: -0.5e0; + a: 0.1e1; + a: 1.1e1; + a: 1.1e10; + a: 0.1e10; + a: 0.1e-10; + + a: 0.5; + a: 0.5; + a: 0.5; + a: 0.5; + a: 0.5; + a: 0.5; + a: +0.5; + a: -0.5; a: 1; - a: 1.00500; + a: 1.005; a: 1.0; a: 1.5; - a: 1.50; + a: 1.5; - a: 0.00500; + a: 0.005; + a: 0.0; a: 0.0; - a: 0.0000; - a: 500600.001230045000; - a: 1.00500e60; + a: 500600.001230045; + a: 1.005e60; a: 1.0e60; - a: 0.00500e60; + a: 0.005e60; + a: 0.0e60; + a: 0.0e60; a: 0.0e60; - a: 0.0000e60; - a: .0e60; a: 0.e60; a: 0e60; - a: 500600.001230045000e60; + a: 500600.001230045e60; a: 10; a: 9700; a: 10e100; - height: attr(data-size em, .01); + height: attr(data-size em, 0.01); } } -@media only screen and (-webkit-min-device-pixel-ratio: .5), - only screen and (min-device-pixel-ratio: .5) { +@media only screen and (-webkit-min-device-pixel-ratio: 0.5), + only screen and (min-device-pixel-ratio: 0.5) { } @ include single-transition(transform, .5s ease) @@ -487,5 +431,3 @@ numbers.css:73:48 parse ━━━━━━━━━━━━━━━━━━ ``` - -