diff --git a/changelog_unreleased/html/pr-8275.md b/changelog_unreleased/html/pr-8275.md new file mode 100644 index 000000000..0d69e3eb3 --- /dev/null +++ b/changelog_unreleased/html/pr-8275.md @@ -0,0 +1,28 @@ +#### Treat `` and `` as inline-block ([#8275](https://github.com/prettier/prettier/pull/8275) by [@thorn0](https://github.com/thorn0)) + +Now Prettier knows that it's safe to add whitespace inside `select` and `optgroup` tags. + + +```html + +BlueGreenDark BlueDark Green + + +BlueGreenDark BlueDark Green + + + + Blue + Green + + Dark Blue + Dark Green + + +``` diff --git a/src/language-html/constants.evaluate.js b/src/language-html/constants.evaluate.js index 62eaafcb6..f93bbf605 100644 --- a/src/language-html/constants.evaluate.js +++ b/src/language-html/constants.evaluate.js @@ -35,6 +35,8 @@ const CSS_DISPLAY_TAGS = { // there's no css display for these elements but they behave these ways video: "inline-block", audio: "inline-block", + select: "inline-block", + optgroup: "inline-block", }; const CSS_DISPLAY_DEFAULT = "inline"; const CSS_WHITE_SPACE_TAGS = getCssStyleTags("white-space"); diff --git a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap index d57b097f8..598ef8c07 100644 --- a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap +++ b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap @@ -719,6 +719,156 @@ printWidth: 80 ================================================================================ `; +exports[`option.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = ` +====================================options===================================== +htmlWhitespaceSensitivity: "ignore" +parsers: ["html"] +printWidth: 80 + | printWidth +=====================================input====================================== +BlueGreenDark BlueDark Green + +BlueGreen + +=====================================output===================================== + + Blue + Green + + Dark Blue + Dark Green + + + + + Blue + Green + + +================================================================================ +`; + +exports[`option.html - {"htmlWhitespaceSensitivity":"strict"} format 1`] = ` +====================================options===================================== +htmlWhitespaceSensitivity: "strict" +parsers: ["html"] +printWidth: 80 + | printWidth +=====================================input====================================== +BlueGreenDark BlueDark Green + +BlueGreen + +=====================================output===================================== +BlueGreenDark BlueDark Green + +BlueGreen + +================================================================================ +`; + +exports[`option.html - {"printWidth":"Infinity"} format 1`] = ` +====================================options===================================== +parsers: ["html"] +printWidth: Infinity +=====================================input====================================== +BlueGreenDark BlueDark Green + +BlueGreen + +=====================================output===================================== + + BlueGreenDark BlueDark Green + + + + Blue + Green + + +================================================================================ +`; + +exports[`option.html - {"printWidth":1} format 1`] = ` +====================================options===================================== +parsers: ["html"] +printWidth: 1 + | printWidth +=====================================input====================================== +BlueGreenDark BlueDark Green + +BlueGreen + +=====================================output===================================== + + BlueGreen + Dark + BlueDark + Green + + + + + Blue + Green + + +================================================================================ +`; + +exports[`option.html format 1`] = ` +====================================options===================================== +parsers: ["html"] +printWidth: 80 + | printWidth +=====================================input====================================== +BlueGreenDark BlueDark Green + +BlueGreen + +=====================================output===================================== + + BlueGreen + Dark BlueDark Green + + + + + Blue + Green + + +================================================================================ +`; + exports[`pre.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = ` ====================================options===================================== htmlWhitespaceSensitivity: "ignore" diff --git a/tests/html/tags/option.html b/tests/html/tags/option.html new file mode 100644 index 000000000..1c308258c --- /dev/null +++ b/tests/html/tags/option.html @@ -0,0 +1,3 @@ +BlueGreenDark BlueDark Green + +BlueGreen