npm - better-svelte-email - Versions diffs - 0.3.6 → 1.0.0-beta.0 - Mend

better-svelte-email 0.3.6 → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/components/Body.svelte CHANGED Viewed

@@ -1,15 +1,19 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	let { children, style, ...restProps }: { children?: any } & HTMLAttributes<HTMLBodyElement> =
-		$props();
+	let {
+		children,
+		style,
+		class: className,
+		...restProps
+	}: { children?: any } & HTMLAttributes<HTMLBodyElement> = $props();
 </script>
 <body {...restProps}>
 	<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
 		<tbody>
 			<tr>
-				<td {style}>
+				<td {style} class={className}>
 					{@render children?.()}
 				</td>
 			</tr>

package/dist/components/Button.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { styleToString, pxToPt, combineStyles } from '../utils/index.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 	let {
 		href = '#',
@@ -16,7 +16,7 @@
 		pX?: number;
 		pY?: number;
 		children: any;
-	} & HTMLAttributes<HTMLAnchorElement> = $props();
+	} & HTMLAnchorAttributes = $props();
 	const y = pY * 2;
 	const textRaise = pxToPt(y.toString());
@@ -43,17 +43,15 @@
 </script>
 <a {...restProps} {href} {target} style={combineStyles(buttonStyle, style)}>
-	{#if pX}
-		<span>
-			{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
-		</span>
-	{/if}
+	<span>
+		{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden>&nbsp;</i><![endif]-->`}
+	</span>
 	<span style={buttonTextStyle}>
 		{@render children?.()}
 	</span>
-	{#if pX}
-		<span>
-			{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`}
-		</span>
-	{/if}
+	<span style="display: none;">
+		{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]-->`}
+	</span>
 </a>

package/dist/components/Button.svelte.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
 type $$ComponentProps = {
     href?: string;
     target?: string;
     pX?: number;
     pY?: number;
     children: any;
-} & HTMLAttributes<HTMLAnchorElement>;
+} & HTMLAnchorAttributes;
 declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/index.d.ts CHANGED Viewed

@@ -1,9 +1,5 @@
 export * from './components/index.js';
 export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
 export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
-export type { ClassAttribute, TransformResult, MediaQueryStyle } from './preprocessor/types.js';
-export type { TailwindConfig } from 'tw-to-css';
-export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
-export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
-export { injectMediaQueries } from './preprocessor/head-injector.js';
-export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
+export { default as Renderer, type TailwindConfig, type RenderOptions } from './render/index.js';
+export * from './utils/index.js';

package/dist/index.js CHANGED Viewed

@@ -2,9 +2,7 @@
 export * from './components/index.js';
 // Export the preprocessor
 export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
-// Export individual functions for advanced usage
-export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
-export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
-export { injectMediaQueries } from './preprocessor/head-injector.js';
+// Export renderer
+export { default as Renderer } from './render/index.js';
 // Export utilities
-export { styleToString, pxToPt, combineStyles, withMargin, renderAsPlainText } from './utils/index.js';
+export * from './utils/index.js';

package/dist/preprocessor/index.d.ts CHANGED Viewed

@@ -3,8 +3,11 @@ import type { PreprocessorOptions, ComponentTransform } from './types.js';
 /**
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
  *
+ * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
+ *
  * @example
  * ```javascript
+ * // Old (deprecated):
  * // svelte.config.js
  * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
  *
@@ -17,6 +20,22 @@ import type { PreprocessorOptions, ComponentTransform } from './types.js';
  *     })
  *   ]
  * };
+ *
+ * // New (recommended):
+ * import Renderer from 'better-svelte-email/renderer';
+ * import EmailComponent from './email.svelte';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: { brand: '#FF3E00' }
+ *     }
+ *   }
+ * });
+ *
+ * const html = await renderer.render(EmailComponent, {
+ *   props: { name: 'John' }
+ * });
  * ```
  *
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess

package/dist/preprocessor/index.js CHANGED Viewed

@@ -6,8 +6,11 @@ import path from 'path';
 /**
  * Svelte 5 preprocessor for transforming Tailwind classes in email components
  *
+ * @deprecated The preprocessor approach is deprecated. Use the `Renderer` class instead for better performance and flexibility.
+ *
  * @example
  * ```javascript
