Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

With Angular templating, <script> and <style> sections are formatted incorrectly #2260

Open
gergely-gyorgy-both opened this issue Mar 25, 2024 · 2 comments
Open

With Angular templating, <script> and <style> sections are formatted incorrectly #2260

gergely-gyorgy-both opened this issue Mar 25, 2024 · 2 comments

Comments

@gergely-gyorgy-both
Copy link
Contributor

Description

When using angular templating (with indent_handlebars) and trying to format a .html file which has <style> tags with media query inside them, or <script> tags with a decorator, the code is not being formatted correctly.

Input

<!doctype html>
<html lang="en">

<head>
    <title>Some title</title>
    <script>
    @log
    greet() {
    console.log("Hello,world!");
    }
    </script>
    <style type="text/css">
    @media only screen and (min-width:480px) {
    .mj-column-per-100
    {
    width: 100% !important;
    max-width: 100%;
    }
        }
    </style>
</head>

<body>
    @if(condition) {
        <div>
            Conditional div
        </div>
    }

</body>

</html>

Expected Output

<!doctype html>
<html lang="en">

<head>
    <title>Some title</title>
    <script>
        @log
        greet() {
            console.log("Hello,world!");
        }
    </script>
    <style type="text/css">
        @media only screen and (min-width:480px) {
            .mj-column-per-100 {
                width: 100% !important;
                max-width: 100%;
            }
        }
    </style>
</head>

<body>
    @if(condition) {
        <div>
            Conditional div
        </div>
    }

</body>

</html>

Actual Output

<!doctype html>
<html lang="en">

<head>
    <title>Some title</title>
    <script>
    @log
    greet() {
            console.log("Hello,world!");
    }
    </script>
    <style type="text/css">
    @media only screen and (min-width:480px) {
            .mj-column-per-100
            {
            width:
            100%
            !important;
            max-width:
            100%;
    }
        }
    </style>
</head>

<body>
    @if(condition) {
        <div>
            Conditional div
        </div>
    }

</body>

</html>

Steps to Reproduce

This can be reproduced by opening Beautifier IO, check if version is v1.15.1. The Additional Settings (JSON) should look like the following:

{ 
    "indent_handlebars": true,
    "templating": ["angular"]
}

Environment

Settings

{
  "indent_size": "4",
  "indent_char": " ",
  "max_preserve_newlines": "5",
  "preserve_newlines": true,
  "keep_array_indentation": false,
  "break_chained_methods": false,
  "indent_scripts": "normal",
  "brace_style": "collapse",
  "space_before_conditional": true,
  "unescape_strings": false,
  "jslint_happy": false,
  "end_with_newline": false,
  "wrap_line_length": "0",
  "indent_inner_html": false,
  "comma_first": false,
  "e4x": false,
  "indent_empty_lines": false,
  "indent_handlebars": true,
  "templating": [
    "angular"
  ]
}
@gergely-gyorgy-both
Copy link
Contributor Author

This issue was created based on this comment.

@bitwiseman I see that in VSCode, an option will be added to specifically turn on angular templating. With this in mind, I suggest we remove the indent_handlebars condition for the control flow formatting, so the control flow tokens will always be indented if the angular templating option is set. It was added to prevent formatting conflicts, but by disabling angular templating by default, and adding an option to enable it manually (in VSCode), keeping indent_handlebars condition for control flow tokens is kind of obsolete. It was a little bit weird to include it in the first place (my mistake).

I started fixing this issue, I just have to write some tests meanwhile, I am waiting for your reply and then if you'd like me to, I can create a PR.

@bitwiseman
Copy link
Member

@gergely-gyorgy-both

I think you included the indent_handlebars behavior at my suggestion, in an attempt to limit risk.

Yes, please remove.

gergely-gyorgy-both added a commit to gergely-gyorgy-both/js-beautify that referenced this issue Mar 29, 2024
@gergely-gyorgy-both
Fixed beautifier#2260 - <style> and <script> tags indentation if also…
d5176ef 
… indenting angular control flows
@gergely-gyorgy-both gergely-gyorgy-both mentioned this issue Mar 29, 2024
Open
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bitwiseman @gergely-gyorgy-both