Custom class failing maizzle #1418

mmailaender · 2025-01-15T20:05:10Z

First of all, thank you so much for your efforts in creating such a fantastic library that makes working with emails a bit less painful! ❤️

I'm trying to use the maizzle render to create the html emails dynamically.
First, I import it import { render as maizzleRender } from '@maizzle/framework'; and then I call it await maizzleRender(HTML, maizzleConfig(HTML)).
The problems happen as soon as I add my theme to the config:

{
  css: {
	  shorthand: true,
	  tailwind: {
		  presets: [tailwindcssPresetEmail],
		  content: [
			  {
				  raw: input,
				  extension: 'html'
			  }
		  ],
		  theme: tailwindConfig.theme,
		  plugins: tailwindConfig.plugins
	  }
  }
}

Error:

CssSyntaxError: /home/user/github/test/test:2:13: The `md:type-scale-9` class does not exist. If `md:type-scale-9` is a custom class, make sure it is defined within a `@layer` directive.
    at Input.error (/home/user/github/test/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/input.js:109:16)
    at AtRule.error (/home/user/github/test/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/node.js:145:32)
    at processApply (/home/user/github/test/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:380:29)
    at /home/user/github/test/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:551:9
    at /home/user/github/test/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/lib/processTailwindFeatures.js:55:50
    at async plugins (/home/user/github/test/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/lib/plugin.js:38:17)
    at async LazyResult.runAsync (/home/user/github/test/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:261:11)
    at async Promise.all (index 0) {
  reason: 'The `md:type-scale-9` class does not exist. If `md:type-scale-9` is a custom class, make sure it is defined within a `@layer` directive.',
  file: '/home/user/github/test/test',
  source: '\n' +
    '            @tailwind components;\n' +
    '            @tailwind utilities;\n' +
    '        ',
  line: 2,
  column: 13,
  endLine: 2,
  endColumn: 34,
  input: {
    column: 13,
    endColumn: 34,
    endLine: 2,
    line: 2,
    source: '\n' +
      '            @tailwind components;\n' +
      '            @tailwind utilities;\n' +
      '        ',
    url: 'file:///home/user/github/test/test',
    file: '/home/user/github/test/test'
  },
  plugin: undefined
}

The theme is provided as part of the skeleton plugin. This plugin is a Tailwind Design System for adding custom classes.

tailwind.config.ts

import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';

import { skeleton, contentPath } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';

export default {
	content: ['./src/**/*.{html,js,svelte,ts}', contentPath(import.meta.url, 'svelte')],

	theme: {
		extend: {
			spacing: {
				128: '512px',
				160: '640px',
				192: '768px'
			}
		}
	},

	darkMode: 'media',

	plugins: [
		skeleton({
			themes: [themes.cerberus]
		}),
		typography,
		forms
	]
} satisfies Config;

Maizzle Render file

import type { ComponentProps } from 'svelte';
import { render as svelteRender } from 'svelte/server';
import { render as maizzleRender, type Config } from '@maizzle/framework';
import tailwindcssPresetEmail from 'tailwindcss-preset-email';
import tailwindConfig from '../../../tailwind.config';

import Registration from './Registration.svelte';

const maizzleConfig = (input: string) => {
	return {
		css: {
			shorthand: true,
			tailwind: {
				presets: [tailwindcssPresetEmail],
				content: [
					{
						raw: input,
						extension: 'html'
					}
				],
				theme: tailwindConfig.theme,
				plugins: tailwindConfig.plugins
			}
		}
	} as Config;
};

const enrichBody = (body: string) => {
	return `<!doctype html>
    <html>
    <head>
        <style>
            @tailwind components;
            @tailwind utilities;
        </style>
    </head>
    <body>
        ${body}
    </body>
    </html>`;
};

const getRegistrationEmail = async (OTP: string) => {
	const componentProps: ComponentProps<typeof Registration> = {
		OTP
	};

	const { body } = await svelteRender(Registration, { props: componentProps });

	console.log('\ngetRegistrationEmail - svelte body: \n', body);
    const html = enrichBody(body)

	return await maizzleRender(html, maizzleConfig(html));
};

export { getRegistrationEmail};

I'm not really sure if I made a mistake or if this is a bug in Maizzle or even Skeleton. But I can say that I can use the class md:type-scale-9 in my code without problems, so I tend towards my implementation or Maizzle.

PS: It seems that the API page is a bit outdated as the Config keys inline and purge are not more booleans.

Maizzle Version: 5.0.0
Node.js Version: v22.12.0

The text was updated successfully, but these errors were encountered:

cossssmin · 2025-01-21T18:37:06Z

When using css.tailwind you need to provide it with a full config object as that is simply passed on to the Tailwind PostCSS plugin.

https://maizzle.com/docs/configuration/css#tailwind

mmailaender · 2025-01-22T11:47:18Z

I think I found it. It seems

presets: [tailwindcssPresetEmail],

and

plugins: tailwindConfig.plugins

are conflicting with each other. As soon as I remove the tailwindcssPresetEmail, the classes from skeleton will be recognized.

Two questions:

Can I combine these two plugins somehow? As the skeleton theme has no optimized email values (e.g. rem vs px), so it would be great to have the skeleton theme optimized with the tailwindcssPresetEmail.
The skeleton theme uses css variables. It seems that they get not resolved as my rendered email has a lot of undefined where normally the css variable would be. Is there a way to resolve css variables to their real value?

<!doctype html>
    <html>
    <head>
        <style>
.h1 {
    font-family: undefined;
    font-weight: undefined;
    font-style: undefined;
    letter-spacing: undefined
}
.h2 {
    font-family: undefined;
    font-weight: undefined;
    font-style: undefined;
    letter-spacing: undefined
}

.bg-primary-500 {
    background-color: rgb(undefined / 1)
}
.bg-slate-500 {
    background-color: rgb(100 116 139 / 1)
}
        </style>
    </head>
    <body>
        <!--[--><h1 class="h2 bg-slate-500">Verification code</h1> <p>Enter the following verification code when prompted:</p> <p class="h1 bg-primary-500">420705741987381451</p> <p>To protect your account, do not share this code.</p><!--]-->
    </body>
    </html>

@cossssmin

This comment has been minimized.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom class failing maizzle #1418

Custom class failing maizzle #1418

mmailaender commented Jan 15, 2025

cossssmin commented Jan 21, 2025

This comment has been minimized.

mmailaender commented Jan 22, 2025

Custom class failing maizzle #1418

Custom class failing maizzle #1418

Comments

mmailaender commented Jan 15, 2025

cossssmin commented Jan 21, 2025

This comment has been minimized.

mmailaender commented Jan 22, 2025