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.

Sign up for GitHub

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

Jump to bottom

Classes are being skipped in the document #53

Open
harberg opened this issue Mar 27, 2018 · 2 comments
Open

Classes are being skipped in the document #53

harberg opened this issue Mar 27, 2018 · 2 comments

Comments

@harberg
Copy link

harberg commented Mar 27, 2018

Hello,

I've been enjoying gulp-inline-css quite a bit for email development, but I run into a strange bug as of late. I have a class .innerContainer that isn't having it's styles inlined? Most of the other styles are inlining just fine. To make matters even stranger, if I have a <div> or <td> in the bottom half of the html file, the styles for .innerContainer will inline just fine.

I'm using the Nunjucks templating engine to build my files.

Here is my gulp task

gulp.task('inline', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss({
            removeStyleTags: false,
            preserveMediaQueries: true,
            applyTableAttributes: true,
            applyWidthAttributes: false
        }))
        .pipe(gulp.dest('dist/'));
});

Thanks for your help.
@jonkemp
Copy link
Owner

jonkemp commented Mar 27, 2018

Yeah, the only thing I see is maybe the camelcase class name, though I can't be sure that is causing it without testing that. But I would avoid that as a general rule anyway. It's bad practice.

@harberg
Copy link
Author

harberg commented Mar 27, 2018 •
edited

This is the html file that I am using the inline task on. The other camelcase class names are being inlined. The issue is only effecting <td> that are in the top half of the html file. When I did more troubleshooting, having a <div> with the same class name worked when a <td> didn't. This is being used to build email templates for Marketo. Would it be helpful to see the stylesheet as well?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- so Windows phones will display mobile version. Prevents problems with Windows Live Mail -->
    <!--[if !mso]><!-- -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <meta name="x-apple-disable-message-reformatting" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="./bilbo.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" />

    <!-- Global Variables -->

    <!-- Divider Variables -->
    <meta class="mktoNumber" id="dividerTopModule" mktoName="Top Spacer" mktoModuleScope="true" mktoAddByDefault="false" default="35" min="0" max="90" units="px" step="1">
    <meta class="mktoNumber" id="dividerBottomModule" mktoName="Bottom Spacer" mktoModuleScope="true" mktoAddByDefault="false" default="35" min="0" max="90" units="px" step="1">

    <!--[if mso]>
    <style type="text/css">
        body, table, th, span, p, a {font-family: Arial, sans-serif !important;}
        a {color:#FFFFFF;}
    </style>
    <![endif]-->
    <!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
    <![endif]-->
</head>
<body class="body">
<!-- Start Template Content -->

<center class="wrapper">
    <div class="webkit">
    <!--[if (gte mso 9)|(IE)]>
    <table width="600" align="center">
    <tr>
    <td>
    <![endif]-->
    <table class="outer" align="center">
        <tr>
            <td id="moduleContainer" class="mktoContainer">
            <!-- /// START module-header -->
                <table class="mktoModule headerModule" id="headerModule" mktoName="Header Module" align="center">
                    <tr>
                        <td align="left">
                            <div id="headerImage1" class="mktoImg" mktoname="Logo 1">
                                <a href="https://www.Acme.com/us/google/" title="Acm Logo">
                                    <img class="" src="./images/logo-Acme-email.png" width="95" alt="Acme Logo"/>
                                </a>
                            </div>
                        </td>
                        <td align="right">
                            <div id="headerImage2" class="mktoImg" mktoname="Logo 2">
                                <a href="https://www.Acme.com/us/cloudsolv/" title="Acme Logo">
                                    <img class="" src="./images/logo-Acme-email.png" height="27" alt="Acme Logo"/>
                                </a>
                            </div>
                        </td>
                    </tr>
                </table>
            <!-- /// END module-header -->
            <!-- /// START module-divider -->
                <table class="mktoModule dividerModule" id="dividerModule" mktoName="Divider Module" align="center">
                    <tr>
                        <td style="border-collapse:collapse; line-height:${dividerTopModule}; font-size:${dividerTopModule}; height:${dividerTopModule};">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="samwise innerContainer" align="center">
                            <img src="./images/google-divider-email.png" alt="Colored Bar">
                        </td>
                    </tr>
                    <tr>
                        <td style="border-collapse:collapse; line-height:${dividerBottomModule}; font-size:${dividerBottomModule}; height:${dividerBottomModule};">&nbsp;</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- /// START Footer -->
    <table class="footerPartial outer" align="center">
        <tr>
            <td align="center" class="footerLogo" colspan="2">
                <a href="https://www.Acme.com/us/" title="Acme Logo">
                    <img src="./images/logo-Acme-negative-email.png" alt="Acme Logo">
                </a>
            </td>
        </tr>
        <tr>
            <td align="right" class="footerLink linkLeft">
                <div>
                    <a href="" target="_blank" title="Unsubscribe Link">Unsubscribe</a>
                </div>
            </td>
            <td align="left" class="footerLink linkRight">
                <div>
                    <a href="https://www.Acme.com/legal-information/" title="Legal Information">Legal Info</a>
                </div>
            </td>
        </tr>
        <tr>
            <td align="center" class="footerCopyright" colspan="2">
                <p>&copy;2018 Acme CORPORATION. All rights reserved.</p>
            </td>
        </tr>
    </table>
    <!-- /// END Footer -->

    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
    </div>
</center>

</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jonkemp @harberg