Linebreaks in styles breaks output
KiwiKilian opened this issue ยท 0 comments
KiwiKilian commented
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>