xmlMode and tag literal in CSS comments

chrstphrknwtn commented 6 years ago

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>

jrit commented 6 years ago

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.

chrstphrknwtn commented 6 years ago

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.

jrit commented 6 years ago

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

Automattic / juice

xmlMode and tag literal in CSS comments #317