+ * // Old (deprecated):
  * // svelte.config.js
  * import { betterSvelteEmailPreprocessor } from 'better-svelte-email/preprocessor';
  *
@@ -20,6 +23,22 @@ import path from 'path';
  *     })
  *   ]
  * };
+ *
+ * // New (recommended):
+ * import Renderer from 'better-svelte-email/renderer';
+ * import EmailComponent from './email.svelte';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: { brand: '#FF3E00' }
+ *     }
+ *   }
+ * });
+ *
+ * const html = await renderer.render(EmailComponent, {
+ *   props: { name: 'John' }
+ * });
  * ```
  *
  * Reference: https://svelte.dev/docs/svelte/svelte-compiler#preprocess

package/dist/preview/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import type { RequestEvent } from '@sveltejs/kit';
+import Renderer from '../render/index.js';
 /**
  * Import all Svelte email components file paths.
  * Create a list containing all Svelte email component file names.
@@ -39,15 +40,28 @@ export declare const getEmailComponent: (emailPath: string, file: string) => Pro
  * SvelteKit form action to render an email component.
  * Use this with the Preview component to render email templates on demand.
  *
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
+ *
  * @example
  * ```ts
  * // +page.server.ts
  * import { createEmail } from 'better-svelte-email/preview';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
- * export const actions = createEmail;
+ * export const actions = createEmail(renderer);
  * ```
  */
-export declare const createEmail: {
+export declare const createEmail: (renderer?: Renderer) => {
     'create-email': (event: RequestEvent) => Promise<{
         status: number;
         body: {
@@ -80,20 +94,33 @@ export declare const SendEmailFunction: ({ from, to, subject, html }: {
  *
  * @param options.resendApiKey - Your Resend API key (keep this server-side only)
  * @param options.customSendEmailFunction - Optional custom function to send emails
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
  *
  * @example
  * ```ts
  * // In +page.server.ts
  * import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
  * export const actions = {
- *   ...createEmail,
- *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
+ *   ...createEmail(renderer),
+ *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY, renderer })
  * };
  * ```
  */
-export declare const sendEmail: ({ customSendEmailFunction, resendApiKey }?: {
+export declare const sendEmail: ({ customSendEmailFunction, resendApiKey, renderer }?: {
     customSendEmailFunction?: typeof SendEmailFunction;
+    renderer?: Renderer;
     resendApiKey?: string;
 }) => {
     'send-email': (event: RequestEvent) => Promise<{

package/dist/preview/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { Resend } from 'resend';
 import fs from 'fs';
-import { render } from 'svelte/server';
 import path from 'path';
 import prettier from 'prettier/standalone';
 import parserHtml from 'prettier/parser-html';
+import Renderer from '../render/index.js';
 /**
  * Get a list of all email component files in the specified directory.
  *
@@ -67,49 +67,63 @@ export const getEmailComponent = async (emailPath, file) => {
  * SvelteKit form action to render an email component.
  * Use this with the Preview component to render email templates on demand.
  *
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
+ *
  * @example
  * ```ts
  * // +page.server.ts
  * import { createEmail } from 'better-svelte-email/preview';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
