我试图使用juice 9.1.0从HTML中删除所有<style>，但juice保留了一些。
如果我将HTML粘贴到the demo website上，它会删除所有<style>。
我使用以下测试代码：
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>
*/字符串
示例RunKit https://runkit.com/embed/fjqdnm3ckkdv（将输出从呈现的HTML更改为全文）
我尝试了与演示网站上相同的选项，但仍然不起作用。最重要的选项是removeStyleTags，但默认情况下是true。
// removeStyleTags is true by default
const juiceHtml = juice(rawHtml, { removeStyleTags: true })
// exactly as the demo website
const juiceHtml = juice(rawHtml, {
applyStyleTags: true,
removeStyleTags: true,
preserveMediaQueries: true,
preserveFontFaces: true,
applyWidthAttributes: true,
applyHeightAttributes: true,
applyAttributesTableElements: true,
inlinePseudoElements: false,
xmlMode: false,
preserveImportant: false
})型
这些都没用。
1条答案
按热度按时间wlsrxk511#
TLDR：
显然，juice的网络版本使用了一个非常过时的版本，因为使用了不同的CSS解析器，所以它的行为不同。
我最初的怀疑是web和nodejs版本中的一些依赖关系是不同的。
我可以通过查看web版本和nodejs-version的源代码来证实这一点：
网络版来源：
字符串
最新版本的nodejs包的来源：
型
您可以看到最新的nodejs版本使用名为
mensch的包，而web版本使用名为cssom的包。从函数签名中也可以清楚地看出，“网络版本”使用了果汁包的不同版本。
通过
juice包的源代码挖掘，似乎web版本使用的是一个 * 非常 * 旧的版本2.0.0。您可以通过比较
3.0.0版本（这是第一个使用mensch而不是cssom的版本）和2.0.0版本的文件lib/utils.js来确认这一点。像这样安装过时的
2.0.0版本：npm install --save juice@2个修复（即提供与Web中相同的行为）问题。
我会在他们的存储库上打开一个bug报告，说他们的在线演示使用了一个过时的，可能是坏了的juice版本。