AttributeError: 'CSSMediaRule' object has no attribute 'style' in premailer

Question

I was trying to transform the following nested media query CSS with premailer.

<style type="text/css">
    @media (prefers-color-scheme: dark) {

      .textPrimary {
        color: #E2E2E2 !important;
      }

      @media (max-width: 630px) {

        body,
        .footerContainer {
          background-color: #1E1E1E !important;
        }
      }
    }
</style>

---

I'm having trouble with followig error:

html = instance.transform(html, pretty_print=False)
  
File "/usr/local/lib/python3.10/dist-packages/premailer/premailer.py", line 414, in transform
    style.text = self._css_rules_to_string(these_leftover)
  File "/usr/local/lib/python3.10/dist-packages/premailer/premailer.py", line 683, in _css_rules_to_string
    for key in rule.style.keys():
AttributeError: 'CSSMediaRule' object has no attribute 'style'. Did you mean: '_type'?

My premailer version is 3.10.0 and I've tried with both python 3.8 and 3.10. No luck :(

Answer 1

It appears that premailer currently does not handle nested media queries. This error can be avoided if you can un-nest the queries like so

<style type="text/css">
    @media (prefers-color-scheme: dark) {
          .textPrimary {
            color: #E2E2E2 !important;
          }
      }

      @media (max-width: 630px) and (prefers-color-scheme: dark) {
        body,
        .footerContainer {
          background-color: #1E1E1E !important;
          }
      }
</style> 

However, as far as I know premailer "ignores" media queries anyway. Media queries get left in the <style> header and everything else gets inlined.