Some spacing and line break issues after 4.7.3

[evrpress]

• Maizzle Version: 4.7.3

Thanks for the quick update. I've noticed a small "issue" when using ',' in style blocks:

with 4.7.2

body, .body {
        ...
}

@media screen {
            .screen-font-quicksand {
                    font-family: 'Quicksand', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
            }
      }

with 4.7.3

body,
.body {
    ...
}
@media screen {
.screen-font-quicksand {
    font-family:
    "Quicksand",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif !important;
}

If possible line-breaks should not get changed otherwise we get a high column of selectors (like from them)

The <pre> tags are also off:

with 4.7.2 (and my fix)

                <pre>

        Content

                </pre>

with 4.7.3

                <pre>

        Content

    </pre>

I'm aware that <pre> tags preserve tabs and spaces so maybe the miss-alignment is preferable.

[cossssmin]

We can fix that with yet another regex, sure.

It's really strange how prettier handles these. For example I tested this tailwind.config.js:

fontFamily: {
  quicksand: ['"Quicksand"', 'ui-sans-serif', 'system-ui', '-apple-system', '"Segoe UI"', 'sans-serif'],
  serif: ['"Quicksand"', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
},

With this HTML, just to have both selectors in the same @media query:

<div class="sm:font-quicksand sm:font-serif"></div>

... and I got this:

<style>
  @media (max-width: 600px) {
    .sm-font-quicksand {
      font-family:
        "Quicksand",
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif !important;
    }
    .sm-font-serif {
      font-family: "Quicksand", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
    }
  }
</style>

The moment I removed '-apple-system', from the stack, it didn't reformat it anymore:

<style>
  @media (max-width: 600px) {
    .sm-font-quicksand {
      font-family: "Quicksand", ui-sans-serif, system-ui, "Segoe UI", sans-serif !important;
    }
    .sm-font-serif {
      font-family: "Quicksand", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
    }
  }
</style>

The <pre> thing I'd just leave as-is, it's easy to screw up indentation for code inside that.

[cossssmin]

I've thought about this and because we've been constantly fighting prettier lately I've decided to revert this feature release and go back to pretty, which is what we had in v4.6.x.

Sure, it doesn't indent MSO comments, but neither does prettier all the time (i.e. MSO comments in nested components). And it gets a lot more stuff right out-of-the-box, and it's also a bit faster.

This whack-a-mole where we keep hitting prettier with custom regexes that could have unpredictable side effects is just not worth the effort, I'd very much rather put that into other things, like the next major release.

I'll revert today and publish a patch release, sorry about the hassle.

[cossssmin]

Released v4.7.4 which now uses the pretty library like we had in v4.6.x (docs).