natemoo-re/satori-html

Linebreaks in styles breaks output

KiwiKilian opened this issue ยท 0 comments

First of all, thanky you very much for this helpful library!

This HTML with styles on separate lines

<div
  style="
    background-color: white;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter';
    font-weight: 700;
  "
>
  <div
    style="
      flex-grow: 1;
      margin: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: black;
      color: white;
      text-align: center;
      font-size: 80px;
    "
  >
    Hello World! ๐Ÿ‘‹
  </div>
</div>

gives this broken output

{
  "type": "div",
  "props": {
    "style": {
      "display": "flex",
      "flexDirection": "column",
      "width": "100%",
      "height": "100%"
    },
    "children": [
      {
        "type": "div",
        "props": {
          "100": "%;",
          "700": ";",
          "background-color:": "",
          "white": ";",
          "height:": "",
          "width:": "",
          "display:": "",
          "flex": ";",
          "align-items:": "",
          "center": ";",
          "justify-content:": "",
          "font-family:": "",
          "font-weight:": "",
          "style": {},
          "children": [
            null,
            {
              "type": "div",
              "props": {
                "1": ";",
                "flex-grow:": "",
                "margin:": "",
                "80px": ";",
                "display:": "",
                "flex": ";",
                "align-items:": "",
                "center": ";",
                "justify-content:": "",
                "background-color:": "",
                "black": ";",
                "color:": "",
                "white": ";",
                "text-align:": "",
                "font-size:": "",
                "style": {},
                "children": "Hello World! ๐Ÿ‘‹"
              }
            }
          ]
        }
      }
    ]
  }
}

Everything works fine, when the styles are on one line:

<div style="background-color: white; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; font-family: Inter; font-weight: 700;">
  <div style="flex-grow: 1; margin: 80px; display: flex; align-items: center; justify-content: center; background-color: black; color: white; text-align: center; font-size: 80px;">
    Hello World! ๐Ÿ‘‹
  </div>
</div>