testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Treat <select> and <optgroup> as inline-block for whitespace sensitivity (#8275)

Browse Source
This commit is contained in:
Georgii Dolzhykov authored and GitHub committed 2020-05-11 14:13:40 +03:00
1 parent ee46379ce9
commit ddd6001520
4 files changed
+183
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/html/pr-8275.md
+28
View File
@@ -0,0 +1,28 @@
#### Treat `<select>` and `<optgroup>` 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.
<!-- prettier-ignore -->
```html
<!-- Input -->
<select><option>Blue</option><option>Green</option><optgroup label="Darker"><option>Dark Blue</option><option>Dark Green</option></optgroup></select>
<!-- Prettier stable -->
<select
><option>Blue</option
><option>Green</option
><optgroup label="Darker"
><option>Dark Blue</option><option>Dark Green</option></optgroup
></select
>
<!-- Prettier master -->
<select>
<option>Blue</option>
<option>Green</option>
<optgroup label="Darker">
<option>Dark Blue</option>
<option>Dark Green</option>
</optgroup>
</select>
```
src/language-html/constants.evaluate.js
+2
View File
@@ -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");
tests/html/tags/__snapshots__/jsfmt.spec.js.snap
+150
View File
@@ -719,6 +719,156 @@ printWidth: 80
================================================================================
`;
exports[`option.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<select><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><option>Blue</option><option>Green</option></datalist>
=====================================output=====================================
<select>
<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">
<option>Blue</option>
<option>Green</option>
</datalist>
================================================================================
`;
exports[`option.html - {"htmlWhitespaceSensitivity":"strict"} format 1`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "strict"
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<select><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><option>Blue</option><option>Green</option></datalist>
=====================================output=====================================
<select
><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"><option>Blue</option><option>Green</option></datalist>
================================================================================
`;
exports[`option.html - {"printWidth":"Infinity"} format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: Infinity
=====================================input======================================
<select><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><option>Blue</option><option>Green</option></datalist>
=====================================output=====================================
<select>
<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">
<option>Blue</option>
<option>Green</option>
</datalist>
================================================================================
`;
exports[`option.html - {"printWidth":1} format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: 1
| printWidth
=====================================input======================================
<select><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><option>Blue</option><option>Green</option></datalist>
=====================================output=====================================
<select>
<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"
>
<option
>Blue</option
>
<option
>Green</option
>
</datalist>
================================================================================
`;
exports[`option.html format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<select><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><option>Blue</option><option>Green</option></datalist>
=====================================output=====================================
<select>
<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">
<option>Blue</option>
<option>Green</option>
</datalist>
================================================================================
`;
exports[`pre.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
tests/html/tags/option.html
+3
View File
@@ -0,0 +1,3 @@
<select><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><option>Blue</option><option>Green</option></datalist>