fix(css_formatter): improve CSS numeric formatting

.changeset/improve_formatting_of_numbers_in_css.md

@@ -0,0 +1,14 @@
+---
+"@biomejs/biome": patch
+---
+
+Fix [#5031](https://github.com/biomejs/biome/issues/5031). Improve CSS formatting for numbers:
+
+```diff
+.class {
+-	padding: .5em;
+-	marding: 1.0;
++	padding: 0.5em;	
++	marding: 1;
+}
+```

crates/biome_css_formatter/src/css/value/number.rs

@@ -1,11 +1,11 @@
 use crate::prelude::*;
 use biome_css_syntax::CssNumber;
-use biome_formatter::token::number::format_number_token;
+use biome_formatter::token::number::{format_number_token, NumberFormatOptions};
 
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssNumber;
 impl FormatNodeRule<CssNumber> for FormatCssNumber {
     fn fmt_fields(&self, node: &CssNumber, f: &mut CssFormatter) -> FormatResult<()> {
-        format_number_token(&node.value_token()?).fmt(f)
+        format_number_token(&node.value_token()?, NumberFormatOptions::default()).fmt(f)
     }
 }

crates/biome_css_formatter/src/css/value/regular_dimension.rs

@@ -1,6 +1,9 @@
 use crate::{prelude::*, utils::string_utils::FormatTokenAsLowercase};
 use biome_css_syntax::{CssRegularDimension, CssRegularDimensionFields};
-use biome_formatter::write;
+use biome_formatter::{
+    token::number::{format_number_token, NumberFormatOptions},
+    write,
+};
 
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssRegularDimension;
@@ -14,7 +17,7 @@ impl FormatNodeRule<CssRegularDimension> for FormatCssRegularDimension {
         write!(
             f,
             [
-                FormatTokenAsLowercase::from(value_token?),
+                format_number_token(&value_token?, NumberFormatOptions::default()),
                 FormatTokenAsLowercase::from(unit_token?),
             ]
         )

crates/biome_css_formatter/tests/specs/css/color/functional_colors.css.snap

@@ -58,7 +58,7 @@ Quote style: Double Quotes
 	color: rgb(255, 0, 153);
 	color: rgb(100%, 0%, 60%);
 	color: rgba(51, 170, 51, 0.1);
-	color: hsl(.75turn, 60%, 70%);
+	color: hsl(0.75turn, 60%, 70%);
 	color: hsla(240, 100%, 50%, 0.05);
 }
 

crates/biome_css_formatter/tests/specs/css/nesting/nesting.css.snap

@@ -391,7 +391,7 @@ figure {
 		background: hsl(0 0% 0% / 50%);
 
 		& > p {
-			font-size: .9rem;
+			font-size: 0.9rem;
 		}
 	}
 }

crates/biome_css_formatter/tests/specs/css/number.css

@@ -18,3 +18,7 @@ sup {
 	margin-right: calc(var(--bs-gutter-x) * -.5);
 	margin-left: calc(var(--bs-gutter-x) * -.5);
 }
+
+.bar {
+	opacity: 1.0;
+}

crates/biome_css_formatter/tests/specs/css/number.css.snap

@@ -26,6 +26,9 @@ sup {
 	margin-left: calc(var(--bs-gutter-x) * -.5);
 }
 
+.bar {
+	opacity: 1.0;
+}
 ```
 
 
@@ -49,13 +52,13 @@ hr {
 }
 
 h3 {
-	font-size: calc(1.3rem + .6vw);
+	font-size: calc(1.3rem + 0.6vw);
 }
 h4 {
-	font-size: calc(1.275rem + .3vw);
+	font-size: calc(1.275rem + 0.3vw);
 }
 sup {
-	top: -.5em;
+	top: -0.5em;
 }
 .row {
 	--bs-gutter-x: 1.5rem;
@@ -64,4 +67,8 @@ sup {
 	margin-right: calc(var(--bs-gutter-x) * -0.5);
 	margin-left: calc(var(--bs-gutter-x) * -0.5);
 }
+
+.bar {
+	opacity: 1;
+}
 ```

crates/biome_css_formatter/tests/specs/css/range/mid_value.css.snap

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/range/mid_value.css
 ---
