[Formatting Bug]: Bad HTML formatting

calebdw commented 1 year ago

Version

1.10.0

Template before formatting

<!DOCTYPE html>
<html>
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <title>
            Test Title
        </title>
    </head>
    <body
        onLoad="window.print();"
        style="margin: 0; padding: 0"
    >
        <div
            id="divPage"
            style="text-align: center; margin: 0 auto; width: 700px"
        >
            <?php echo $output; ?>
        </div>
    </body>
</html>

Template after formatting

<!DOCTYPE html>
<html>

<head>
    <meta
        http-equiv="Content-Type"
        content="text/html; charset=utf-8"
    />
    <title>
        Test Title
    </title>
</head>

<body
    onLoad="window.print();"
    style="margin: 0; padding: 0"
>
    <div
        id="divPage"
        style="text-align: center; margin: 0 auto; width: 700px"
    >
        <?php echo $output; ?>
    </div>
</body>

</html>

Expected Behaviour

Hello!

The plugin is messing up the indentation of the html, head and body should be indented and there shouldn't be newlines between the tags.

For reference, here is the same text formatted in a test.html file (using the default html parser, also note the doctype is converted to lower case):

<!doctype html>
<html>
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <title>Test Title</title>
    </head>
    <body
        onLoad="window.print();"
        style="margin: 0; padding: 0"
    >
        <div
            id="divPage"
            style="text-align: center; margin: 0 auto; width: 700px"
        >
            <?php echo $output; ?>
        </div>
    </body>
</html>

Perhaps it would be possible/easier to reuse the functionality from the default prettier html parser?

Thanks!

Relevant log output

No response

github-actions[bot] commented 1 year ago

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days

shufo commented 1 year ago

Added option --indent-inner-html and --extra-liners at https://github.com/shufo/prettier-plugin-blade/releases/tag/v1.11.0

 $  yarn run -s prettier __tests__/fixtures/runtimeConfig/indentInnerHtml/index.blade.php  --indent-inner-html --extra-liners
<html>
    <head>
        @section('header')
            <title>
                foo
            </title>
        @endsection
    </head>
    <body>
        <button className="prettier-class" id="prettier-id" onClick={this.handleClick}>
            Click Here
        </button>
    </body>
</html>

prettier config will be like

{
    "overrides": [
        {
            "files": ["*.blade.php"],
            "options": {
                "tabWidth": 4,
                "parser": "blade"
            }
        }
    ],
    "printWidth": 120,
    "tabWidth": 4,
    "indentInnerHtml": true,
    "extraLiners": ""
}

shufo / prettier-plugin-blade