📝 HTML Formatter Bug: HTML Whitespace Sensitivity

[Enoumy]

Environment information

CLI:
  Version:                      0.0.0
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "tmux-256color"
  JS_RUNTIME_VERSION:           unset
  JS_RUNTIME_NAME:              unset
  NODE_PACKAGE_MANAGER:         unset

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 false

Formatter:
  Format with errors:           false
  Indent style:                 Tab
  Indent width:                 2
  Line ending:                  Lf
  Line width:                   80
  Attribute position:           Auto
  Bracket spacing:              BracketSpacing(true)
  Ignore:                       ["configuration_schema.json"]
  Include:                      []

JavaScript Formatter:
  Enabled:                      true
  JSX quote style:              Double
  Quote properties:             AsNeeded
  Trailing commas:              All
  Semicolons:                   Always
  Arrow parentheses:            Always
  Bracket spacing:              unset
  Bracket same line:            false
  Quote style:                  Double
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Attribute position:           unset

JSON Formatter:
  Enabled:                      false
  Indent style:                 Space
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   1
  Trailing Commas:              unset

CSS Formatter:
  Enabled:                      true
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Quote style:                  Double

GraphQL Formatter:
  Enabled:                      false
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Bracket spacing:              unset
  Quote style:                  unset

Workspace:
  Open Documents:               0

Configuration

Playground link

https://biomejs.dev/playground/?indentStyle=space&indentWidth=4&bracketSameLine=true&files.main.html=PABkAGkAdgA%2BAGEAPABzAHQAcgBvAG4AZwA%2BAGIAPAAvAHMAdAByAG8AbgBnAD4AIABjADwALwBkAGkAdgA%2BAAoAPABkAGkAdgA%2BAGEAPABkAGkAdgA%2BAGIAPAAvAGQAaQB2AD4AIABjADwALwBkAGkAdgA%2BAAoA

Code of Conduct

• I agree to follow Biome's Code of Conduct

[Enoumy]

Hi! I have a bug report that I came across while I was experimenting with Biome's experimental HTML formatter. I looked around in Biome's existing issues, and do not think that this has already been reported, though please feel free to close this issues as a duplicate if this is an already known issue.

The bug is that:

<div>a<strong>b</strong> c</div>
<div>a<div>b</div> c</div>

gets formatted into:

<div>
    a<strong>b</strong>c
</div>
<div>
    a<div>b</div>c
</div>

Note that the space before the c disappeared in both cases. In the <div>b</div> c case this is generally fine/matches prettier's default behavior, but in the <strong>b</strong> c case, removing this whitespace is a change in behavior.

From prettier's docs on HTML whitespace sensitivity:

As you may notice during daily HTML works, the following two cases won't produce the same output:

1<b> 2 </b>3 => 1 2 3
1<b>2</b>3 => 123

More details on this whitespace sensitivity are in these MDN docs.

Prettier has an option --html-whitespace-sensitivity with three values css, strict, and ignore documented here: https://prettier.io/blog/2018/11/07/1.15.0#whitespace-sensitive-formatting (defaults to css).

For elements whose default display value is inline (e.g. em, strong, b, ... (I think a more detailed list is
here)), prettier will keep this whitespace if --html-whitespace-sensitivity is css. When --html-whitespace-sensitivity is strict, all whitespace will be preserved for all elements, and in ignore all whitespace is considered insignificant.

I am happy to answer any questions you may have/provide additional context. Thanks.

[dyc3]

This is partially fixed on next, and I have some changes on a local branch related to this. The playground points to main, so it's not completely up to date.