<mj-style> formatting goes crazy when the css contains '<' or '>'

[tennox]

Expected behavior

CSS inside <mj-style> can use < and > characters as expected, e.g.

<mj-style>
    .foo > a {
        color: black;
        content: "something with < or >";
    }
    /* smiley face :-< */

Actual behavior

• everytime I save/format when the css contains a > or <, the formatting breaks & does not indent (probably formats as text?)
• when I save/format when the css contains a <, additionally everything after that up to </mj-style> is formatted in a single line
• ... and on an the next format the <mj-style> is replaced by <style> (as in #25)

Steps to reproduce the problem

1. Copy the below code sample into VSCode
2. Run MJML: Beautify

Code sample

<mjml>
    <mj-head>
        <mj-style>
            p > a {
              color: #002435;
            }
        </mj-style>
        <mj-style>
            /* < */
        </mj-style>
    </mj-head>
</mjml>

Specifications

• VS Code version: VSCodium 1.72.1
• MJML extension version: v1.0.5
• Operating system and version: Fedora Linux x64 5.19.14-300.fc37.x86_64

Other information

Managed to work around the issue using:

<!-- beautify ignore:start -->
<mj-style>
  ...
</mj-style><!-- beautify ignore:end -->

[tennox]

I think the issue (and #25) lies in this function's logic: https://github.com/mjmlio/vscode-mjml/blob/6417f0be61399da38750f2b007633975a6aeaf2f/src/helper.ts#L83

Issues I see:

• the regex in line 86 fails to match the <mj-style> if it contains a < or > https://github.com/mjmlio/vscode-mjml/blob/6417f0be61399da38750f2b007633975a6aeaf2f/src/helper.ts#L86
• same for https://github.com/mjmlio/vscode-mjml/blob/6417f0be61399da38750f2b007633975a6aeaf2f/src/helper.ts#L96

Possible workaround is using lazy / non-hungry matchers and ditch the [<>]: <.*?style[^>]*?>(?:.+?)<.*?\/.*?style> See demo

Parsing HTML via RegEx is known to break hell loose