- * export const actions = createEmail;
+ * export const actions = createEmail(renderer);
  * ```
  */
-export const createEmail = {
-    'create-email': async (event) => {
-        try {
-            const data = await event.request.formData();
-            const file = data.get('file');
-            const emailPath = data.get('path');
-            if (!file || !emailPath) {
+export const createEmail = (renderer = new Renderer()) => {
+    return {
+        'create-email': async (event) => {
+            try {
+                const data = await event.request.formData();
+                const file = data.get('file');
+                const emailPath = data.get('path');
+                if (!file || !emailPath) {
+                    return {
+                        status: 400,
+                        body: { error: 'Missing file or path parameter' }
+                    };
+                }
+                const emailComponent = await getEmailComponent(emailPath, file);
+                // Render the component to HTML
+                const html = await renderer.render(emailComponent);
+                // Remove all HTML comments from the body before formatting
+                const formattedHtml = await prettier.format(html, {
+                    parser: 'html',
+                    plugins: [parserHtml]
+                });
                 return {
-                    status: 400,
-                    body: { error: 'Missing file or path parameter' }
+                    body: formattedHtml
+                };
+            }
+            catch (error) {
+                console.error('Error rendering email:', error);
+                return {
+                    status: 500,
+                    error: {
+                        message: error instanceof Error ? error.message : 'Failed to render email'
+                    }
                 };
             }
-            const emailComponent = await getEmailComponent(emailPath, file);
-            // Render the component to HTML
-            const { body } = render(emailComponent);
-            // Remove all HTML comments from the body before formatting
-            const bodyWithoutComments = body.replace(/<!--[\s\S]*?-->/g, '');
-            const formattedBody = await prettier.format(bodyWithoutComments, {
-                parser: 'html',
-                plugins: [parserHtml]
-            });
-            return {
-                body: formattedBody
-            };
-        }
-        catch (error) {
-            console.error('Error rendering email:', error);
-            return {
-                status: 500,
-                error: {
-                    message: error instanceof Error ? error.message : 'Failed to render email'
-                }
-            };
         }
-    }
+    };
 };
 const defaultSendEmailFunction = async ({ from, to, subject, html }, resendApiKey) => {
     // stringify api key to comment out temp
@@ -128,19 +142,31 @@ const defaultSendEmailFunction = async ({ from, to, subject, html }, resendApiKe
  *
  * @param options.resendApiKey - Your Resend API key (keep this server-side only)
  * @param options.customSendEmailFunction - Optional custom function to send emails
+ * @param options.renderer - Optional renderer to use for rendering the email component (use this if you want to use a custom tailwind config)
  *
  * @example
  * ```ts
  * // In +page.server.ts
  * import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
