[Help] How to properly handle custom css?

[yellow1912]

• Maizzle Version: 3.7.1
• Node.js Version: 14.17.0

I'm in a situation where I have the html code generated with tailwind classes and some custom css. When I run maizzle it seems to remove all the custom css. I wonder if there is a proper way to handle this?

Thank you very much for your help.

Edit 1: I think the issue is with removeUnusedCSS on

[cossssmin]

What is your custom CSS? Are you using those selectors in HTML?

There are 2 things that will remove unused CSS:

1. CSS inliner (Juice) will remove any CSS selectors after it has presumably successfully inlined them - this can be prevented by writing custom CSS in a separate <style data-embed> tag
2. removeUnusedCSS will remove any unused CSS from <style>

See https://maizzle.com/docs/css-inlining/#prevent-inlining

[yellow1912]

Thank you very much for your guide. Suppose that I have some custom CSS like below which works nice in the browser, how should I process it to be email-compatible? It seems like the code is ignored and left there on the email out:

.nl-text-color-color-1 {
  --tw-text-opacity: 1;
  color: rgba(0,15,255,var(--tw-text-opacity))!important;
}

[cossssmin]

Do you apply the .nl-text-color-color-1 class on any element in your HTML?

CSS variables have very poor support in email, just stick to HEX colors or use an actual opacity value if you really want to use rgba().

If that CSS in your example is generated by Tailwind, you probably enabled textOpacity in your Tailwind config.

Maizzle specifically disables utilities that use CSS variables in Tailwind, such as textOpacity, because 1) it can't work with how Tailwind generates CSS variables and 2) they don't work in the majority of email clients.

If you wrote that manually in a .css file, again, just use HEX or replace the variable with an actual opacity value.

[yellow1912]

I see what you mean, I thought that maizzle has a way to convert these variable codes to css as well, but yeah I think it does make sense now. The code is automatically generated but I can certain update it.

For some reason, the final output from maizzle misses some styles such as margin. I wonder if there is something specific related to the purge configs that I miss.

Below is my code to build:

import fs from 'fs';
import Maizzle from "@maizzle/framework";
import minimist from 'minimist';

var args = minimist(process.argv.slice(2));
var twConfigPath = args['tw-config'] || './maizzle.config.js';
var twCompiledPath = args['tw-compiled'] || './maizzle.min.css';

var input = args['in-file'];

var content = fs.readFileSync(input, "utf8");

var {html, config} = await Maizzle.render(content, {
  maizzle: {
    env: 'production',
    inlineCSS: true,
    removeUnusedCSS: {
      removeHTMLComments: true
    },
    build: {
      templates: {
        destination: {
          path: 'build_production',
        },
      },
    },
  },
  tailwind: {
    compiled: fs.readFileSync(twCompiledPath, "utf8"),
    config: import(twConfigPath),
  }
});

if (args.hasOwnProperty('out-file')) {
  fs.writeFile(args['out-file'], html, function (err, buf) {
    if (null !== err) {
      console.log({
        error: err
      });

      process.exit(1);
    }
  });
} else {
  console.log(html);
}

In the tailwindcss config file, do I need to configure purge or is it automatically set?

Right now I simply use something like this:

module.exports = {
  purge: [
    'src/**/*.*',
  ],
  // ...
}

However, since I pass the html via out-file, it seems wrong?

Also, another questions is that when I switched from mjs to js (nodejs), I cannot use await on Maizzle.render anymore. Is there any way to force the script to wait for the response instead? The error I get is "SyntaxError: await is only valid in async function"

[cossssmin]

If you provide the compiled key in the tailwind config, Maizzle uses that string as CSS and will not compile Tailwind at all:

framework/src/generators/output/to-string.js

Lines 30 to 34 in 657476a

	if (typeof get(options, 'tailwind.compiled') === 'string') {
	config.css = options.tailwind.compiled
	} else {
	config.css = await Tailwind.compile(cssString, html, tailwindConfig, config)
	}

So the purge path in your Tailwind config won't be used (nothing in there will be used, Maizzle will just use the CSS you provided in the compile key).

Also, this:

var twConfigPath = args['tw-config'] || './maizzle.config.js';

... looks like you're providing a Maizzle config instead of a Tailwind one? Or is it just named like that but it contains the Tailwind config object?

Also this:

removeUnusedCSS: {
  removeHTMLComments: true
},

... should be enough to set removeUnusedCSS: true (removeHTMLComments is on by default).

In the tailwindcss config file, do I need to configure purge or is it automatically set?

It should work without you having to provide it:

framework/src/generators/tailwindcss.js

Lines 38 to 41 in 657476a

	content: [
	'src/**/*.*',
	{raw: html}
	],

[yellow1912]

@cossssmin

Thank you very much for your reply.

1. So if I provide the compiled code, I don't have to worry about the tailwind configs (not going to be compiled anyway). But the removeUnusedCSS will still do the job the clean up the compiled code right?
2. Yeah, the name maizzile.config.js is actually a maizzle specific tailwind config file, just my stupid naming
3. Is there a way to force Maizzle.render to wait for the response? It seems like await does not work on nodejs env, it says "SyntaxError: await is only valid in async function" when I try to use await Maizzle.render

[cossssmin]

1. Yes, removeUnusedCSS will still run
2. OK :)
3. You're awaiting inside a sync function, that's why you're getting that error. No need to await Maizzle.render() (docs) but if you need, to you have to do that in an async function.

[yellow1912]

Thank you very much. For number 3, when I copied the code from the docs:

const {html, config} = Maizzle.render(html string, options)

I get undefined for bot html and config, or perhaps I need to put the code in then to utilize the Promise instead?

[cossssmin]

Yes, the example is incomplete - will fix it.

Either wrap it in an async function, i.e.:

async function render() {
  const {html} = await Maizzle.render('html string', options)

  console.log(html)
}

render()

... or a self-invoking one:

(async () => {
  const {html} = await Maizzle.render('html string', options)

  console.log(html)
})()

... or use a Promise:

Maizzle
  .render('html string', options)
  .then(({html, config}) => console.log(html, config))
  .catch(error => console.log(error))