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

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

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 (66) hide show

package/README.md +1 -0
package/dist/components/Body.svelte +7 -3
package/dist/components/Button.svelte +10 -12
package/dist/components/Button.svelte.d.ts +2 -2
package/dist/index.d.ts +2 -6
package/dist/index.js +3 -5
package/dist/preprocessor/index.d.ts +19 -0
package/dist/preprocessor/index.js +19 -0
package/dist/preview/EmailPreview.svelte +539 -196
package/dist/preview/EmailPreview.svelte.d.ts +11 -1
package/dist/preview/EmailTreeNode.svelte +255 -0
package/dist/preview/EmailTreeNode.svelte.d.ts +10 -0
package/dist/preview/Favicon.svelte +106 -0
package/dist/preview/Favicon.svelte.d.ts +5 -0
package/dist/preview/email-tree.d.ts +13 -0
package/dist/preview/email-tree.js +61 -0
package/dist/preview/index.d.ts +35 -5
package/dist/preview/index.js +87 -37
package/dist/preview/theme.css +42 -0
package/dist/render/index.d.ts +66 -0
package/dist/render/index.js +138 -0
package/dist/render/utils/compatibility/sanitize-class-name.d.ts +7 -0
package/dist/render/utils/compatibility/sanitize-class-name.js +35 -0
package/dist/render/utils/css/extract-rules-per-class.d.ts +5 -0
package/dist/render/utils/css/extract-rules-per-class.js +37 -0
package/dist/render/utils/css/get-custom-properties.d.ts +8 -0
package/dist/render/utils/css/get-custom-properties.js +37 -0
package/dist/render/utils/css/is-rule-inlinable.d.ts +2 -0
package/dist/render/utils/css/is-rule-inlinable.js +6 -0
package/dist/render/utils/css/make-inline-styles-for.d.ts +3 -0
package/dist/render/utils/css/make-inline-styles-for.js +57 -0
package/dist/render/utils/css/resolve-all-css-variables.d.ts +8 -0
package/dist/render/utils/css/resolve-all-css-variables.js +123 -0
package/dist/render/utils/css/resolve-calc-expressions.d.ts +5 -0
package/dist/render/utils/css/resolve-calc-expressions.js +126 -0
package/dist/render/utils/css/sanitize-declarations.d.ts +15 -0
package/dist/render/utils/css/sanitize-declarations.js +354 -0
package/dist/render/utils/css/sanitize-non-inlinable-rules.d.ts +11 -0
package/dist/render/utils/css/sanitize-non-inlinable-rules.js +33 -0
package/dist/render/utils/css/sanitize-stylesheet.d.ts +2 -0
package/dist/render/utils/css/sanitize-stylesheet.js +8 -0
package/dist/render/utils/css/unwrap-value.d.ts +2 -0
package/dist/render/utils/css/unwrap-value.js +6 -0
package/dist/render/utils/html/is-valid-node.d.ts +2 -0
package/dist/render/utils/html/is-valid-node.js +3 -0
package/dist/render/utils/html/remove-attributes-functions.d.ts +2 -0
package/dist/render/utils/html/remove-attributes-functions.js +10 -0
package/dist/render/utils/html/walk.d.ts +15 -0
package/dist/render/utils/html/walk.js +36 -0
package/dist/render/utils/tailwindcss/add-inlined-styles-to-element.d.ts +4 -0
package/dist/render/utils/tailwindcss/add-inlined-styles-to-element.js +61 -0
package/dist/render/utils/tailwindcss/pixel-based-preset.d.ts +2 -0
package/dist/render/utils/tailwindcss/pixel-based-preset.js +58 -0
package/dist/render/utils/tailwindcss/setup-tailwind.d.ts +7 -0
package/dist/render/utils/tailwindcss/setup-tailwind.js +67 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/index.d.ts +2 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/index.js +899 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/preflight.d.ts +2 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/preflight.js +396 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/theme.d.ts +2 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/theme.js +465 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/utilities.d.ts +2 -0
package/dist/render/utils/tailwindcss/tailwind-stylesheets/utilities.js +4 -0
package/dist/utils/index.d.ts +2 -1
package/dist/utils/index.js +13 -10
package/package.json +39 -20

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.
  *
@@ -63,53 +63,91 @@ export const getEmailComponent = async (emailPath, file) => {
         throw new Error(`Failed to import email component '${fileName}'. Make sure the file exists and includes the <Head /> component.\nOriginal error: ${err}`);
     }
 };
