CssToInlineStyles icon indicating copy to clipboard operation
CssToInlineStyles copied to clipboard

stripping media queries removes all styles for certain CSS

Open funkflute opened this issue 8 years ago • 2 comments

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?

funkflute avatar Jan 27 '17 20:01 funkflute

Maybe it could be solved using recursive patterns, see: http://php.net/manual/en/regexp.reference.recursive.php#regexp.reference.recursive

YaoOcelotl avatar Dec 07 '17 00:12 YaoOcelotl

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?

techi602 avatar Jul 12 '18 13:07 techi602