Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error when encoded quotes are used in html attribute #482

Open
szaleq opened this issue Jul 19, 2024 · 2 comments
Open

Error when encoded quotes are used in html attribute #482

szaleq opened this issue Jul 19, 2024 · 2 comments

Comments

@szaleq
Copy link

szaleq commented Jul 19, 2024

I have some HTML which is a result of other processing and already contains some inline styles. I'm then using juice to inline some global CSS, as the output must be used as an email content. I'm using Google Fonts loaded by my CMS, some of them are quoted - produced CSS looks like this: font-family: "One Sans", sans-serif; which is a valid CSS. When inlined into a div style attribute, it gets encoded:

<div style="font-family:&quot;Open Sans&quot;, sans-serif;"></div>

This causes error in Juice, as it does not decode the HTML entities and instead tries to parse it as css rules. Here are the objects from juice parsing:

{
  prop: Property {
    prop: 'font-family',
    value: '&quot',
    selector: Selector {
      text: '<style>',
      spec: [Array],
      styleAttribute: true,
      tokens: [Expression]
    },
    priority: 0,
    additionalPriority: [ 1, 5 ]
  }
}
{
  prop: Property {
    prop: undefined,
    value: 'OpenSans&quot',
    selector: Selector {
      text: '<style>',
      spec: [Array],
      styleAttribute: true,
      tokens: [Expression]
    },
    priority: 0,
    additionalPriority: [ 1, 23 ]
  }
}

And it fails with the error: Cannot read properties of undefined (reading 'indexOf').
2p84jCbJ3V

Minimal reproduction

Just create an input.html file and paste this code:

<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
			div {
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<div style="font-family:&quot;Open Sans&quot;, sans-serif;"></div>
	</body>
</html>

Then run:

npm run juice input.html output.html

And see the error.

Solution

Juice should decode HTML entities after reading an attribute value and before parsing it to CSS rules. This way it could convert &quot; (and other such strings) back to the proper double-quote character (") so that it woudn't contain any semi-colons and could be properly parsed into CSS.
@szaleq szaleq changed the title Error then encoded quotes used in html attribute Error when encoded quotes are used in html attribute Jul 19, 2024
@Glavin001
Copy link

I just experienced this bug. Is there any progress or anyone actively working on it? If not, I'd be happy to contribute a fix, however, I am new to contributing to Juice therefore I'd appreciate some guidance first. Thank you!

@amedve
Copy link

amedve commented Sep 28, 2024

I use v9.1.0, and it happens for me after dependencies update, too.

Looks like the issue is in cheerio v1.0.0. Here is the related issue: cheeriojs/cheerio#4045

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Glavin001 @amedve @szaleq