g-plane / markup_fmt

Configurable HTML, Vue, Svelte, Astro, Angular, Jinja, Twig, Nunjucks and Vento formatter with dprint integration.
https://dprint.dev/plugins/markup_fmt/
MIT License
100 stars 9 forks source link

`markup_fmt` considers element ends as whitespace #27

Closed horo-fox closed 4 months ago

horo-fox commented 4 months ago

I was running this over my astro site (because their prettier plugin doesn't work well with expressions) and I noticed one deviation that's weird: this turned <b>part1</b>@part2.com into <b>part1</b>\n@part2.com. This is within a <p> tag, so whitespace is significant: therefore, this turns what was an copy-able email address into part1 @part2.com.

My site is open source: https://github.com/horo-fox/horo.services, the regression is in src/pages/index.astro. My only configuration is (in dprint.json):

{
    "indentWidth": 4,
    "excludes": ["**/node_modules", "**/*-lock.json"],
    "plugins": [
        "https://plugins.dprint.dev/typescript-0.91.1.wasm",
        "https://plugins.dprint.dev/json-0.19.3.wasm",
        "https://plugins.dprint.dev/markdown-0.17.1.wasm",
        "https://plugins.dprint.dev/g-plane/markup_fmt-v0.9.0.wasm"
    ]
}
g-plane commented 4 months ago

I can't reproduce: https://dprint.dev/playground/#code/DwBwfMBGYghgTgFwIzAPTQAJyQJgHQDGA9gLbrhA/config/N4KABGBEAOBOCWA7ALgdXgE2QC0gLjAEYAGAGnCgFcBnAUwBUBDAI2vzADNGAbO8iSEgy0U6LLgIAmflG5JaAIVi1GAa3aRuHSDMgBHSgHtktNgUgZDlZt1o6KkDodgBbRsgDChly5HIznDx8DtQAxgjQyACSiMIo7Fy8tLrUyACetjFxyAlByQ6h3IbUSADmSoyhqrTIAMqMvgAy8rlJuoXFZUylzYiKymoAYs4Aoi6RaRoc8Dm6cLQctLAAgsjIsNS1Zba9dgSJwQIA7tgzptCVtLUiJcjwAG4zk+ah1Gy6lqHp0LQA0rRpI7ODAeRh0DSUaA-WD2ASpBBfWr3WjcEyrdatOggAC+ICAA/plugin/BYFxAcGcC4HpfAGwK4HMCWA7SA6AJuAE5Yj4CmAbrKgLRICGmZsAtvYQNbLgD6AZixA0KABhwBOHGIDu9SCyA

horo-fox commented 4 months ago

Didn't know about that site!

I trimmed down my repo to this:

https://dprint.dev/playground/#code/LAKAPAsghglgdgGSgTwPYFcAuA+UACAvMAExgDc8BjAGygGc6BeAIgHMAnGYgWktTkyw4AU3bNcIQlKJR2mGDWETpKosWGCY1OstV6wddAFsjs5Ngip2wvFABGGTHiPCAhGAD0hk2d16VYAAOfv76UHgAFtYAZizo7NTM+KEpBNh8AsICdJ5Qyakq2AB0YHbYdrQRnmUAAhVQEUX5BZ7Bzfoe6praIVK5cgrUSs2epGQSntDwSGhYEkA/config/N4KABBYEQJYHYBMCmcAuB1GDUAsoC4wAWAGnEiiQA8BjAGwFdkBnAsAbSgCouB6OAPbIA+gFshDOklYloPXlwC0dATQDWAOgBWzAXCgBdMpGgAHRgHN4rQu3ImIUHKlSnm+Xr3MMrcZhoRTACd4VACkADdeVABPU2kaENNURQAGDQBOAEYNHIB3AENmUShjB0dnV3dPb19-QJC0cKidPTTcjI0AZg1C4tL7BycXNw8vS2sA4NDm3lECoLUEATy4dqyAdlzeopKy8uGqsdrJhpnkKItFcwK4JDmFtQZTYQAzURSI9M70vpLBgwgAC+QA/plugin/BYFxAcGcC4HpfAGwK4HMCWA7SA6AJuAE5Yj4CmAbrKgLRICGmZsAtvYQNbLgD6AZixA0KABhwBOHGIDu9SCyA

g-plane commented 4 months ago

<p> tag isn't whitespace-sensitive: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p , but formatting output can be optimized.

horo-fox commented 4 months ago

Ah, maybe whitespace-sensitive is the wrong term. I was just referring to how when you add a newline in a <p> tag (with white-space: normal) the browser acts like there's a space.

Thanks for the plugin, by the way!

g-plane commented 4 months ago

What about the output below?

<MainLayout>
  <div class="grid-container">
    <article>
      <details>
        <summary>More about me!</summary>
        <p>
          <a href="url">contents</a>.<b>blah</b>@blah.
        </p>
      </details>
    </article>
  </div>
</MainLayout>

If it looks good, I will fix as this.

horo-fox commented 4 months ago

Looks fine like that, yeah!

g-plane commented 4 months ago

Please consider recommending this plugin to more people, especially to Astro community as it works better than "prettier-plugin-astro" with expressions. A big problem of this plugin is that it's not widely known and popular enough.

horo-fox commented 4 months ago

Thanks! FYI I think that the commit seems a bit off (e.g. <p><b>a</b>\nc</p> is essentially <p><b>a</b> c</p>, but both are different than <p><b>a</b>c</p>. e.g. keeping whitespace or removing it is important (though the number of whitespaces doesn't)).

However it's off in a better way than it was before: it seems to try hard to remove whitespace, which can easily be readded via an expression {" "}. And it works for my needs.