Treat <option> and <optgroup> as block (#8620)

changelog_unreleased/html/pr-8275.md

@@ -1,6 +1,6 @@
-#### Treat `<select>` and `<optgroup>` as inline-block ([#8275](https://github.com/prettier/prettier/pull/8275) by [@thorn0](https://github.com/thorn0))
+#### Treat `<select>` as inline-block and `<optgroup>`/`<option>` as block ([#8275](https://github.com/prettier/prettier/pull/8275) by [@thorn0](https://github.com/thorn0), [#8620](https://github.com/prettier/prettier/pull/8620) by [@fisker](https://github.com/fisker))
 
-Now Prettier knows that it's safe to add whitespace inside `select` and `optgroup` tags.
+Now Prettier knows that it's safe to add whitespace inside `select`, `option` and `optgroup` tags.
 
 <!-- prettier-ignore -->
 ```html

src/language-html/constants.evaluate.js

@@ -36,7 +36,8 @@ const CSS_DISPLAY_TAGS = {
   video: "inline-block",
   audio: "inline-block",
   select: "inline-block",
-  optgroup: "inline-block",
+  option: "block",
+  optgroup: "block",
 };
 const CSS_DISPLAY_DEFAULT = "inline";
 const CSS_WHITE_SPACE_TAGS = getCssStyleTags("white-space");

tests/html/tags/__snapshots__/jsfmt.spec.js.snap

@@ -784,9 +784,12 @@ printWidth: Infinity
 
 =====================================output=====================================
 <select>
-  <option>Blue</option
-  ><option>Green</option
-  ><optgroup label="Darker"><option>Dark Blue</option><option>Dark Green</option></optgroup>
+  <option>Blue</option>
+  <option>Green</option>
+  <optgroup label="Darker">
+    <option>Dark Blue</option>
+    <option>Dark Green</option>
+  </optgroup>
 </select>
 <input list="colors" />
 <datalist id="colors">
@@ -809,20 +812,23 @@ printWidth: 1
 
 =====================================output=====================================
 <select>
-  <option
-    >Blue</option
-  ><option
-    >Green</option
-  ><optgroup
+  <option>
+    Blue
+  </option>
+  <option>
+    Green
+  </option>
+  <optgroup
     label="Darker"
   >
-    <option
-      >Dark
-      Blue</option
-    ><option
-      >Dark
-      Green</option
-    >
+    <option>
+      Dark
+      Blue
+    </option>
+    <option>
+      Dark
+      Green
+    </option>
   </optgroup>
 </select>
 <input
@@ -831,12 +837,12 @@ printWidth: 1
 <datalist
   id="colors"
 >
-  <option
-    >Blue</option
-  >
-  <option
-    >Green</option
-  >
+  <option>
+    Blue
+  </option>
+  <option>
+    Green
+  </option>
 </datalist>
 
 ================================================================================
@@ -854,10 +860,11 @@ printWidth: 80
 
 =====================================output=====================================
 <select>
-  <option>Blue</option
-  ><option>Green</option
-  ><optgroup label="Darker">
-    <option>Dark Blue</option><option>Dark Green</option>
+  <option>Blue</option>
+  <option>Green</option>
+  <optgroup label="Darker">
+    <option>Dark Blue</option>
+    <option>Dark Green</option>
   </optgroup>
 </select>
 <input list="colors" />