fix(css_formatter): fix CSS formatter converts custom identifiers to …

…lowecase (#3254)

CHANGELOG.md

@@ -9,6 +9,14 @@ New entries must be placed in a section entitled `Unreleased`.
 Read
 our [guidelines for writing a good changelog entry](https://github.com/biomejs/biome/blob/main/CONTRIBUTING.md#changelog).
 
+## Unreleased
+
+### Formatter
+
+#### Bug fixes
+
+- Fix [#3184](https://github.com/biomejs/biome/issues/3184) CSS formatter converts custom identifiers to lowercase. Contributed by @denbezrukov
+
 ## v1.8.2 (2024-06-20)
 
 ### CLI

crates/biome_css_formatter/src/css/auxiliary/function.rs

@@ -1,8 +1,6 @@
-use crate::css::value::identifier::FormatCssIdentifierOptions;
 use crate::prelude::*;
 use biome_css_syntax::{CssFunction, CssFunctionFields};
 use biome_formatter::{format_args, write};
-
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssFunction;
 impl FormatNodeRule<CssFunction> for FormatCssFunction {
@@ -14,22 +12,16 @@ impl FormatNodeRule<CssFunction> for FormatCssFunction {
             r_paren_token,
         } = node.as_fields();
 
-        if let Ok(name) = name {
-            write!(
-                f,
-                [name
-                    .format()
-                    .with_options(FormatCssIdentifierOptions::default().prevent_lowercase(true))]
-            )?;
-        }
-
         write!(
             f,
-            [group(&format_args![
-                l_paren_token.format(),
-                soft_block_indent(&items.format()),
-                r_paren_token.format()
-            ])]
+            [
+                name.format(),
+                group(&format_args![
+                    l_paren_token.format(),
+                    soft_block_indent(&items.format()),
+                    r_paren_token.format()
+                ])
+            ]
         )
     }
 }

crates/biome_css_formatter/src/css/lists/layer_name_list.rs

@@ -1,18 +1,10 @@
-use crate::css::value::identifier::FormatCssIdentifierOptions;
 use crate::prelude::*;
-use crate::separated::FormatAstSeparatedListWithOptionsExtension;
 use biome_css_syntax::CssLayerNameList;
-
 #[derive(Debug, Clone, Default)]
 pub(crate) struct FormatCssLayerNameList;
 impl FormatRule<CssLayerNameList> for FormatCssLayerNameList {
     type Context = CssFormatContext;
     fn fmt(&self, node: &CssLayerNameList, f: &mut CssFormatter) -> FormatResult<()> {
-        f.join()
-            .entries(node.format_separated_with_options(
-                ".",
-                FormatCssIdentifierOptions::default().prevent_lowercase(true),
-            ))
-            .finish()
+        f.join().entries(node.format_separated(".")).finish()
     }
 }

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

@@ -1,51 +1,14 @@
-use crate::{prelude::*, utils::string_utils::FormatTokenAsLowercase};
+use crate::prelude::*;
 use biome_css_syntax::{CssIdentifier, CssIdentifierFields};
-use biome_formatter::{write, FormatRuleWithOptions};
+use biome_formatter::write;
 
-#[derive(Default, Debug, Clone, Copy)]
-pub(crate) struct FormatCssIdentifier {
-    prevent_lowercase: bool,
-}
-
-#[derive(Default, Debug, Clone, Copy)]
-pub(crate) struct FormatCssIdentifierOptions {
-    pub(crate) prevent_lowercase: bool,
-}
-
-impl FormatCssIdentifierOptions {
-    pub(crate) fn prevent_lowercase(mut self, prevent_lowercase: bool) -> Self {
-        self.prevent_lowercase = prevent_lowercase;
-        self
-    }
-}
-
-impl FormatRuleWithOptions<CssIdentifier> for FormatCssIdentifier {
-    type Options = FormatCssIdentifierOptions;
-
-    fn with_options(mut self, options: Self::Options) -> Self {
-        self.prevent_lowercase = options.prevent_lowercase;
-        self
-    }
-}
+#[derive(Debug, Clone, Default)]
+pub(crate) struct FormatCssIdentifier;
 
 impl FormatNodeRule<CssIdentifier> for FormatCssIdentifier {
     fn fmt_fields(&self, node: &CssIdentifier, f: &mut CssFormatter) -> FormatResult<()> {
         let CssIdentifierFields { value_token } = node.as_fields();
 
-        if self.prevent_lowercase {
-            return write!(f, [value_token.format()]);
-        }
-
-        // Identifiers in CSS are used all over the place. Type selectors,
-        // declaration names, value definitions, and plenty more. For the most
-        // part, these identifiers are case-insensitive, meaning they can
-        // safely be re-written in any casing, and for formatting we want them
-        // to always be in lowercase.
-        //
-        // Other kinds of identifiers (custom identifiers and dashed
-        // identifiers) are defined to be case-sensitive, which is why they
-        // have their own types to be parsed and formatted separately, ensuring
-        // that only identifiers which _can_ be re-written this way are.
-        write!(f, [FormatTokenAsLowercase::from(value_token?)])
+        write!(f, [value_token.format()])
     }
 }

crates/biome_css_formatter/src/separated.rs

@@ -101,6 +101,7 @@ type CssFormatSeparatedIterWithOptions<Node, Options> = FormatSeparatedIter<
 >;
 
 /// AST Separated list formatting extension methods with options
+#[allow(dead_code)]
 pub(crate) trait FormatAstSeparatedListWithOptionsExtension<O>:
     AstSeparatedList<Language = CssLanguage>
 {

crates/biome_css_formatter/tests/specs/css/atrule/container.css.snap

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/atrule/container.css
 ---
-
 # Input
 
 ```css
@@ -143,10 +142,8 @@ Quote style: Double Quotes
 @container (inline-size >= calc(200px)) {
 }
 
-@container (width <= 150px) {
+@container (WIDTH <= 150px) {
 }
-@container (150px <= width) {
+@container (150px <= WIDTH) {
 }
 ```
-
-

crates/biome_css_formatter/tests/specs/css/atrule/import.css.snap

@@ -237,7 +237,7 @@ Quote style: Double Quotes
 @import url("");
 @import url("");
 @import url(test.css) screen and (orientation: landscape);
-@import url(test.css) screen and (orientation: landscape);
+@import url(test.css) SCREEN and (ORIENTATION: LANDSCAPE);
 @import url(test.css) screen and (orientation: landscape);
 @import url(test.css) screen and (orientation: landscape);
 @import url(test.css) screen and (orientation: landscape);
@@ -335,8 +335,8 @@ st.css");
 @import url("./test.css") screen and (min-width: 400px);
 @import url("./test.css") layer(default) supports(display: flex)
 	screen and (min-width: 400px);
-@import url("./test.css") layer(DEFAULT) supports(display: flex)
-	screen and (min-width: 400px);
+@import url("./test.css") layer(DEFAULT) supports(DISPLAY: FLEX)
+	SCREEN and (MIN-WIDTH: 400px);
 @import url("./test.css") /* Comment */
 	layer(/* Comment */ /* Comment */ default) /* Comment */
 	supports(

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

@@ -57,22 +57,22 @@ Quote style: Double Quotes
  * identifiers. Everything else can and will be re-written in lowercase.
  */
 
-div {
-	color: blue;
+DIV {
+	COLOR: BLUE;
 }
 
-div.classNames#AND_Ids.ArePreserved {
+DIV.classNames#AND_Ids.ArePreserved {
 }
 
 [attr="IdentifierValuesPreserveWhenStringified"] {
 }
 
-@media not screen and (color), print and (color) {
+@media not SCReEN and (CoLOR), PRINT and (COLOR) {
 }
 
-div {
-	--Preserved-Casing: blue;
-	color: VAR(--Preserved-Casing);
+DIV {
+	--Preserved-Casing: BLUE;
+	ColOR: VAR(--Preserved-Casing);
 }
 
 @font-palette-values --AnyCASInG-works {

crates/biome_css_formatter/tests/specs/css/properties/all.css.snap

@@ -58,8 +58,8 @@ Quote style: Double Quotes
 
 ```css
 div {
-	all: initial;
-	all: inherit;
+	all: InItial;
+	all: inherIT;
 	all: revert-layer;
 
 	all: unknown-value;

crates/biome_css_formatter/tests/specs/css/properties/border.css.snap

@@ -65,18 +65,18 @@ Quote style: Double Quotes
 ```css
 div {
 	/* Generic property tests */
-	border: initial;
+	border: InItial;
 	border: inherit;
 
 	border: zzz-unknown-value;
 	border: a, value list;
 
 	/* <line-style> */
-	border: solid;
+	border: SOLID;
 	border: none;
 
 	/* <line-width> */
-	border: thin;
+	border: ThIn;
 	border: medium;
 	border: 100px;
 

crates/biome_css_formatter/tests/specs/css/properties/z-index.css.snap

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/properties/z-index.css
 ---
-
 # Input
 
 ```css
@@ -38,14 +37,12 @@ Quote style: Double Quotes
 
 ```css
 div {
-	z-index: inherit;
+	z-index: INherit;
 
-	z-index: auto;
+	z-index: Auto;
 
 	z-index: -44;
 	z-index: 0;
 	z-index: 1;
 }
 ```
-
-

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

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/range/selector_list.css
 ---
-
 # Input
 
 ```css
@@ -26,9 +25,7 @@ Quote style: Double Quotes
 
 ```css
 .foo,
-.bar:first-child,
-div {
+.bar:FIRST-CHILD,
+DIV {
 	color: blue;
 }```
-
-

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

@@ -2,7 +2,6 @@
 source: crates/biome_formatter_test/src/snapshot_builder.rs
 info: css/range/single_value.css
 ---
-
 # Input
 
 ```css
@@ -32,7 +31,5 @@ Quote style: Double Quotes
 div {
     COLOR: GREEN;
 
-    Border : 1px green   solid   ;
+    Border : 1px GrEeN   solid   ;
 }```
-
-