juice
juice copied to clipboard
Automattic
xmlMode and tag literal in CSS comments
node v10.11.0 juice v5.0.0
Attempted to reproduce on tonic / RunKit: https://runkit.com/embed/1miy61szoz0h
CSS comments containing HTML tag literals result in mangled markup (see the </div> following the style declaration) and no inlining.
const juice = require('juice');
const options = {
xmlMode: true
};
const html = `<!DOCTYPE html>
<html>
<head>
<style>
/* <div> Tag literal in comment */
div {
color: red;
}
</style>
</head>
<body>
<div>Hello world!</div>
</body>
</html>
`;
console.log(juice(html, options));
returns
<!DOCTYPE html>
<html>
<head>
<style>
/* <div> Tag literal in comment */
div {
color: red;
}
</div></style>
</head>
<body>
<div>Hello world!</div>
</body>
</html>
hmmm, I wonder if this is a bug in juice or in a dependency, or if it is really a bug at all. Once you put it into XML mode, I feel like everything should be valid XML and a simple fix might be to change the comment so the tag is self-closed, but I have not checked that.
I think it's a bug in the sense that juice began failing silently; CSS inlining working perfectly fine, then I add an opening <div> to a CSS comment and now HTML is mangled and styles are not inlined.
- Using a closing
</div>in a comment fixes the issue. - Using and self closing
<div/>results in the same error.
Intuitively, the content of a comment can be anything, including XML-like text, and should be reliably ignored.
ok, fair enough. I'm still not sure offhand where this transform is happening, but I expect it is in a dependency somewhere and probably requires a PR to that dep or a workaround in juice