parseStylesheet crashes on @media rules

[csnover]

The stylesheet parser is naive and assumes that there are never nested rules, which is not the case when CSS3 @media is used. When one of these is encountered, the parser crashes. I don’t know that these actually need to be supported, but it would at least be good if they were safely ignored instead of causing a crash.

[faceleg]

👍

[tcg]

👍 👍 👍 👍 👍 👍
Just ran into this, and it's a huge setback. We're using media-queries for native & CSS-friendly email clients to display things better/different than in clients that strip styles (gmail, etc).

[christiaan]

Would it make sense to be able to set a screen-width and have inlinestyle decide if it should keep the part between the media-query or not?

Or should everything between media queries be removed?

[tcg]

To me, it doesn't make sense to actually use any rules from within a
media query for inlining, but they should be left in place wherever they're
found. They're not used often for email, but when they are, it's only for
certain native clients that support "normal" CSS anyway -- so inlining
those rules wouldn't matter.

I'd personally be fine with the parser just skipping @media blocks.

On Fri, Dec 13, 2013 at 2:56 AM, Christiaan Baartse <
notifications@github.com> wrote:

Would it make sense to be able to set a screen-width and have inlinestyle
decide if it should keep the part between the media-query or not?

Or should everything between media queries be removed?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/11#issuecomment-30494860
.

[christiaan]

So when a external stylesheet contains @media blocks you suggest that a new <style> tag is inserted in the containing said @media block?

[tcg]

That's a good question, and I'm not yet sure what the general expected outcome would be. For my personal needs, if the media block was within the same document, in <style> tags, I'd just ignore it. When it comes to pulling things in from external stylesheets... I'm not sure. I've not yet familiarized myself enough with the internals of InlineStyle to understand how different that is from what it does to normal external styles, so I'd hate to make an ignorant suggestion.

[tcg]

@christiaan With regards to setting a configurable screen width: I don't think that would be completely useful, because many media blocks may use relative units (ems, %s, etc) for their breakpoints - which don't all have a fixed correlation to each-other.

[tcg]

What do you think about this idea (a bit of a hack, but workable):

In special cases where media-queries are required (and thus, the client is obviously CSS-friendly), media-queries should be placed in a <style> block with an Inliner-specific attribute, e.g.:

    <style data-inliner-ignore="true">
    @media only screen and (max-width: 41em) {
        div.wrapper { width: 100%  !important; }
        div.boundry { width: 100%  !important; }
        div.footer { width: 100%  !important; }
    }
    </style>

Elements with that attribute (style, link) will be skipped by Inliner, as a workaround.

It's a littler janky, but it's what I'm about to implement now, as I'm pressed for time on a particular project that uses InlineStyle + media queries.

[walter-schwarz]

I think the way the guys from ZURB do it, for their "Ink" Email CSS framework, is the best way: http://zurb.com/ink/inliner.php

Like you mentioned christiaan, when the CSS rules are parsed, media blocks which are found are put inside a style tag, but located inside the body not the head, and this happens not only for media blocks but also for any rule that contains pseudo classes. This way everything should work out as expected, and email clients that can understand these CSS rules can use them,

[christiaan]

Is it important that those style tags are placed in the body and not in the head?

I think using the inliner from zurb as a example on this might be a good start.