+const getEmailSource = async (emailPath, file) => {
+    const normalizedEmailPath = emailPath.replace(/\\/g, '/').replace(/\/+$/, '');
+    const normalizedFile = file.replace(/\\/g, '/').replace(/^\/+/, '');
+    const candidates = new Set();
+    const relativeEmailPath = normalizedEmailPath.replace(/^\/+/, '');
+    if (normalizedEmailPath) {
+        candidates.add(path.resolve(process.cwd(), relativeEmailPath, `${normalizedFile}.svelte`));
+        candidates.add(path.resolve(process.cwd(), normalizedEmailPath, `${normalizedFile}.svelte`));
+        candidates.add(path.resolve(normalizedEmailPath, `${normalizedFile}.svelte`));
+    }
+    candidates.add(path.resolve(process.cwd(), `${normalizedFile}.svelte`));
+    for (const candidate of candidates) {
+        try {
+            return await fs.promises.readFile(candidate, 'utf8');
+        }
+        catch {
+            // continue to next candidate
+        }
+    }
+    console.warn(`Source file not found for ${normalizedFile} in ${normalizedEmailPath}`);
+    return null;
+};
 /**
  * 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';
  *
- * export const actions = createEmail;
+ * const renderer = new Renderer({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         brand: '#FF3E00'
+ *       }
+ *     }
+ *   }
+ * });
+ *
+ * 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);
+                const source = await getEmailSource(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,
+                    source
+                };
+            }
+            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 +166,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 +207,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/preview/theme.css ADDED Viewed

@@ -0,0 +1,42 @@
+:root {
+	--background: oklch(98.5% 0.001 106.423);
+	--foreground: oklch(21.6% 0.006 56.043);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.147 0.004 49.25);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.147 0.004 49.25);
+	--primary: oklch(0.216 0.006 56.043);
+	--primary-foreground: oklch(0.985 0.001 106.423);
+	--secondary: oklch(0.958 0.003 48.717);
+	--secondary-foreground: oklch(0.454 0.01 67.558);
+	--muted: oklch(0.9483 0.0061 67.75);
+	--muted-foreground: oklch(0.4761 0.021783 55.8952);
+	--accent: oklch(0.97 0.001 106.424);
+	--accent-foreground: oklch(0.216 0.006 56.043);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.923 0.003 48.717);
+	--input: oklch(0.923 0.003 48.717);
+	--ring: oklch(0.709 0.01 56.259);
+	--svelte: #f73b01;
+}
+.dark {
+	--background: oklch(14.7% 0.004 49.25);
+	--foreground: oklch(97% 0.001 106.424);
+	--card: oklch(0.216 0.006 56.043);
+	--card-foreground: oklch(0.985 0.001 106.423);
+	--popover: oklch(0.216 0.006 56.043);
+	--popover-foreground: oklch(0.985 0.001 106.423);
+	--primary: oklch(0.923 0.003 48.717);
+	--primary-foreground: oklch(0.216 0.006 56.043);
+	--secondary: oklch(0.216 0.006 56.043);
+	--secondary-foreground: oklch(0.709 0.01 56.259);
+	--muted: oklch(0.268 0.007 34.298);
+	--muted-foreground: oklch(0.7348 0.0326 67.28);
+	--accent: oklch(0.268 0.007 34.298);
+	--accent-foreground: oklch(0.985 0.001 106.423);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.553 0.013 58.071);
+}

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>;
+};

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

@@ -0,0 +1,37 @@
+import { string, walk } from 'css-tree';
+import { isRuleInlinable } from './is-rule-inlinable.js';
+export function extractRulesPerClass(root, classes) {
+    const classSet = new Set(classes);
+    const inlinableRules = new Map();
+    const nonInlinableRules = new Map();
+    walk(root, {
+        visit: 'Rule',
+        enter(rule) {
+            const selectorClasses = [];
+            walk(rule, {
+                visit: 'ClassSelector',
+                enter(classSelector) {
+                    selectorClasses.push(string.decode(classSelector.name));
+                }
+            });
+            if (isRuleInlinable(rule)) {
+                for (const className of selectorClasses) {
+                    if (classSet.has(className)) {
+                        inlinableRules.set(className, rule);
+                    }
+                }
+            }
+            else {
+                for (const className of selectorClasses) {
+                    if (classSet.has(className)) {
+                        nonInlinableRules.set(className, rule);
+                    }
+                }
+            }
+        }
+    });
+    return {
+        inlinable: inlinableRules,
+        nonInlinable: nonInlinableRules
+    };
+}

package/dist/render/utils/css/get-custom-properties.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { type CssNode, type Declaration } from 'css-tree';
+export interface CustomProperty {
+    syntax?: Declaration;
+    inherits?: Declaration;
+    initialValue?: Declaration;
+}
+export type CustomProperties = Map<string, CustomProperty>;
+export declare function getCustomProperties(node: CssNode): Map<string, CustomProperty>;

package/dist/render/utils/css/get-custom-properties.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { generate, walk } from 'css-tree';
+export function getCustomProperties(node) {
+    const customProperties = new Map();
+    walk(node, {
+        visit: 'Atrule',
+        enter(atrule) {
+            if (atrule.name === 'property' && atrule.prelude) {
+                const prelude = generate(atrule.prelude);
+                if (prelude.startsWith('--')) {
+                    let syntax;
+                    let inherits;
+                    let initialValue;
+                    walk(atrule, {
+                        visit: 'Declaration',
+                        enter(declaration) {
+                            if (declaration.property === 'syntax') {
+                                syntax = declaration;
+                            }
+                            if (declaration.property === 'inherits') {
+                                inherits = declaration;
+                            }
+                            if (declaration.property === 'initial-value') {
+                                initialValue = declaration;
+                            }
+                        }
+                    });
+                    customProperties.set(prelude, {
+                        syntax,
+                        inherits,
+                        initialValue
+                    });
+                }
+            }
+        }
+    });
+    return customProperties;
+}

package/dist/render/utils/css/is-rule-inlinable.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { type Rule } from 'css-tree';
2	+ export declare function isRuleInlinable(rule: Rule): boolean;

package/dist/render/utils/css/is-rule-inlinable.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { find } from 'css-tree';
+export function isRuleInlinable(rule) {
+    const hasAtRuleInside = find(rule, (node) => node.type === 'Atrule') !== null;
+    const hasPseudoSelector = find(rule, (node) => node.type === 'PseudoClassSelector' || node.type === 'PseudoElementSelector') !== null;
+    return !hasAtRuleInside && !hasPseudoSelector;
+}

package/dist/render/utils/css/make-inline-styles-for.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { type CssNode } from 'css-tree';
+import type { CustomProperties } from './get-custom-properties.js';
+export declare function makeInlineStylesFor(inlinableRules: CssNode[], customProperties: CustomProperties): string;

package/dist/render/utils/css/make-inline-styles-for.js ADDED Viewed

@@ -0,0 +1,57 @@
+import { generate, walk } from 'css-tree';
+import { unwrapValue } from './unwrap-value.js';
+export function makeInlineStylesFor(inlinableRules, customProperties) {
+    let styles = '';
+    const localVariableDeclarations = new Map();
+    for (const rule of inlinableRules) {
+        walk(rule, {
+            visit: 'Declaration',
+            enter(declaration) {
+                if (declaration.property.startsWith('--')) {
+                    localVariableDeclarations.set(declaration.property, declaration);
+                }
+            }
+        });
+    }
+    for (const rule of inlinableRules) {
+        walk(rule, {
+            visit: 'Function',
+            enter(func, funcParentListItem) {
+                if (func.name === 'var') {
+                    let variableName;
+                    walk(func, {
+                        visit: 'Identifier',
+                        enter(identifier) {
+                            variableName = identifier.name;
+                            return this.break;
+                        }
+                    });
+                    if (variableName) {
+                        const definition = localVariableDeclarations.get(variableName);
+                        if (definition) {
+                            funcParentListItem.data = unwrapValue(definition.value);
+                        }
+                        else {
+                            // For most variables tailwindcss defines, they also define a custom
+                            // property for them with an initial value that we can inline here
+                            const customProperty = customProperties.get(variableName);
+                            if (customProperty?.initialValue) {
+                                funcParentListItem.data = unwrapValue(customProperty.initialValue.value);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        walk(rule, {
+            visit: 'Declaration',
+            enter(declaration) {
+                if (declaration.property.startsWith('--')) {
+                    return;
+                }
+                styles += `${declaration.property}: ${generate(declaration.value)} ${declaration.important ? '!important' : ''};`;
+            }
+        });
+    }
+    return styles;
+}

package/dist/render/utils/css/resolve-all-css-variables.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { type CssNode, type Declaration } from 'css-tree';
+export interface VariableDefinition {
+    declaration: Declaration;
+    path: CssNode[];
+    variableName: string;
+    definition: string;
+}
+export declare function resolveAllCssVariables(node: CssNode): void;