search

maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.24k stars 49 forks source link

Reverse Stack & PurgeCSS #95

Closed goaround closed 4 years ago

goaround commented 4 years ago

Description:

I've tried to use the https://maizzle.com/docs/reverse-stack/#reverse-2-col but when I run maizzle build staging or maizzle build production the sm-inline-block w-1-2 classes get striped away.

It seems like that PurgeCSS can't find the classes inside the template and because its not inside the css, the classes get strieped away. I think there is a bug inside the PurgeCSS extractor.

It works fine during maizzle serve but not in staging/production.

Steps To Reproduce:

  1. Create a new Maizzle project maizzle new my-project
  2. Fix this small Bug https://github.com/maizzle/maizzle/pull/13
  3. Replace the content inside {% block template %} ... {% endblock %} in src/templates/newsletter.njk with the example:
<table class="w-full">
  <tr>
    <td class="sm-inline-block w-1-2 sm-w-full px-8">
      <p class="text-2xl font-hairline font-sans text-black">Left text</p>
      <p class="text-grey-dark">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.</p>
    </td>
    <td class="sm-inline-block w-1-2 sm-w-full px-8">
      <img src="https://picsum.photos/600/600">
    </td>
  </tr>
</table>
  1. Run maizzle build staging and check the build_staging/newsletter.html It should look like this:
<body style="margin: 0; padding: 0; width: 100%; word-break: break-word; -webkit-font-smoothing: antialiased;">
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tbody><tr>
      <td class="sm-w-full" style="padding-left: 8px; padding-right: 8px;">
        <p style="font-family: -apple-system, 'Segoe UI', sans-serif; font-weight: 100; color: #000000; font-size: 24px;">Left text</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aspernatur.</p>
      </td>
      <td class="sm-w-full" style="padding-left: 8px; padding-right: 8px;">
        <img src="https://picsum.photos/600/600" style="border: 0; line-height: 100%; vertical-align: middle;" alt="">
      </td>
    </tr>
  </tbody></table>

</body>

With only <td class="sm-w-full" style="padding-left: 8px; padding-right: 8px;">

Strangely enough if I just add the example right after {% block template %} and leave the newsletter example below, the classes get not purged and it works fine...

cossssmin commented 4 years ago

Documentation is outdated there - my bad 🤦‍♂️

If you're using the latest starter, it's configured to use : as a separator in Tailwind. So sm-inline-block is purged, while sm:inline-block isn't. You can either change the separator to - or switch to writing Tailwind classes with the cool : separator :)

It's working in {% block template %} because that doesn't go through PurgeCSS (but it could, if you write the style tag as <style tailwind> - see docs). Also, it's working with maizzle serve (or maizzle build) because PurgeCSS is not used in development.

Thanks for bringing this up, I'll go through all docs today and update any examples 👍

goaround commented 4 years ago

🙈 I tried everythink except changing the seperator. Thank you!