cssutils icon indicating copy to clipboard operation
cssutils copied to clipboard

Incorrect handling of @font-face nested in conditional At-rules (@media)

Open LanetheGreat opened this issue 2 years ago • 1 comments

According to MDN's documentation on At-Rules Nesting, @font-face is allowed to be nested within conditional At-Rules such as @media but this library flags that as an error and strips it from the source CSS during parsing in these 2 spots:

  1. https://github.com/jaraco/cssutils/blob/fa93b0ae9f0599e327468778218598e875cb0a77/cssutils/css/cssmediarule.py#L190-L207
  2. https://github.com/jaraco/cssutils/blob/fa93b0ae9f0599e327468778218598e875cb0a77/cssutils/css/cssmediarule.py#L320-L332

Found this out while parsing <style> tags from ConstantContact's email template previews to minify the CSS because they appear to use nested rules like this:

@media screen {
    @font-face{
        font-family: "Open Sans";
        font-style: normal;
        font-weight: 400;
        src: local("Open Sans Regular"), local("OpenSans-Regular"), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format("woff2");
        unicode-range: u+0000-00ff,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215;
    }
    @font-face{
        font-family: "Merriweather";
        font-style: normal;
        font-weight: 400;
        src: local("Merriweather Regular"), local("Merriweather-Regular"), url(https://fonts.gstatic.com/s/merriweather/v19/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2) format("woff2");
        unicode-range: u+0000-00ff,u+0131,u+0152-0153,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2212,u+2215;
    }
}

Errors:

ERROR   CSSMediaRule: This rule is not allowed in CSSMediaRule - ignored: @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }. [6:18: @font-face]
ERROR   CSSMediaRule: This rule is not allowed in CSSMediaRule - ignored: @font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 400; src: local('Merriweather Regular'), local('Merriweather-Regular'), url(https://fonts.gstatic.com/s/merriweather/v19/u-440qyriQwlOrhSvowK_l5-fCZMdeX3rg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }. [6:376: @font-face]

LanetheGreat avatar Jan 29 '23 07:01 LanetheGreat

Thanks for the report. Would you be willing to devise a solution and send a PR?

jaraco avatar Jun 09 '23 01:06 jaraco