Custom utility classes - hover: screen: purged by Juice Inliner

[landoDanziger]

• Maizzle Version: v4.0.2
• CLI v1.4.0
• Node.js Version: v16.13.2

When adding custom utilities - responsive states are purged.

Example: Copy button classes from promotional starter and assign to btn class in utilities:

.btn { @apply inline-block py-4 px-6 rounded text-base font-semibold text-center [text-decoration:none] text-white bg-indigo-800 hover:bg-indigo-700; }

In dev localhost hover works, in maizzle build production hover: is removed. Initially discovered when trying to assign a custom font using screen: in custom utility class.

Hover states still function if styling is kept out of utility class. Added second button to promotional starter to test.

https://github.com/landoDanziger/utilityClassDemo

When inlineCss: false, is set - hover etc still works.

[cossssmin]

Thanks for providing the repo, this happens because of how we remove classes that have been inlined in Maizzle 4.0 (there was a change so that we can better support client targeting hacks).

So if you have something like this in your CSS files:

@layer components {
  .btn {
    @apply bg-indigo-800 hover:bg-indigo-700;
}

... you'll need to set removeStyleTags: true:

module.exports = {
  build: {
    templates: {
      destination: {
        path: 'build_production',
      },
    },
  },
-  inlineCSS: true,
+  inlineCSS: {
+   removeStyleTags: true,
+  },
  removeUnusedCSS: true,
}

[landoDanziger]

Thanks Cosmin

Ah - this is related to that https://github.com/maizzle/framework/discussions/563

At a first go - it works for the screen:font - would it work for hover: and active: - I notice i get the btn style with the hover & active class, but it doesn't overrule the inline style, as the rule doesn't get !important added to it. ( I'll keep picking at it )

This comes back to the lack of a whitelist in Juice right?

Maybe for the buttons I will just bake it all into the button component using conditional logic - and take the screen:font-ptSerif for the win.

---

Plus - I am hoping to use the client specific targeting. Is this a trade off - email client targeting vs utilities? I've not had much joy understanding the gmail targeting, but was going to try things like - setting the margin on the body on apple - to match the forced margin on gmail app.

[landoDanziger]

What is peculiar about it is, it works when the styles are there regularly in the template. I was wondering if there was a way to import the utility shortcuts first, then run the regular build.

Like an extra step or wait?

Edit: I see why this doesn't work - so there isn't a process to replace the custom utility name with its contents from the custom utility classes.

I wonder if a plugin can do it....

[cossssmin]

Yeah might need to add !important:

@layer components {
  .btn {
    @apply bg-indigo-800 hover:!bg-indigo-700;
}

or:

@layer components {
  .btn {
    @apply bg-indigo-800; 
    @apply hover:bg-indigo-700 !important;
}

[landoDanziger]

I have been misunderstanding how Tailwinds Utilities function.

I imagined that they were shortcuts to avoid repeatedly writing out the same classes - which for web is more true - but they are really creating a class of tailwinds classes - so they won't transfer to the inliner in the same way as they are when written into the template. Got it.

I think for the BTN classes - i'll be better to set them conditionally in the BTN component - for the screen:font-ptSerif class - I can see if I understand the tradeoff with the targeting hacks.

I did see a postCss plugin that unwraps nested rules - but I couldn't fully understand if that would make the styles more ingestible https://github.com/postcss/postcss-nested

Anyway - guess this can be closed - I problem in my thinking. Thanks for the help again.

[landoDanziger]

I keep following up - but maybe it will be helpful to someone else. I often read closed tickets for clues. If i use: removeStyleTags: true, - then targeting hacks will be removed.

Using remove style tags to true effectively generates classes for each utility - as the rest of it is inlined - and it is unable to assign these into one re-usable class.

Again this is expected, as utilities is intended to create style sheet classes, not save writing into the template or component.

I realise i san-serif font on the table - and it's not a huge issue to append the serif font to a few titles, especially if, since nesting components is SO GREAT now. I can just make a title or salutation component and drop the responsive class in there. :D

( a mental journey )

`@media screen { .tl { font-family: 'PT Serif', ui-serif, Georgia, Cambria, Times New Roman, Times, serif; } }

@media screen { .s { font-family: Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif; } }

@media screen { .sb { font-family: Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif; } }

@media screen { .xs { font-family: Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif; } }`