Handle <link> within conditional comments #19

Closed
blowsie opened this Issue May 28, 2014 · 7 comments

3 participants

@blowsie

It would be great if this could handle styles within conditional comments for example;

Input:

    <!-- Target Windows Mobile -->
    <!--[if IEMobile 7]>
         <link href="..."  rel="stylesheet" />
    <![endif]-->

    <!--Target Outlook 2007 and 2010-->
    <!--[if gte mso 9]>
          <link href="..."  rel="stylesheet" />
    <![endif]-->

Output:

    <!-- Target Windows Mobile -->
    <!--[if IEMobile 7]>
    <style type="text/css">
        body {
            background: red;
        }
    </style>
    <![endif]-->

    <!--Target Outlook 2007 and 2010-->
    <!--[if gte mso 9]>
        <style type="text/css">
        body {
            background: blue;
        }
        </style>
    <![endif]-->
@blowsie blowsie changed the title from Handle Styles within comments to Handle Styles within conditional comments May 28, 2014
@blowsie blowsie changed the title from Handle Styles within conditional comments to Handle <link> within conditional comments May 28, 2014
@yargalot yargalot self-assigned this May 29, 2014
@yargalot

Makes sense, I'll look into it

@jeremypeter

I think it would be hard to parse conditional comments. We could probably give the link an attribute and pull the styles that way.

My thoughts are commenting out the link tag so it doesn't interfere with any other css and adding a conditional attribute with the target application as the value.

Example:

<!-- <link href="..."  conditional="IEMobile 9"> --> 
<!-- <link href="..."  conditional="gte mso 9"> -->

Doing it this way would probably work.

@blowsie

I ended creating a asp.net implementation of this, almost exactly as your example. Except, I don't comment the elements, and remove them from the page, based on the ignore attribute.

Examples.

<!-- Wrapper CSS -->
<link data-commment="The Wrapper CSS"
        href="{{BASEFOLDERURL}}/wrapper/123/css/styles.css"
        rel="stylesheet"
        data-ignore="ignore" />

<link data-commment="The Wrapper Inline CSS"
        href="{{BASEFOLDERURL}}/wrapper/o2/css/inline.css"
        rel="stylesheet" />

<link data-commment="The Wrapper CSS For Outlook"
        data-conditional="if gte mso 9"
        href="{{BASEFOLDERURL}}/wrapper/123/css/outlook.css"
        rel="stylesheet"
        data-ignore="ignore" />

I would like to move back to email-builder in the future, but for now, I have a handmade .net solution.

@jeremypeter

I was able to figure out a way to do it without using my recommended way. So any link tags within conditional comments will be put into a style tag

So look forward to that perhaps in the next release.

@jeremypeter

Fixed. Release 2.0.2 will have this feature

@blowsie

Great news!

@jeremypeter

Release 2.0.2 has been published. Closing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment