feat(css_formatter): Bootstrap the CSS Formatter! (#1207)

.gitattributes

@@ -20,3 +20,5 @@ crates/biome_js_formatter/tests/**/*.ts.snap linguist-language=Markdown
 crates/biome_js_formatter/tests/**/*.js.snap linguist-language=Markdown
 crates/biome_cli/tests/**/*.snap linguist-language=Markdown
 crates/biome_js_analyze/tests/specs/**/*.snap linguist-language=Markdown
+crates/biome_css_formatter/tests/**/*.css.prettier-snap linguist-language=CSS
+crates/biome_css_formatter/tests/**/*.css.snap linguist-language=Markdown

.gitignore

@@ -18,6 +18,7 @@ packages/@biomejs/cli-*
 # https://github.com/nnethercote/dhat-rs output file
 dhat-heap.json
 
+crates/biome_css_formatter/report.*
 crates/biome_js_formatter/report.*
 crates/biome_json_formatter/report.*
 crates/biome_json_formatter/report_incompatible.*

Cargo.toml

@@ -77,6 +77,7 @@ biome_aria_metadata          = { version = "0.3.1", path = "./crates/biome_aria_
 biome_console                = { version = "0.3.1", path = "./crates/biome_console" }
 biome_control_flow           = { version = "0.3.1", path = "./crates/biome_control_flow" }
 biome_css_factory            = { version = "0.3.1", path = "./crates/biome_css_factory" }
+biome_css_formatter          = { version = "0.3.1", path = "./crates/biome_css_formatter" }
 biome_css_parser             = { version = "0.3.1", path = "./crates/biome_css_parser" }
 biome_css_syntax             = { version = "0.3.1", path = "./crates/biome_css_syntax" }
 biome_deserialize            = { version = "0.3.1", path = "./crates/biome_deserialize" }

crates/biome_cli/Cargo.toml

@@ -61,6 +61,7 @@ mimalloc = "0.1.29"
 tikv-jemallocator = "0.5.0"
 
 [dev-dependencies]
+biome_css_formatter  = { workspace = true }
 biome_js_formatter   = { workspace = true }
 biome_json_formatter = { workspace = true }
 biome_json_parser    = { workspace = true }

crates/biome_cli/src/commands/format.rs

@@ -8,6 +8,7 @@ use crate::{
 };
 use biome_console::{markup, ConsoleExt};
 use biome_diagnostics::PrintDiagnostic;
+use biome_service::configuration::css::CssFormatter;
 use biome_service::configuration::json::JsonFormatter;
 use biome_service::configuration::vcs::VcsConfiguration;
 use biome_service::configuration::{
@@ -21,6 +22,7 @@ use std::path::PathBuf;
 pub(crate) struct FormatCommandPayload {
     pub(crate) javascript_formatter: Option<JavascriptFormatter>,
     pub(crate) json_formatter: Option<JsonFormatter>,
+    pub(crate) css_formatter: Option<CssFormatter>,
     pub(crate) formatter_configuration: Option<FormatterConfiguration>,
     pub(crate) vcs_configuration: Option<VcsConfiguration>,
     pub(crate) files_configuration: Option<FilesConfiguration>,
@@ -47,6 +49,7 @@ pub(crate) fn format(
         files_configuration,
         write,
         json_formatter,
+        css_formatter,
         since,
         changed,
     } = payload;
@@ -107,9 +110,23 @@ pub(crate) fn format(
             {PrintDiagnostic::simple(&diagnostic)}
         })
     }
+    // TODO: remove in biome 2.0
+    if css_formatter
+        .as_ref()
+        .is_some_and(|f| f.indent_size.is_some())
+    {
+        let console = &mut session.app.console;
+        let diagnostic = DeprecatedArgument::new(markup! {
+            "The argument "<Emphasis>"--css-formatter-indent-size"</Emphasis>" is deprecated, it will be removed in the next major release. Use "<Emphasis>"--css-formatter-indent-width"</Emphasis>" instead."
+        });
+        console.error(markup! {
+            {PrintDiagnostic::simple(&diagnostic)}
+        })
+    }
 
     configuration.merge_with(javascript_formatter);
     configuration.merge_with(json_formatter);
+    configuration.merge_with(css_formatter);
     configuration.merge_with(formatter_configuration);
     configuration.merge_with(vcs_configuration);
     configuration.merge_with(files_configuration);

crates/biome_cli/src/commands/mod.rs

@@ -4,12 +4,14 @@ use crate::logging::LoggingKind;
 use crate::{CliDiagnostic, LoggingLevel, VERSION};
 use biome_console::{markup, Console, ConsoleExt};
 use biome_diagnostics::PrintDiagnostic;
+use biome_service::configuration::css::CssFormatter;
 use biome_service::configuration::json::JsonFormatter;
 use biome_service::configuration::vcs::VcsConfiguration;
 use biome_service::configuration::{
-    configuration, files_configuration, formatter_configuration, javascript::javascript_formatter,
-    json::json_formatter, linter_configuration, vcs::vcs_configuration, FilesConfiguration,
-    FormatterConfiguration, JavascriptFormatter, LinterConfiguration, LoadedConfiguration,
+    configuration, css::css_formatter, files_configuration, formatter_configuration,
+    javascript::javascript_formatter, json::json_formatter, linter_configuration,
+    vcs::vcs_configuration, FilesConfiguration, FormatterConfiguration, JavascriptFormatter,
+    LinterConfiguration, LoadedConfiguration,
 };
 use biome_service::{Configuration, ConfigurationDiagnostic, WorkspaceError};
 use bpaf::Bpaf;
@@ -159,6 +161,9 @@ pub enum BiomeCommand {
         #[bpaf(external, optional, hide_usage)]
         json_formatter: Option<JsonFormatter>,
 
+        #[bpaf(external, optional, hide_usage, hide)]
+        css_formatter: Option<CssFormatter>,
+
         #[bpaf(external, optional, hide_usage)]
         vcs_configuration: Option<VcsConfiguration>,
 

crates/biome_cli/src/lib.rs

@@ -161,6 +161,7 @@ impl<'app> CliSession<'app> {
                 vcs_configuration,
                 files_configuration,
                 json_formatter,
+                css_formatter,
                 changed,
                 since,
             } => commands::format::format(
@@ -175,6 +176,7 @@ impl<'app> CliSession<'app> {
                     vcs_configuration,
                     files_configuration,
                     json_formatter,
+                    css_formatter,
                     changed,
                     since,
                 },

crates/biome_cli/tests/cases/overrides_formatter.rs

@@ -10,6 +10,9 @@ const UNFORMATTED: &str = "  statement(  )  ";
 const UNFORMATTED_JSON: &str = r#"{ "asta": ["lorem", "ipsum", "first", "second"] }"#;
 const FORMATTED_JSON: &str =
     "{\n    \"asta\": [\n        \"lorem\",\n        \"ipsum\",\n        \"first\",\n        \"second\"\n    ]\n}\n";
+// TODO(faulty): re-add when the CSS formatter is available from the CLI.
+// const UNFORMATTED_CSS: &str = "html {}";
+// const FORMATTED_CSS: &str = "html {\n}\n";
 
 const UNFORMATTED_LINE_WIDTH: &str = r#"const a = ["loreum", "ipsum"]"#;
 const FORMATTED: &str = "statement();\n";
@@ -293,12 +296,14 @@ fn does_include_file_with_different_languages_and_files() {
         "include": ["test2.js"],
         "formatter": { "lineWidth": 120, "indentStyle": "space" },
         "javascript": { "formatter": { "semicolons": "asNeeded" } },
-        "json": { "formatter": { "indentStyle": "space", "lineWidth": 20, "indentWidth": 4 } }
+        "json": { "formatter": { "indentStyle": "space", "lineWidth": 20, "indentWidth": 4 } },
+        "css": { "formatter": { "indentStyle": "space", "lineWidth": 30, "indentWidth": 3 } }
     },
     {
         "include": ["test3.json"],
         "formatter": { "lineWidth": 120, "indentStyle": "space" },
-        "json": { "formatter": { "indentStyle": "space", "lineWidth": 20, "indentWidth": 4 } }
+        "json": { "formatter": { "indentStyle": "space", "lineWidth": 20, "indentWidth": 4 } },
+        "css": { "formatter": { "indentStyle": "space", "lineWidth": 30, "indentWidth": 3 } }
     }
   ]
 }
@@ -316,6 +321,10 @@ fn does_include_file_with_different_languages_and_files() {
     let json_file = Path::new("test3.json");
     fs.insert(json_file.into(), UNFORMATTED_JSON.as_bytes());
 
+    // TODO(faulty): re-add when the CSS formatter is available from the CLI.
+    // let css_file = Path::new("test4.css");
+    // fs.insert(css_file.into(), UNFORMATTED_CSS.as_bytes());
+
     let result = run_cli(
         DynRef::Borrowed(&mut fs),
         &mut console,
@@ -326,6 +335,8 @@ fn does_include_file_with_different_languages_and_files() {
                 test.as_os_str().to_str().unwrap(),
                 test2.as_os_str().to_str().unwrap(),
                 json_file.as_os_str().to_str().unwrap(),
+                // TODO(faulty): re-add when the CSS formatter is available from the CLI.
+                // css_file.as_os_str().to_str().unwrap(),
             ]
             .as_slice(),
         ),
@@ -336,6 +347,8 @@ fn does_include_file_with_different_languages_and_files() {
     assert_file_contents(&fs, test, FORMATTED_WITH_SINGLE_QUOTES);
     assert_file_contents(&fs, test2, FORMATTED_WITH_NO_SEMICOLONS);
     assert_file_contents(&fs, json_file, FORMATTED_JSON);
+    // TODO(faulty): re-add when the CSS formatter is available from the CLI.
+    // assert_file_contents(&fs, css_file, FORMATTED_CSS);
 
     assert_cli_snapshot(SnapshotPayload::new(
         module_path!(),

crates/biome_cli/tests/commands/format.rs

@@ -1978,6 +1978,12 @@ fn should_apply_different_formatting() {
                 "lineWidth": 80,
                 "indentSize": 2
             }
+        },
+        "css": {
+            "formatter": {
+                "lineWidth": 40,
+                "indentSize": 6
+            }
         }
     }"#,
     );
@@ -1989,6 +1995,9 @@ fn should_apply_different_formatting() {
 	"#;
     let json_file = Path::new("input.json");
     fs.insert(json_file.into(), code.as_bytes());
+    let code = r#"html {}"#;
+    let css_file = Path::new("input.css");
+    fs.insert(css_file.into(), code.as_bytes());
 
     let code = r#"
 const a = {
@@ -2007,6 +2016,7 @@ const a = {
                 "--write",
                 json_file.as_os_str().to_str().unwrap(),
                 js_file.as_os_str().to_str().unwrap(),
+                css_file.as_os_str().to_str().unwrap(),
             ]
             .as_slice(),
         ),
@@ -2046,6 +2056,10 @@ fn should_apply_different_formatting_with_cli() {
     let json_file = Path::new("input.json");
     fs.insert(json_file.into(), json_file_content.as_bytes());
 
+    let css_file_content = r#"html {}"#;
+    let css_file = Path::new("input.css");
+    fs.insert(css_file.into(), css_file_content.as_bytes());
+
     let js_file_content = r#"
 const a = {
     "array": ["lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum"]
@@ -2065,8 +2079,11 @@ const a = {
                 "--javascript-formatter-indent-size=8",
                 "--json-formatter-line-width=20",
                 "--json-formatter-indent-size=2",
+                "--css-formatter-line-width=40",
+                "--css-formatter-indent-size=6",
                 json_file.as_os_str().to_str().unwrap(),
                 js_file.as_os_str().to_str().unwrap(),
+                css_file.as_os_str().to_str().unwrap(),
             ]
             .as_slice(),
         ),
@@ -2221,6 +2238,74 @@ const a = {
     ));
 }
 
+#[test]
+fn should_not_format_css_files_if_disabled() {
+    let mut fs = MemoryFileSystem::default();
+    let mut console = BufferConsole::default();
+
+    let biome_json = Path::new("biome.json");
+    fs.insert(
+        biome_json.into(),
+        r#"{
+        "formatter": {
+            "indentStyle": "space"
+        },
+        "javascript": {
+            "formatter": {
+                "lineWidth": 80,
+                "indentSize": 4
+            }
+        },
+        "css": {
+            "formatter": {
+                "enabled": false
+            }
+        }
+    }"#,
+    );
+
+    let css_file_content = r#"html {
+
+    }
+    "#;
+    let css_file = Path::new("input.css");
+    fs.insert(css_file.into(), css_file_content.as_bytes());
+
+    let js_file_content = r#"
+const a = {
+    "array": ["lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum", "lorem ipsum"]
+}
+	"#;
+    let js_file = Path::new("input.js");
+    fs.insert(js_file.into(), js_file_content.as_bytes());
+
+    let result = run_cli(
+        DynRef::Borrowed(&mut fs),
+        &mut console,
+        Args::from(
+            [
+                ("format"),
+                "--write",
+                css_file.as_os_str().to_str().unwrap(),
+                js_file.as_os_str().to_str().unwrap(),
+            ]
+            .as_slice(),
+        ),
+    );
+
+    assert!(result.is_ok(), "run_cli returned {result:?}");
+
+    assert_file_contents(&fs, css_file, css_file_content);
+
+    assert_cli_snapshot(SnapshotPayload::new(
+        module_path!(),
+        "should_not_format_css_files_if_disabled",
+        fs,
+        console,
+        result,
+    ));
+}
+
 #[test]
 fn should_apply_different_indent_style() {
     let mut fs = MemoryFileSystem::default();
@@ -2290,7 +2375,7 @@ const a = {
     file.read_to_string(&mut content)
         .expect("failed to read file from memory FS");
 
-    assert!(content.contains('\t'), "should not contain tabs");
+    assert!(content.contains('\t'), "should contain tabs");
 
     drop(file);
 
@@ -2302,7 +2387,7 @@ const a = {
     file.read_to_string(&mut content)
         .expect("failed to read file from memory FS");
 
-    assert!(content.contains('\t'), "should not contain tabs");
+    assert!(content.contains('\t'), "should contain tabs");
 
     drop(file);