InlineCssPostProcessor overwrites default tag styles

[TwentyFourMinutes]

Since v4 the new InlineCssPostProcessor causes the default styles defined by mjml-net to be overwritten. I believe its caused on this line:

mjml-net/Mjml.Net.PostProcessors/InlineCssPostProcessor.cs

Line 37 in 4aa0c64

var currentStyle = element.Owner!.DefaultView.GetStyleCollection().GetDeclarations(element);

From what I can tell this more or less ignores all styles defined on the style= attribute. For example calling element.GetAttribute(TagNames.Style) will correctly return me word-break:break-word. Otherwise with the current implementation the whole InlineCssPostProcessor causes the whole HTML to be more or less broken.

Would be awesome if you could take a look at it :). Also thanks for maintaining this library, it's awesome!

[SebastianStehle]

Hi,

what do you mean with "default" styles?

[TwentyFourMinutes]

Things such as these

mjml-net/Mjml.Net/Components/Body/ColumnComponent.cs

Line 223 in 4aa0c64

.Style("word-break", "break-word");

I came to this conclusion, as texts in my email which are longer than 600px now overflow way outside their container. I then noticed that for example word-break: break-word is no longer present in the html at all when upgrading to v4.

[SebastianStehle]

Good point, I think it is easy to fix. Just don#t overwrite styles that already exist I guess (except they are important)

[TwentyFourMinutes]

@SebastianStehle I already gave it a shot with:

private static void InlineStyle(IElement element, IStyleCollection styleCollection)
{
    var currentStyle = styleCollection.GetDeclarations(element);

    if (!currentStyle.Any())
    {
        return;
    }

    var style = element.GetStyle();

    foreach (var property in currentStyle)
    {
        style.SetProperty(property.Name, property.Value, property.IsImportant ? CssKeywords.Important : null);
    }

However, I still had the issue that element.GetStyle() won't contain the word-break: break-word property 🤔

[SebastianStehle]

Weird, perhaps there is another method that helps?

[SebastianStehle]

I am not sure if I understand the bug tbh. I have this test:

<mjml-test>
  <mj-head>
    <mj-style inline=""inline"">
      .red-text div {
        color: red !important;
        font-size: 1.5rem;
        font-weight: light;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-raw>
      <div class=""red-text"">
        <div style=""font-weight: bold""></div>
      </div>
    </mj-raw>
  </mj-body>
</mjml-test>

Here font-weight is not overriden. Because GetDeclarations actually calculates the styles in the correct logic. How would that override styles from mjml?

[TwentyFourMinutes]

@SebastianStehle look at this modified variant of the the test

    [Fact]
    public async Task Should_render_inline()
    {
        var source = @"
<mjml-test>
  <mj-head>
    <mj-style inline=""inline"">
      .red-text div {
        color: red !important;
        font-size: 1.5rem;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-raw>
      <div class=""red-text"">
        <div style=""font-weight: bold; word-break: break-word;""></div>
      </div>
    </mj-raw>
  </mj-body>
</mjml-test>
";

        var (result, _) = await TestHelper.RenderAsync(source, new MjmlOptions
        {
            PostProcessors =
            [
                AngleSharpPostProcessor.Default
            ],
            Beautify = true
        }, helpers: [new StyleHelper()]);

        AssertHelpers.HtmlFileAssert("Components.Outputs.StyleInline.html", result);
    }

I just added the word-break: break-word; style, which I guess simulates what this does:

mjml-net/Mjml.Net/Components/Body/ColumnComponent.cs

Line 223 in 4aa0c64

.Style("word-break", "break-word");

And the test is still green! I can also verify that word-break: break-word; is no longer present in the result.Html`.

I guess it has something to do with the css property itself then?

[SebastianStehle]

For me it looks like it just ignores most CSS properties.

[SebastianStehle]

I have tried to debug it in AngleSharp and created a bug report there. Lets see what happens

[TwentyFourMinutes]

@SebastianStehle Thank you very much. :)