+ * import Renderer from 'better-svelte-email/render';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
  *
  * export const actions = {
- *   ...createEmail,
- *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
+ *   ...createEmail(renderer),
+ *   ...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY, renderer })
  * };
  * ```
  */
-export const sendEmail = ({ customSendEmailFunction, resendApiKey } = {}) => {
+export const sendEmail = ({ customSendEmailFunction, resendApiKey, renderer = new Renderer() } = {}) => {
     return {
         'send-email': async (event) => {
             const data = await event.request.formData();
@@ -157,7 +183,7 @@ export const sendEmail = ({ customSendEmailFunction, resendApiKey } = {}) => {
                 from: 'svelte-email-tailwind <onboarding@resend.dev>',
                 to: `${data.get('to')}`,
                 subject: `${data.get('component')} ${data.get('note') ? '| ' + data.get('note') : ''}`,
-                html: (await render(emailComponent)).body
+                html: await renderer.render(emailComponent)
             };
             let sent = { success: false, error: null };
             if (!customSendEmailFunction && resendApiKey) {

package/dist/render/index.d.ts ADDED Viewed

@@ -0,0 +1,66 @@
+import { type DefaultTreeAdapterTypes } from 'parse5';
+import type { Config } from 'tailwindcss';
+export type TailwindConfig = Omit<Config, 'content'>;
+export type { DefaultTreeAdapterTypes as AST };
+/**
+ * Options for rendering a Svelte component
+ */
+export type RenderOptions = {
+    props?: Omit<Record<string, any>, '$$slots' | '$$events'> | undefined;
+    context?: Map<any, any>;
+    idPrefix?: string;
+};
+/**
+ * Email renderer that converts Svelte components to email-safe HTML with inlined Tailwind styles.
+ *
+ * @example
+ * ```ts
+ * import Renderer from 'better-svelte-email/renderer';
+ * import EmailComponent from './email.svelte';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
+ *
+ * const html = await renderer.render(EmailComponent, {
+ *   props: { name: 'John' }
+ * });
+ * ```
+ */
+export default class Renderer {
+    private tailwindConfig;
+    constructor(tailwindConfig?: TailwindConfig);
+    /**
+     * Renders a Svelte component to email-safe HTML with inlined Tailwind CSS.
+     *
+     * Automatically:
+     * - Converts Tailwind classes to inline styles
+     * - Injects media queries into `<head>` for responsive classes
+     * - Replaces DOCTYPE with XHTML 1.0 Transitional
+     * - Removes comments and Svelte artifacts
+     *
+     * @param component - The Svelte component to render
+     * @param options - Render options including props, context, and idPrefix
+     * @returns Email-safe HTML string
+     *
+     * @example
+     * ```ts
+     * const html = await renderer.render(EmailComponent, {
+     *   props: { username: 'john_doe', resetUrl: 'https://...' }
+     * });
+     * ```
+     */
+    render: (component: any, options?: RenderOptions | undefined) => Promise<string>;
+}
+/**
+ * Render HTML as plain text
+ * @param markup - HTML string
+ * @returns Plain text string
+ */
+export declare const toPlainText: (markup: string) => string;

package/dist/render/index.js ADDED Viewed

@@ -0,0 +1,138 @@
+import { render as svelteRender } from 'svelte/server';
+import { parse, serialize } from 'parse5';
+import { walk } from './utils/html/walk.js';
+import { setupTailwind } from './utils/tailwindcss/setup-tailwind.js';
+import { sanitizeStyleSheet } from './utils/css/sanitize-stylesheet.js';
+import { extractRulesPerClass } from './utils/css/extract-rules-per-class.js';
+import { getCustomProperties } from './utils/css/get-custom-properties.js';
+import { generate, List } from 'css-tree';
+import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules.js';
+import { addInlinedStylesToElement } from './utils/tailwindcss/add-inlined-styles-to-element.js';
+import { isValidNode } from './utils/html/is-valid-node.js';
+import { removeAttributesFunctions } from './utils/html/remove-attributes-functions.js';
+import { convert } from 'html-to-text';
+/**
+ * Email renderer that converts Svelte components to email-safe HTML with inlined Tailwind styles.
+ *
+ * @example
+ * ```ts
+ * import Renderer from 'better-svelte-email/renderer';
+ * import EmailComponent from './email.svelte';
+ *
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
+ *
+ * const html = await renderer.render(EmailComponent, {
+ *   props: { name: 'John' }
+ * });
+ * ```
+ */
+export default class Renderer {
+    tailwindConfig;
+    constructor(tailwindConfig = {}) {
+        this.tailwindConfig = tailwindConfig;
+    }
+    /**
+     * Renders a Svelte component to email-safe HTML with inlined Tailwind CSS.
+     *
+     * Automatically:
+     * - Converts Tailwind classes to inline styles
+     * - Injects media queries into `<head>` for responsive classes
+     * - Replaces DOCTYPE with XHTML 1.0 Transitional
+     * - Removes comments and Svelte artifacts
+     *
+     * @param component - The Svelte component to render
+     * @param options - Render options including props, context, and idPrefix
+     * @returns Email-safe HTML string
+     *
+     * @example
+     * ```ts
+     * const html = await renderer.render(EmailComponent, {
+     *   props: { username: 'john_doe', resetUrl: 'https://...' }
+     * });
+     * ```
+     */
+    render = async (component, options) => {
+        const { body } = svelteRender(component, options);
+        let ast = parse(body);
+        ast = removeAttributesFunctions(ast);
+        let classesUsed = [];
+        const tailwindSetup = await setupTailwind(this.tailwindConfig);
+        walk(ast, (node) => {
+            if (isValidNode(node)) {
+                const classAttr = node.attrs?.find((attr) => attr.name === 'class');
+                if (classAttr && classAttr.value) {
+                    const classes = classAttr.value.split(/\s+/).filter(Boolean);
+                    classesUsed = [...classesUsed, ...classes];
+                    tailwindSetup.addUtilities(classes);
+                }
+            }
+            return node;
+        });
+        const styleSheet = tailwindSetup.getStyleSheet();
+        sanitizeStyleSheet(styleSheet);
+        const { inlinable: inlinableRules, nonInlinable: nonInlinableRules } = extractRulesPerClass(styleSheet, classesUsed);
+        const customProperties = getCustomProperties(styleSheet);
+        const nonInlineStyles = {
+            type: 'StyleSheet',
+            children: new List().fromArray(Array.from(nonInlinableRules.values()))
+        };
+        sanitizeNonInlinableRules(nonInlineStyles);
+        const hasNonInlineStylesToApply = nonInlinableRules.size > 0;
+        let appliedNonInlineStyles = false;
+        let hasHead = false;
+        const unknownClasses = [];
+        ast = walk(ast, (node) => {
+            if (isValidNode(node)) {
+                const elementWithInlinedStyles = addInlinedStylesToElement(node, inlinableRules, nonInlinableRules, customProperties, unknownClasses);
+                if (node.nodeName === 'head') {
+                    hasHead = true;
+                }
+                return elementWithInlinedStyles;
+            }
+            return node;
+        });
+        let serialized = serialize(ast);
+        if (unknownClasses.length > 0) {
+            console.warn(`[better-svelte-email] You are using the following classes that were not recognized: ${unknownClasses.join(' ')}.`);
+        }
+        if (hasHead && hasNonInlineStylesToApply) {
+            appliedNonInlineStyles = true;
+            serialized = serialized.replace('<head>', '<head>' + '<style>' + generate(nonInlineStyles) + '</style>');
+        }
+        if (hasNonInlineStylesToApply && !appliedNonInlineStyles) {
+            throw new Error(`You are trying to use the following Tailwind classes that cannot be inlined: ${Array.from(nonInlinableRules.keys()).join(' ')}.
+For the media queries to work properly on rendering, they need to be added into a <style> tag inside of a <head> tag,
+the render function tried finding a <head> element but just wasn't able to find it.
+Make sure that you have a <head> element at any depth.
+This can also be our <Head> component.
+If you do already have a <head> element at some depth,
+please file a bug https://github.com/Konixy/better-svelte-email/issues/new?assignees=&labels=bug&projects=.`);
+        }
+        // Replace various DOCTYPE formats with XHTML 1.0 Transitional
+        serialized = serialized.replace(/<!DOCTYPE\s+html[^>]*>/i, '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
+        return serialized;
+    };
+}
+/**
+ * Render HTML as plain text
+ * @param markup - HTML string
+ * @returns Plain text string
+ */
+export const toPlainText = (markup) => {
+    return convert(markup, {
+        selectors: [
+            { selector: 'img', format: 'skip' },
+            { selector: '#__better-svelte-email-preview', format: 'skip' }
+        ]
+    });
+};

