feat: remove formatting, only parse and lint for style attributes

Author: dyc3

.changeset/feat-html-style-attribute-css.md

@@ -2,9 +2,4 @@
 "@biomejs/biome": patch
 ---
 
-The HTML formatter now formats the value of a `style` attribute as CSS, the same way it already formatted a `<style>` element. The declarations stay on the tag's line while they fit there, and break onto their own lines once they do not:
-
-```diff
-- <div style="color:#fFf;  background:red"></div>
-+ <div style="color: #fff; background: red"></div>
-```
+HTML `style` attribute values are now parsed as CSS. All Biome CSS lint rules are applied to the `style` attributes.

crates/biome_cli/tests/cases/html_style_attribute.rs

@@ -5,79 +5,86 @@ use biome_fs::MemoryFileSystem;
 use bpaf::Args;
 use camino::Utf8Path;
 
-const CONFIG: &str = r#"{ "html": { "formatter": { "enabled": true } } }"#;
+const LINTER_CONFIG: &str =
+    r#"{ "html": { "linter": { "enabled": true }, "experimentalFullSupportEnabled": true } }"#;
 
-/// The value of a `style` attribute is CSS, so it is formatted as a list of
-/// declarations. It stays on the tag's line while it fits, and breaks onto its
-/// own lines once it does not.
 #[test]
