Purge css is clearing dynamic classes when using render method

[lhennerley]

• Maizzle Version: 3.0.1
• Node.js Version: 15.1.0

Hi - thanks for a superb library! Once you get going it's really powerful. I am trying to render an email with some dynamic css class.

If I run maizzle serve approach and build my templates, the following renders fine.

---
title: "Your Project Update"
color: "blue"
---

<extends src="src/layouts/master.html">
  <block name="template">
    <extends src="src/brews/templates/master.html">
      <block name="template">
        <div class="w-full h-screen bg-{{ page.color }}-200"></div>
      </block>
    </extends>
  </block>
</extends>

If I use the render approach with the following:

 Maizzle.render(`---
title: "Your Project Update"
color: "blue"
---

<extends src="src/layouts/master.html">
  <block name="template">
    <extends src="src/brews/templates/master.html">
      <block name="template">
        <div class="w-full h-screen bg-{{ page.color }}-200"></div>
      </block>
    </extends>
  </block>
</extends>`,
           {
              tailwind: {
                  css: `@tailwind base;
                  @tailwind components;
                  @tailwind utilities;`,
                  config: {
                    theme: {
                      colors: {
                        // Build your palette here
                        transparent: 'transparent',
                        current: 'currentColor',
                        gray: colors.trueGray,
                        red: colors.red,
                        blue: colors.lightBlue,
                        yellow: colors.amber,
                        orange: colors.orange,
                        green: colors.green,
                        teal: colors.teal,
                        white: colors.white,
                        black: colors.black
                      }
                    }
                  }
            }
          })
          .then(({html}) => console.log(html))
           .catch(error => console.log(error))

It seems like the string itself isn't being parsed in time before it adds the tailwind styles in this scenario, I want to decouple my value from tailwind (e.g. blue rather than bg-blue-200) which is the reason for my use case.

Any ideas?

[cossssmin]

Hi, thanks 😊

See Tailwind’s docs on writing purgeable HTML, it applies to Maizzle too even if we use a custom purging strategy:

https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

[lhennerley]

Thanks for speedy reply!

I read documentation a bit more after posting. I feel like I am hacking a little bit now that I understand - essentially I am creating a serverless function for sending an email based on some user configuration, the user can choose a color (e.g. blue, red, green etc) and this lives within the loop of list.

For my workaround, I have just looped over every tailwind color in the library and added this to the white list in tailwind config, I am not sure if there is a better way to do this - it seems like the tailwind/purge happens too quickly (e.g. before the variables are replaced). If the purgecss happened after the variables had replaced, there would be "purgeable HTML".

Just a side thought, maybe changing this would break other stuff I don't know but I feel it would give good flexibility for more dynamic rendering like this use case.

[cossssmin]

You can use PurgeCSS' safelist to instruct it to preserve any bg- classes with a regex.

If the purgecss happened after the variables had replaced, there would be "purgeable HTML".

Unfortunately the way things work in Maizzle, this is not possible.