package/dist/render/utils/compatibility/sanitize-class-name.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * Replaces special characters to avoid problems on email clients.
+ *
+ * @param className - This should not come with any escaped charcters, it should come the same
+ * as is on the `className` attribute on React elements.
+ */
+export declare function sanitizeClassName(className: string): string;

package/dist/render/utils/compatibility/sanitize-class-name.js ADDED Viewed

@@ -0,0 +1,35 @@
+const digitToNameMap = {
+    '0': 'zero',
+    '1': 'one',
+    '2': 'two',
+    '3': 'three',
+    '4': 'four',
+    '5': 'five',
+    '6': 'six',
+    '7': 'seven',
+    '8': 'eight',
+    '9': 'nine'
+};
+/**
+ * Replaces special characters to avoid problems on email clients.
+ *
+ * @param className - This should not come with any escaped charcters, it should come the same
+ * as is on the `className` attribute on React elements.
+ */
+export function sanitizeClassName(className) {
+    return className
+        .replaceAll('+', 'plus')
+        .replaceAll('[', '')
+        .replaceAll('%', 'pc')
+        .replaceAll(']', '')
+        .replaceAll('(', '')
+        .replaceAll(')', '')
+        .replaceAll('!', 'imprtnt')
+        .replaceAll('>', 'gt')
+        .replaceAll('<', 'lt')
+        .replaceAll('=', 'eq')
+        .replace(/^[0-9]/, (digit) => {
+        return digitToNameMap[digit];
+    })
+        .replace(/[^a-zA-Z0-9\-_]/g, '_');
+}

package/dist/render/utils/css/extract-rules-per-class.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { type CssNode, type Rule } from 'css-tree';
+export declare function extractRulesPerClass(root: CssNode, classes: string[]): {
+    inlinable: Map<string, Rule>;
+    nonInlinable: Map<string, Rule>;
+};