Automattic / juice

Juice inlines CSS stylesheets into your HTML source.
MIT License
3.12k stars 221 forks source link

Juice not removing all <style> #470

Open phstc opened 1 year ago

phstc commented 1 year ago

I'm trying to remove all <style> from an HTML, but juice is keeping some out.

If I paste the HTML on the demo website it removes all <style> 🤷‍♂️

I'm using juice 9.1.0.

Sample RunKit https://runkit.com/embed/fjqdnm3ckkdv (change the output from Rendered HTML to Full Text)

const fs = require('fs');
const juice = require('juice');

const rawHtml = `
  <!DOCTYPE html>
  <html>
  <head>
    <style>
a:hover {
  color: #000 !important;
}
a:active {
  color: #000 !important;
}
a:visited {
  text-decoration: none;
  color: #00c8b4 !important;
}
@media only screen and (max-width: 600px) {
  table[class="body"] img {
    height: auto !important;
    width: auto !important;
  }
}

    </style>
  </head>
  <body>
    Test!!!
  </body>
  </html>
`;

const juiceHtml = juice(rawHtml)
console.log(juiceHtml)

/*

OUTPUT:

  <!DOCTYPE html>
  <html>
  <head>
    <style>
a:hover {
  color: #000 !important;
}
a:active {
  color: #000 !important;
}
a:visited {
  text-decoration: none;
  color: #00c8b4 !important;
}
@media only screen and (max-width: 600px) {
  table[class="body"] img {
    height: auto !important;
    width: auto !important;
  }
}
</style>
  </head>
  <body>
    Test!!!
  </body>
  </html>

*/

Any ideas on what it could be?

I did try with the same options as on the demo website, but still, it did not work. The most important option is removeStyleTags, but that's true by default.

phstc commented 1 year ago

Great troubleshooting by Marco on StackOverflow https://stackoverflow.com/a/76829914/464685

Apparently, the webversion of juice uses an extremely outdated version which gives a different behaviour because a different CSS parser is used.

This seems to be a big regression compared with the demo website. The only version I could reproduce the demo website output (not keeping style tags) was version 1.0.0.