Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stripping media queries removes all styles for certain CSS #166

Open
funkflute opened this issue Jan 27, 2017 · 2 comments
Open

stripping media queries removes all styles for certain CSS #166

funkflute opened this issue Jan 27, 2017 · 2 comments

Comments

@funkflute
Copy link

funkflute commented Jan 27, 2017

My site uses the PureCSS framework, I use php to include() this library inside a <style> block of my html email. At:

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?

@YaoOcelotl
Copy link

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

@techi602
Copy link
Contributor

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants