rennat / pynliner

Python CSS-to-inline-styles conversion tool for HTML using BeautifulSoup and cssutils
http://pythonhosted.org/pynliner/
180 stars 93 forks source link

Need to exclude some rules from Pynliner #37

Open andybak opened 9 years ago

andybak commented 9 years ago

Related to https://github.com/rennat/pynliner/issues/13

There are some rules we use as fixes for crappy web email clients. For example:

  .ExternalClass * {
    line-height: 100%;
  }

Targets the email when it's displayed within Hotmail/Outlook.com (see http://templates.mailchimp.com/development/css/client-specific-styles/ )

It would be useful to have a way to mark some CSS rules to be ignored by pynliner. For now I can mark that block myself - remove it pre-pynliner and then add it back in afterwards.

But seems like a general solution to this would be a good feature.

rennat commented 9 years ago

That's an interesting thing I hadn't considered up till now. We can definitely do that but what's the right way?

Options off the top of my head are:

  1. a special comment immediately preceding a tag something like /* pynliner ignore */ to bypass the next selector.
  2. A method on pynliner to add selector strings (probably even regex patterns) to be ignored before executing. In the helper method this would end up being a keyword argument.

Thoughts?

On Fri, Jan 16, 2015, 12:06 PM Andy Baker notifications@github.com wrote:

Related to #13 https://github.com/rennat/pynliner/issues/13

There are some rules we use as fixes for crappy web email clients. For example:

.ExternalClass * { line-height: 100%; }

Targets the email when it's displayed within Hotmail/Outlook.com (see http://templates.mailchimp.com/development/css/client-specific-styles/ )

It would be useful to have a way to mark some CSS rules to be ignored by pynliner. For now I can mark that block myself - remove it pre-pynliner and then add it back in afterwards.

But seems like a general solution to this would be a good feature.

— Reply to this email directly or view it on GitHub https://github.com/rennat/pynliner/issues/37.

andybak commented 9 years ago

In my case I feel it belongs in the template - as it's probably template specific and the app with the template is a different app to the app that calls pynliner.

Also - might specifying selectors be a bit verbose? There might be lots of them (potentially)...

Maybe something like conditional comments? Either outside the styles:

<!--[no-pynline]>
<style>...</style>
<!--[end-no-pynline]>

inside:

<style>
/* no-pynline */
...
/* end-no-pynline */

</style>

Final idea. Use a valid attribute on the style tag itself. Maybe a data-*:

<style data-no-pynline='true'>
...
</style>
rennat commented 9 years ago

Of what's been mentioned so far I like the data attribute the best. It's clean and actually very easy to implement. The CSS "no pynliner" block is my next choice.

On Fri, Jan 16, 2015, 1:06 PM Andy Baker notifications@github.com wrote:

In my case I feel it belongs in the template - as it's probably template specific and the app with the template is a different app to the app that calls pynliner.

Also - might specifying selectors be a bit verbose? There might be lots of them (potentially)...

Maybe something like conditional comments? Either outside the styles: