Classes are being skipped in the document

harberg commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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>

jonkemp / gulp-inline-css

Classes are being skipped in the document #53