-
 # Input
 
 ```css
@@ -29,8 +28,6 @@ Quote style: Double Quotes
 
 ```css
 div {
-    padding: 1px 20px 555000.000vh   ;
+    padding: 1px 20px 555000vh   ;
 }
 ```
-
-

crates/biome_css_formatter/tests/specs/prettier/css/case/case.css.snap

@@ -106,15 +106,6 @@ x-panel {
    background-color: orange;
  }
 
-@@ -53,7 +53,7 @@
-   max-width: 500px;
-   margin: 0 auto;
-   border-radius: 8px;
--  transition: transform 0.2s ease-out;
-+  transition: transform .2s ease-out;
- }
- :host([hidden]) {
-   display: none;
 ```
 
 # Output
@@ -175,7 +166,7 @@ x-panel {
   max-width: 500px;
   margin: 0 auto;
   border-radius: 8px;
-  transition: transform .2s ease-out;
+  transition: transform 0.2s ease-out;
 }
 :host([hidden]) {
   display: none;

crates/biome_css_formatter/tests/specs/prettier/css/grid/grid.css.snap

@@ -128,18 +128,7 @@ div {
 ```diff
 --- Prettier
 +++ Biome
-@@ -9,20 +9,20 @@
- /* numbers */
- div {
-   grid-template-columns:
--    [full-start] minmax(1.5em, 1fr)
--    [main-start] minmax(0.4ch, 75ch)
--    [main-end] minmax(1em, 1fr)
-+    [full-start] minmax(1.50em, 1fr)
-+    [main-start] minmax(.40ch, 75ch)
-+    [main-end] minmax(1em, 1.000fr)
-     [full-end];
- }
+@@ -17,12 +17,12 @@
 
  /* casing */
  div {
@@ -170,9 +159,9 @@ div {
 /* numbers */
 div {
   grid-template-columns:
-    [full-start] minmax(1.50em, 1fr)
-    [main-start] minmax(.40ch, 75ch)
-    [main-end] minmax(1em, 1.000fr)
+    [full-start] minmax(1.5em, 1fr)
+    [main-start] minmax(0.4ch, 75ch)
+    [main-end] minmax(1em, 1fr)
     [full-end];
 }
 

crates/biome_css_formatter/tests/specs/prettier/css/numbers/numbers.css.snap

@@ -87,41 +87,6 @@ info: css/numbers/numbers.css
 ```diff
 --- Prettier
 +++ Biome
-@@ -1,4 +1,4 @@
--@supports (margin: 0.5px ".30px" 1e2px) {
-+@supports (margin: .5px ".30px" 1e+2px) {
-   a {
-     a: 0;
-     a: 1;
-@@ -44,21 +44,21 @@
-
-     a: 1;
-     a: 1.005;
--    a: 1;
-+    a: 1.0;
-     a: 1.5;
-     a: 1.5;
-
-     a: 0.005;
--    a: 0;
--    a: 0;
-+    a: 0.0;
-+    a: 0.0;
-
-     a: 500600.001230045;
-     a: 1.005e60;
--    a: 1e60;
-+    a: 1.0e60;
-     a: 0.005e60;
--    a: 0e60;
--    a: 0e60;
--    a: 0e60;
-+    a: 0.0e60;
-+    a: 0.0e60;
-+    a: 0.0e60;
-     a: 0e60;
-     a: 0e60;
-     a: 500600.001230045e60;
 @@ -72,4 +72,4 @@
  @media only screen and (-webkit-min-device-pixel-ratio: 0.5),
    only screen and (min-device-pixel-ratio: 0.5) {
@@ -133,7 +98,7 @@ info: css/numbers/numbers.css
 # Output
 
 ```css
-@supports (margin: .5px ".30px" 1e+2px) {
+@supports (margin: 0.5px ".30px" 1e2px) {
   a {
     a: 0;
     a: 1;
@@ -179,21 +144,21 @@ info: css/numbers/numbers.css
 
     a: 1;
     a: 1.005;
-    a: 1.0;
+    a: 1;
     a: 1.5;
     a: 1.5;
 
     a: 0.005;
-    a: 0.0;
-    a: 0.0;
+    a: 0;
+    a: 0;
 
     a: 500600.001230045;
     a: 1.005e60;
-    a: 1.0e60;
+    a: 1e60;
     a: 0.005e60;
-    a: 0.0e60;
-    a: 0.0e60;
-    a: 0.0e60;
+    a: 0e60;
+    a: 0e60;
+    a: 0e60;
     a: 0e60;
     a: 0e60;
     a: 500600.001230045e60;