<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 Format Document replaces raw <style> with <mj-style> #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:

vscode-mjml/src/helper.ts

Line 83 in 6417f0b

export function beautifyHTML(mjml: string): string | undefined {

Issues I see:

• the regex in line 86 fails to match the <mj-style> if it contains a < or >

  vscode-mjml/src/helper.ts

  Line 86 in 6417f0b

  new RegExp(/<.*mj-style[^>]*>(?:[^<>]+)<.*\/.*mj-style>/, 'gmi'),

• same for

  vscode-mjml/src/helper.ts

  Line 96 in 6417f0b

  new RegExp(/<.*style[^>]*>(?:[^<>]+)<.*\/.*style>/, 'gmi'),

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