CssToInlineStyles
CssToInlineStyles copied to clipboard
stripping media queries removes all styles for certain CSS
My site uses the PureCSS framework, I use php to include()
this library inside a
CssToInlineStyles.php:441
$css = preg_replace('/@media [^{]*{([^{}]|{[^{}]*})*}/', '', $css);
it's returning $css == null
and stripping out everything including non-media queries.
I've stripped down the CSS to just this, and it is still failing:
<style type="text/css" media="screen">
@media only screen and (max-width :480px) {
.pure-form input:not([type]), .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form label {
/* anything */
}
.pure-group input:not([type]), .pure-group input[type=text], .pure-group input[type=password], .pure-group input[type=email], .pure-group input[type=url], .pure-group input[type=date], .pure-group input[type=month], .pure-group input[type=time], .pure-group input[type=datetime], .pure-group input[type=datetime-local], .pure-group input[type=week], .pure-group input[type=number], .pure-group input[type=search], .pure-group input[type=tel], .pure-group input[type=color] {
/* anything */
}
.pure-form .pure-help-inline, .pure-form-message-inline, .pure-form-message {
/* anything */
}
}
.email-body {
padding: .5em;
max-width: 500px;
margin: auto;
}
.email-table {
margin: 0 auto;
font-family: 'Lato', Helvetica, sans-serif;
text-align: left;
}
.logo {
width: 250px;
}
</style>
but if you remove one random selector from the @media query block (ie .pure-form .pure-help-inline,
) from that, it works again and the .email-body {} and below are being used. If it is as-is above, it remove all styles and .email-body isn't inlined.
Is there something wrong with the RegExp stripping out the media queries?
Maybe it could be solved using recursive patterns, see: http://php.net/manual/en/regexp.reference.recursive.php#regexp.reference.recursive
Yep, stripping media queries is quite a problem, because you have to somehow inject them into converted HTML. There should be some option to keep CSS styles in head section since some e-mail clients supports them.
Am I missing something out?