Configure whitespace display css for custom components

--html-whitespace-sensitivity css is nice when working with native HTML as it sets the display status properly (most of the time)

However, for custom components, it seems to always err on the side of caution and defaults to inline.

It would be nice if it were possible to set default display for custom JSX/NG/Vue? components. This would be nice for codebases where many components may be used in place of HTML elements.

Prettier 1.15.1 Playground link

--parser angular

Input:

<div>
  Something
</div>

<span>
  Something
</span>

<custom-inline>
  Something
</custom-inline>

<custom-block>
  Something Else
</custom-block>

<!-- display: block -->
<custom-block>
  Something Else
</custom-block>

<!-- it would be nice to set custom-block as "block" always -->

Output:

<div>Something</div>

<span> Something </span>

<custom-inline> Something </custom-inline>

<custom-block> Something Else </custom-block>

<!-- display: block -->
<custom-block>Something Else</custom-block>

<!-- it would be nice to set custom-block as "block" always -->

[mashpie]

There might be tons of examples on custom elements that now get treated as standard html, but should be not - not an easy task (examples on vue-i18n):

Playground vue-i18n as inline-yaml

Playground vue-i18n as inline-json

in that case it could help to specify desired lang as

<i18n lang="yaml">
en:
  welcome: Welcome!
de:
  welcome: Willkommen!
</i18n>

or

<i18n lang="json">
{
    "en": {
        "welcome": "Welcome!"
    },
    "de": {
        "welcome": "Willkommen!"
    }
}
</i18n>

still there are a few more special cases imaginable (esp. as some packages/libs might not stick to official html/css specs), which makes me think a simple --html-ignore: i18n,custom-block option is the only common workaround and maybe even fastes to implement?

// 2-cents-end

[thorn0]

@evilebottnawi It’s already strict (inline) for custom (unknown) elements. So this issue is about your second step.