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:

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

Custom class failing maizzle #1418

Custom class failing maizzle #1418

Comments

mmailaender commented Jan 15, 2025