Giters

Automattic / juice

Juice inlines CSS stylesheets into your HTML source.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Some style not removed

zecka opened this issue · comments

commented

Hello,

I don't understand why some styles is not removed after inline css, even if I define "removeStyleTags" to "true"

Here is the juice function:

var style = `
.example-component__table {
  background-color: red;
}
@media only screen and (max-width: 600px) {
  .example-component__table {
    background-color: blue !important;
  }
}

.custom-btn {
  margin: auto;
}
.custom-btn__link {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Lato", Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
}
.custom-btn__center {
  padding: 0 20px;
  min-width: 120px;
  background-color: #ac8c5e;
}
`

var doc = `<html><head><style>${style}</style></head><body><div class="custom-btn">test</div></body></html>`

var inlinecss = juice(doc, {
  removeStyleTags: true,
  preserveMediaQueries: true,
});

And this is the render

<html><head><style>
@media only screen and (max-width: 600px) {
  .example-component__table {
    background-color: blue !important;
  }
}
.custom-btn__link {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Lato", Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
}
</style></head><body><div class="custom-btn" style="margin: auto;">test</div></body></html>

Why ".custom-btn__link" class isn't remove from style tag ?

Here is a reproductible example:
https://runkit.com/zecka/5fdb5d33a75bf5001327a02d

commented

@zecka Came across the same problem, and when I saw your issue with a class name ending in link as well I got curious. Took a look at the code for Juice and found that the logic for ignoring pseudo selectors is a bit greedy, it simply ignores any selectors containing one of the pseudo selectors anywhere. So since :link is an ignored pseudo selector it'll ignore any selector with the word "link" in it…

In our case we simply renamed our selector/class name to not use the word "link". But Juice should be patched to improve this pseudo selector detection. I don't have the time right now, but will try providing a patch later.

commented

Thank's for your answer, so i will rename all my css class to remove word "link". Or simply keep css class in document, because it's not really an hudge issue...