[BUG] background image quoted url turned into html entities

[haxxxton]

Some older email clients only resepect background image urls if the url is quoted (ie. background-image: url(./foo.jpg) will not work, but background-image: url("./foo.jpg") will). When using quoted urls in provided styles, the output from email export replaces either double quotes " or single quotes ' with html entities (" and ' respectively), breaking the inline style.

Steps to reproduce:

• create a template with an inline style that contains a style that includes backgroundImage with a quoted url. eg. backgroundImage: "url('path/to/my/image.jpg')"
• run email export
• note that style is replaced with background-image: url('path/to/my/image.jpg')

[heysujal]

@zenorocha Can I work on this issue ? Can you guide me how to get started with this project ?

[bukinoshita]

Feel free to grab @heysujal

[heysujal]

@bukinoshita When I make a react-email-stater using npx create-email@latest then it keeps showing Generating emails preview and keeps loading.

Can you guide me how to go about fixing this issue once I run this in local ?

[bastiaanv]

@heysujal Can you try to place the react-email-starter-folder in a directory without spaces? Currently, the project is placed inside the New folder (2), I am guessing that the whitespaces in the path is the problem

[heysujal]

@bastiaanv thank you , I am able to run it my local system . Now, I am working to find a fix for the bug.

[heysujal]

@haxxxton I am able to reproduce the bug now. When the inline styles has url enclosed in double quote " like backgroundImage: 'url("http://localhost:3000/static/notion-logo.png")' then it does not produce any html entities.
But if we use single quote ' for the url something like this backgroundImage: "url('http://localhost:3000/static/notion-logo.png')" then the single quotes are replaced by html entities.
So, in my case I am only able to reproduce the bug when background image property is used in this way
backgroundImage: "url('http://localhost:3000/static/notion-logo.png')" .
While this is a bug that need to be fixed it still doesn't affect the output for me as I am able to export email which is same in both cases.
Let me know your thoughts on this.

[haxxxton]

@heysujal , i dont find that myself. when i do something with double quotes i end up with html entities like " instead.

For example:

// input
<div style={{ background: `no-repeat center bottom/contain url("${baseUrl}/foo.jpg") #000` }} />

<!-- output -->
<div style="background:no-repeat center bottom/contain url(&quot;https://example.com/foo.jpg&quot;) #000000"

This then breaks the rendered output such that no background image is displayed

[heysujal]

I think the string template literal that you are using is causing the problem which I understand, it will be used when we have to use variables in a string. I only tested using simple quote outside url and double quote for enclosing the url which does not break the output.
Now I will try to reproduce bug using template literal the way you mentioned in above comment.