-fn formats_style_attribute_as_css() {
+fn lints_dom_style_attributes_as_css() {
     let mut console = BufferConsole::default();
     let fs = MemoryFileSystem::default();
 
     let config = Utf8Path::new("biome.json");
-    fs.insert(config.into(), CONFIG.as_bytes());
+    fs.insert(config.into(), LINTER_CONFIG.as_bytes());
 
-    let file = Utf8Path::new("index.html");
+    let html_file = Utf8Path::new("index.html");
     fs.insert(
-        file.into(),
-        r#"<div style="color:#fFf;  background:red"></div>
-<div style='color:red'></div>
-<div style="all: initial;display:block;contain:content;text-align:center;max-width:500px;margin:0 auto"></div>
+        html_file.into(),
+        r#"<div style="colr: blue"></div>
+<my-element style="colr: blue"></my-element>
+"#
+        .as_bytes(),
+    );
+
+    let vue_file = Utf8Path::new("component.vue");
+    fs.insert(
+        vue_file.into(),
+        r#"<template><Button style="colr: blue" /></template>
 "#
         .as_bytes(),
     );
 
     let (fs, result) = run_cli(
         fs,
         &mut console,
-        Args::from(["format", "--write", file.as_str()].as_slice()),
+        Args::from(["lint", html_file.as_str(), vue_file.as_str()].as_slice()),
     );
 
-    assert!(result.is_ok(), "run_cli returned {result:?}");
+    assert!(result.is_err(), "run_cli returned {result:?}");
 
     assert_cli_snapshot(SnapshotPayload::new(
         module_path!(),
-        "formats_style_attribute_as_css",
+        "lints_dom_style_attributes_as_css",
         fs,
         console,
         result,
     ));
 }
 
-/// A value that is not a list of declarations is left exactly as written: a
-/// prop that happens to be called `style`, an interpolation, or nothing at all.
 #[test]
-fn leaves_non_css_style_attributes_alone() {
+fn does_not_lint_component_style_props_as_css() {
     let mut console = BufferConsole::default();
     let fs = MemoryFileSystem::default();
 
     let config = Utf8Path::new("biome.json");
-    fs.insert(config.into(), CONFIG.as_bytes());
+    fs.insert(config.into(), LINTER_CONFIG.as_bytes());
+
+    let svelte_file = Utf8Path::new("component.svelte");
+    fs.insert(
+        svelte_file.into(),
+        r#"<Button style="colr: blue" />
+"#
+        .as_bytes(),
+    );
 
-    let file = Utf8Path::new("index.html");
+    let astro_file = Utf8Path::new("component.astro");
     fs.insert(
-        file.into(),
-        r#"<div style="{{ dynamic }}"></div>
-<div style="primary"></div>
-<div style=""></div>
-<div style="   "></div>
-<div style></div>
+        astro_file.into(),
+        r#"<Button style="colr: blue" />
 "#
         .as_bytes(),
     );
 
     let (fs, result) = run_cli(
         fs,
         &mut console,
-        Args::from(["format", "--write", file.as_str()].as_slice()),
+        Args::from(["lint", svelte_file.as_str(), astro_file.as_str()].as_slice()),
     );
 
     assert!(result.is_ok(), "run_cli returned {result:?}");
 
     assert_cli_snapshot(SnapshotPayload::new(
         module_path!(),
-        "leaves_non_css_style_attributes_alone",
+        "does_not_lint_component_style_props_as_css",
         fs,
         console,
         result,

crates/biome_cli/tests/snapshots/main_cases_html_style_attribute/does_not_lint_component_style_props_as_css.snap

@@ -0,0 +1,34 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `component.astro`
+
+```astro
+<Button style="colr: blue" />
+
+```
+
+## `component.svelte`
+
+```svelte
+<Button style="colr: blue" />
+
+```
+
+# Emitted Messages
+
+```block
+Checked 2 files in <TIME>. No fixes applied.
+```

crates/biome_cli/tests/snapshots/main_cases_html_style_attribute/formats_style_attribute_as_css.snap

@@ -0,0 +1,97 @@
+---
+source: crates/biome_cli/tests/snap_test.rs
+expression: redactor(content)
+---
+## `biome.json`
+
+```json
+{
+  "html": {
+    "linter": { "enabled": true },
+    "experimentalFullSupportEnabled": true
+  }
+}
+```
+
+## `component.vue`
+
+```vue
+<template><Button style="colr: blue" /></template>
+
+```
+
+## `index.html`
+
+```html
+<div style="colr: blue"></div>
+<my-element style="colr: blue"></my-element>
+
+```
+
+# Termination Message
+
+```block
+lint ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Some errors were emitted while running checks.
+  
+
+
+```
+
+# Emitted Messages
+
+```block
+component.vue:1:26 lint/correctness/noUnknownProperty ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Unknown property is not allowed.
+  
+  > 1 │ <template><Button style="colr: blue" /></template>
+      │                          ^^^^
+    2 │ 
+  
+  i See CSS Specifications and browser specific properties for more details.
+  
+  i To resolve this issue, replace the unknown property with a valid CSS property.
+  
+
+```
+
+```block
+index.html:1:13 lint/correctness/noUnknownProperty ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Unknown property is not allowed.
+  
+  > 1 │ <div style="colr: blue"></div>
+      │             ^^^^
+    2 │ <my-element style="colr: blue"></my-element>
+    3 │ 
+  
+  i See CSS Specifications and browser specific properties for more details.
+  
+  i To resolve this issue, replace the unknown property with a valid CSS property.
+  
+
+```
+
+```block
+index.html:2:20 lint/correctness/noUnknownProperty ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  × Unknown property is not allowed.
+  
+    1 │ <div style="colr: blue"></div>
+  > 2 │ <my-element style="colr: blue"></my-element>
+      │                    ^^^^
+    3 │ 
+  
+  i See CSS Specifications and browser specific properties for more details.
+  
+  i To resolve this issue, replace the unknown property with a valid CSS property.
+  
+
+```
+
+```block
+Checked 2 files in <TIME>. No fixes applied.
+Found 3 errors.
+```

crates/biome_cli/tests/snapshots/main_cases_html_style_attribute/leaves_non_css_style_attributes_alone.snap

@@ -77,13 +77,13 @@ pub struct CssFormatOptions {
     delimiter_spacing: DelimiterSpacing,
     /// Whether to add a trailing newline at the end of the file. Defaults to true.
     trailing_newline: TrailingNewline,
-    file_source: CssFileSource,
+    _file_source: CssFileSource,
 }
 
 impl CssFormatOptions {
     pub fn new(file_source: CssFileSource) -> Self {
         Self {
-            file_source,
+            _file_source: file_source,
             indent_style: IndentStyle::default(),
             indent_width: IndentWidth::default(),
             line_ending: LineEnding::default(),
@@ -94,20 +94,6 @@ impl CssFormatOptions {
         }
     }
 
-    /// The source the CSS came from, which says whether it is a whole
-    /// stylesheet or a snippet embedded in another language.
-    pub fn file_source(&self) -> &CssFileSource {
-        &self.file_source
-    }
-
-    /// Whether this CSS is the value of an HTML `style` attribute, which is
-    /// printed on the attribute's line rather than as a block of its own.
-    pub fn is_html_style_attribute(&self) -> bool {
-        self.file_source
-            .as_embedding_kind()
-            .is_html_style_attribute()
-    }
-
     pub fn with_indent_style(mut self, indent_style: IndentStyle) -> Self {
         self.indent_style = indent_style;
         self

crates/biome_cli/tests/snapshots/main_cases_html_style_attribute/lints_dom_style_attributes_as_css.snap

@@ -24,16 +24,6 @@ impl FormatNodeRule<CssDeclarationWithSemicolon> for FormatCssDeclarationWithSem
 
         write!(f, [declaration.format()])?;
 
-        // The last declaration of a `style` attribute only needs its semicolon
-        // once the attribute breaks across lines. Kept on one line, a trailing
-        // `;` is noise the author did not write.
-        if f.options().is_html_style_attribute() && node.syntax().next_sibling().is_none() {
-            if let Some(semicolon) = semicolon_token.as_ref() {
-                write!(f, [format_removed(semicolon)])?;
-            }
-            return write!(f, [if_group_breaks(&token(";"))]);
-        }
-
         match semicolon_token.as_ref() {
             Some(semicolon) => {
                 if preserve_source_gap_before_semicolon

crates/biome_css_formatter/src/context.rs

@@ -6,20 +6,6 @@ pub(crate) struct FormatCssDeclarationList;
 impl FormatRule<CssDeclarationList> for FormatCssDeclarationList {
     type Context = CssFormatContext;
     fn fmt(&self, node: &CssDeclarationList, f: &mut CssFormatter) -> FormatResult<()> {
-        // A `style` attribute stays on the tag's line while its declarations fit.
-        if f.options().is_html_style_attribute() {
-            let mut join = f.join_nodes_with_soft_line();
-
-            for declaration in node {
-                join.entry(
-                    declaration.syntax(),
-                    &format_or_verbatim(declaration.format()),
-                );
-            }
-
-            return join.finish();
-        }
-
         // This is one of the few cases where we _do_ want to respect empty
         // lines from the input, so we can use `join_nodes_with_hardline`.
         let mut join = f.join_nodes_with_hardline();