Braces in Property Value breaks all following Styles

[KiwiKilian]

Using satori@0.3.1 with utlrahtml@1.1.0 using this HTML:

<style>
    .root {
        background: linear-gradient(135deg, #ef629f, #eecda3);
        display: flex;
        width: 100%;
        height: 100%;
    }
</style>

<div class="root">
    <div style="background: linear-gradient(135deg, #ef629f, #eecda3); display: flex;"></div>
</div>

Outputs the following:

{
  "type": "div",
  "props": {
    "style": {
      "display": "flex",
      "flexDirection": "column",
      "width": "100%",
      "height": "100%"
    },
    "children": [
      null,
      {
        "type": "div",
        "props": {
          "class": "root",
          "style": {
            "background": "linear-gradient(135deg, #ef629f, #eecda3)",
            "display:flex": "",
            "width:100%": "",
            "height:100%": ""
          },
          "children": [
            null,
            {
              "type": "div",
              "props": {
                "style": {
                  "background": "linear-gradient(135deg, #ef629f, #eecda3)",
                  "display: flex": ""
                },
                "children": []
              }
            }
          ]
        }
      }
    ]
  }
}

All delcarations after a linear-gradient are broken. Occurs for inline and inlined styles.

It looks like the braces (...) are breaking all the following declartions. Styles before braces are fine and kept properly working. See this (no proper CSS):

<style>
    .root {
        display: flex;
        background: ();
        width: 100%;
        height: 100%;
    }
</style>

<div class="root"></div>

Result:

{
  "type": "div",
  "props": {
    "style": {
      "display": "flex",
      "flexDirection": "column",
      "width": "100%",
      "height": "100%"
    },
    "children": [
      null,
      {
        "type": "div",
        "props": {
          "class": "root",
          "style": {
            "display": "flex",
            "background": "()",
            "width:100%": "",
            "height:100%": ""
          },
          "children": []
        }
      }
    ]
  }
}

[natemoo-re]

Thanks for opening an issue! I was using some naive logic to parse styles, but have updated this to use stylis which is much more battle-tested.

[KiwiKilian]

Thank you very much for the fix and this util! Makes using satori much easier. 🚀