Keep @media query CSS for responsive

[lepture]

For example:

<style>
h1 {
  font-size: 14px;
}

@media only screen and (max-width: 620px) {
  h1 {
    font-size: 16px;
  }
}
</style>
<h1>Hello</h1>

Should be converted to:

<style>
@media only screen and (max-width: 620px) {
  h1 {
    font-size: 16px;
  }
}
</style>
<h1 style="font-size:14px">Hello</h1>

The media query is used for responsive emails.

[Stranger6667]

Would keeping style tags be enough? Or its required to remove non-@media entries from styles?

[lepture]

@Stranger6667 Keeping the style tag would work. But it could be better to remove the non-@media styles. Just like the example I provided above. If the style is too large and contains many unused code, removing them could make the email size smaller.

If keeping the @media query is hard to implement. I suggest using a data-css-inline="keep" on <style> element:

<style>
h1 {
  font-size: 14px;
}
</style>

<style data-css-inline="keep">
@media only screen and (max-width: 620px) {
  h1 {
    font-size: 16px;
  }
}
</style>
<h1>Hello</h1>

[Stranger6667]

Mostly notes for myself.

Filtering on the @-rules should not be complicated, so the final API might be a config option that will enable keeping such rules (maybe just any @-rules?) + we'll need to validate the config, e.g. to prevent the simultaneous use of keep_style_tags=false and this new option.

The implementation itself is a new parser that will drop all regular declarations (in cssparser::DeclarationParser) and just keep all declared ones (in cssparser::AtRuleParser) - this could be used at the very end, during the serialization phase. So, if the new config option is enabled, then take the style tag content, parse it with this new parser, and write the filtered styles to the output buffer.

[Stranger6667]

FYI @lepture

I've implemented data-css-inline="keep" and it will be available in 0.13.0. I'd keep this issue open, as it would be clearly beneficial to implement the CSS filtering