better-svelte-email 1.0.3 → 1.1.0-beta.0

package/dist/render/utils/css/sanitize-declarations.js

@@ -1,42 +1,5 @@
-import { generate, List, parse, walk } from 'css-tree';
-function rgbNode(r, g, b, alpha) {
-    const children = new List();
-    children.appendData({
-        type: 'Number',
-        value: r.toFixed(0)
-    });
-    children.appendData({
-        type: 'Operator',
-        value: ','
-    });
-    children.appendData({
-        type: 'Number',
-        value: g.toFixed(0)
-    });
-    children.appendData({
-        type: 'Operator',
-        value: ','
-    });
-    children.appendData({
-        type: 'Number',
-        value: b.toFixed(0)
-    });
-    if (alpha !== 1 && alpha !== undefined) {
-        children.appendData({
-            type: 'Operator',
-            value: ','
-        });
-        children.appendData({
-            type: 'Number',
-            value: alpha.toString()
-        });
-    }
-    return {
-        type: 'Function',
-        name: 'rgb',
-        children
-    };
-}
+import valueParser, {} from 'postcss-value-parser';
+// Color conversion constants
 const LAB_TO_LMS = {
     l: [0.3963377773761749, 0.2158037573099136],
     m: [-0.1055613458156586, -0.0638541728258133],
@@ -65,7 +28,7 @@ function oklchToOklab(oklch) {
         b: oklch.c * Math.sin((oklch.h / 180) * Math.PI)
     };
 }
-/** Convert oklab to RGB */
+/** Convert oklch to RGB */
 function oklchToRgb(oklch) {
     const oklab = oklchToOklab(oklch);
     const l = (oklab.l + LAB_TO_LMS.l[0] * oklab.a + LAB_TO_LMS.l[1] * oklab.b) ** 3;
@@ -80,31 +43,155 @@ function oklchToRgb(oklch) {
         b: clamp(b, 0, 255)
     };
 }
-function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
-    shorthandToReplace.property = start;
-    const values = shorthandToReplace.value.type === 'Value'
-        ? shorthandToReplace.value.children
-            .toArray()
-            .filter((child) => child.type === 'Dimension' || child.type === 'Number' || child.type === 'Percentage')
-        : [shorthandToReplace.value];
-    let endValue = shorthandToReplace.value;
-    if (values.length === 2) {
-        endValue = {
-            type: 'Value',
-            children: new List().fromArray([values[1]])
+function formatRgb(r, g, b, a) {
+    const rInt = Math.round(r);
+    const gInt = Math.round(g);
+    const bInt = Math.round(b);
+    if (a !== undefined && a !== 1) {
+        return `rgb(${rInt}, ${gInt}, ${bInt}, ${a})`;
+    }
+    return `rgb(${rInt}, ${gInt}, ${bInt})`;
+}
+function hexToRgb(hex) {
+    hex = hex.replace('#', '');
+    if (hex.length === 3) {
+        return {
+            r: parseInt(hex[0] + hex[0], 16),
+            g: parseInt(hex[1] + hex[1], 16),
+            b: parseInt(hex[2] + hex[2], 16)
+        };
+    }
+    if (hex.length === 4) {
+        return {
+            r: parseInt(hex[0] + hex[0], 16),
+            g: parseInt(hex[1] + hex[1], 16),
+            b: parseInt(hex[2] + hex[2], 16),
+            a: parseInt(hex[3] + hex[3], 16) / 255
+        };
+    }
+    if (hex.length === 5) {
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex[2] + hex[2], 16),
+            b: parseInt(hex[3] + hex[3], 16),
+            a: parseInt(hex[4] + hex[4], 16) / 255
+        };
+    }
+    if (hex.length === 6) {
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16)
         };
-        shorthandToReplace.value = {
-            type: 'Value',
-            children: new List().fromArray([values[0]])
+    }
+    if (hex.length === 7) {
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16),
+            a: parseInt(hex[6] + hex[6], 16) / 255
         };
     }
+    // 8 character hex
     return {
-        type: 'Declaration',
-        property: end,
-        value: endValue,
-        important: shorthandToReplace.important
+        r: parseInt(hex.slice(0, 2), 16),
+        g: parseInt(hex.slice(2, 4), 16),
+        b: parseInt(hex.slice(4, 6), 16),
+        a: parseInt(hex.slice(6, 8), 16) / 255
     };
 }
+function parseOklchValues(nodes) {
+    const result = {};
+    for (const node of nodes) {
+        if (node.type === 'word') {
+            const numMatch = node.value.match(/^(-?[\d.]+)(%|deg)?$/i);
+            if (numMatch) {
+                const value = parseFloat(numMatch[1]);
+                const unit = numMatch[2]?.toLowerCase();
+                if (unit === '%') {
+                    if (result.l === undefined) {
+                        result.l = value / 100;
+                    }
+                    else if (result.a === undefined) {
+                        result.a = value / 100;
+                    }
+                }
+                else if (unit === 'deg') {
+                    if (result.h === undefined) {
+                        result.h = value;
+                    }
+                }
+                else {
+                    if (result.l === undefined) {
+                        result.l = value;
+                    }
+                    else if (result.c === undefined) {
+                        result.c = value;
+                    }
+                    else if (result.h === undefined) {
+                        result.h = value;
+                    }
+                    else if (result.a === undefined) {
+                        result.a = value;
+                    }
+                }
+            }
+        }
+    }
+    return result;
+}
+function parseRgbValues(nodes) {
+    const result = {};
+    for (const node of nodes) {
+        if (node.type === 'word') {
+            const numMatch = node.value.match(/^(-?[\d.]+)(%)?$/);
+            if (numMatch) {
+                const value = parseFloat(numMatch[1]);
+                const isPercent = numMatch[2] === '%';
+                if (result.r === undefined) {
+                    result.r = isPercent ? (value * 255) / 100 : value;
+                }
+                else if (result.g === undefined) {
+                    result.g = isPercent ? (value * 255) / 100 : value;
+                }
+                else if (result.b === undefined) {
+                    result.b = isPercent ? (value * 255) / 100 : value;
+                }
+                else if (result.a === undefined) {
+                    result.a = isPercent ? value / 100 : value;
+                }
+            }
+        }
+    }
+    return result;
+}
+function transformColorMix(node) {
+    // We're expecting the structure to be something like:
+    // color-mix(in oklab, rgb(...) X%, transparent)
+    // Check if it ends with transparent
+    const lastNode = node.nodes[node.nodes.length - 1];
+    if (lastNode?.type !== 'word' || lastNode.value !== 'transparent') {
+        return null;
+    }
+    // Find the rgb function and percentage
+    let rgbFunc = null;
+    let percentage = null;
+    for (const child of node.nodes) {
+        if (child.type === 'function' && child.value === 'rgb') {
+            rgbFunc = child;
+        }
+        if (child.type === 'word' && child.value.endsWith('%')) {
+            percentage = parseFloat(child.value) / 100;
+        }
+    }
+    if (rgbFunc && percentage !== null) {
+        const rgbValues = parseRgbValues(rgbFunc.nodes);
+        if (rgbValues.r !== undefined && rgbValues.g !== undefined && rgbValues.b !== undefined) {
+            return formatRgb(rgbValues.r, rgbValues.g, rgbValues.b, percentage);
+        }
+    }
+    return null;
+}
 /**
  * Meant to do all the things necessary, in a per-declaration basis, to have the best email client
  * support possible.
@@ -118,237 +205,94 @@ function separteShorthandDeclaration(shorthandToReplace, [start, end]) {
  * - convert `margin-inline` into `margin-left` and `margin-right`;
  * - convert `margin-block` into `margin-top` and `margin-bottom`.
  */
-export function sanitizeDeclarations(nodeContainingDeclarations) {
-    walk(nodeContainingDeclarations, {
-        visit: 'Declaration',
-        enter(declaration, item, list) {
-            if (declaration.value.type === 'Raw') {
-                declaration.value = parse(declaration.value.value, {
-                    context: 'value'
-                });
-            }
-            if (/border-radius\s*:\s*calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(generate(declaration))) {
-                declaration.value = parse('9999px', { context: 'value' });
-            }
-            walk(declaration, {
-                visit: 'Function',
-                enter(func, funcParentListItem) {
-                    const children = func.children.toArray();
-                    if (func.name === 'oklch') {
-                        let l;
-                        let c;
-                        let h;
-                        let a;
-                        for (const child of children) {
-                            if (child.type === 'Number') {
-                                if (l === undefined) {
-                                    l = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                                if (c === undefined) {
-                                    c = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                                if (h === undefined) {
-                                    h = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                                if (a === undefined) {
-                                    a = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                            }
-                            if (child.type === 'Dimension' && child.unit === 'deg') {
-                                if (h === undefined) {
-                                    h = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                            }
-                            if (child.type === 'Percentage') {
-                                if (l === undefined) {
-                                    l = Number.parseFloat(child.value) / 100;
-                                    continue;
-                                }
-                                if (a === undefined) {
-                                    a = Number.parseFloat(child.value) / 100;
-                                }
-                            }
-                        }
-                        if (l === undefined || c === undefined || h === undefined) {
-                            throw new Error('Could not determine the parameters of an oklch() function.', {
-                                cause: declaration
-                            });
-                        }
-                        const rgb = oklchToRgb({
-                            l,
-                            c,
-                            h
+export function sanitizeDeclarations(root) {
+    root.walkDecls((decl) => {
+        // Handle infinity calc for border-radius
+        if (decl.prop === 'border-radius' && /calc\s*\(\s*infinity\s*\*\s*1px\s*\)/i.test(decl.value)) {
+            decl.value = '9999px';
+        }
+        // Handle shorthand properties
+        if (decl.prop === 'padding-inline') {
+            const values = decl.value.split(/\s+/).filter(Boolean);
+            decl.prop = 'padding-left';
+            decl.value = values[0];
+            decl.cloneAfter({ prop: 'padding-right', value: values[1] || values[0] });
+        }
+        if (decl.prop === 'padding-block') {
+            const values = decl.value.split(/\s+/).filter(Boolean);
+            decl.prop = 'padding-top';
+            decl.value = values[0];
+            decl.cloneAfter({ prop: 'padding-bottom', value: values[1] || values[0] });
+        }
+        if (decl.prop === 'margin-inline') {
+            const values = decl.value.split(/\s+/).filter(Boolean);
+            decl.prop = 'margin-left';
+            decl.value = values[0];
+            decl.cloneAfter({ prop: 'margin-right', value: values[1] || values[0] });
+        }
+        if (decl.prop === 'margin-block') {
+            const values = decl.value.split(/\s+/).filter(Boolean);
+            decl.prop = 'margin-top';
+            decl.value = values[0];
+            decl.cloneAfter({ prop: 'margin-bottom', value: values[1] || values[0] });
+        }
+        // Parse and transform color values
+        if (decl.value.includes('oklch(') ||
+            decl.value.includes('rgb(') ||
+            decl.value.includes('#') ||
+            decl.value.includes('color-mix(')) {
+            const parsed = valueParser(decl.value);
+            parsed.walk((node) => {
+                // Convert oklch to rgb
+                if (node.type === 'function' && node.value === 'oklch') {
+                    const oklchValues = parseOklchValues(node.nodes);
+                    if (oklchValues.l === undefined ||
+                        oklchValues.c === undefined ||
+                        oklchValues.h === undefined) {
+                        throw new Error('Could not determine the parameters of an oklch() function.', {
+                            cause: decl
                         });
-                        funcParentListItem.data = rgbNode(rgb.r, rgb.g, rgb.b, a);
-                    }
-                    if (func.name === 'rgb') {
-                        let r;
-                        let g;
-                        let b;
-                        let a;
-                        for (const child of children) {
-                            if (child.type === 'Number') {
-                                if (r === undefined) {
-                                    r = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                                if (g === undefined) {
-                                    g = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                                if (b === undefined) {
-                                    b = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                                if (a === undefined) {
-                                    a = Number.parseFloat(child.value);
-                                    continue;
-                                }
-                            }
-                            if (child.type === 'Percentage') {
-                                if (r === undefined) {
-                                    r = (Number.parseFloat(child.value) * 255) / 100;
-                                    continue;
-                                }
-                                if (g === undefined) {
-                                    g = (Number.parseFloat(child.value) * 255) / 100;
-                                    continue;
-                                }
-                                if (b === undefined) {
-                                    b = (Number.parseFloat(child.value) * 255) / 100;
-                                    continue;
-                                }
-                                if (a === undefined) {
-                                    a = Number.parseFloat(child.value) / 100;
-                                }
-                            }
-                        }
-                        if (r === undefined || g === undefined || b === undefined) {
-                            throw new Error('Could not determine the parameters of an rgb() function.', {
-                                cause: declaration
-                            });
-                        }
-                        if (a === undefined || a === 1) {
-                            funcParentListItem.data = rgbNode(r, g, b);
-                        }
-                        else {
-                            funcParentListItem.data = rgbNode(r, g, b, a);
-                        }
                     }
+                    const rgb = oklchToRgb({
+                        l: oklchValues.l,
+                        c: oklchValues.c,
+                        h: oklchValues.h
+                    });
+                    // Transform function node to word node
+                    node.type = 'word';
+                    node.value = formatRgb(rgb.r, rgb.g, rgb.b, oklchValues.a);
+                    node.nodes = [];
                 }
-            });
-            walk(declaration, {
-                visit: 'Hash',
-                enter(hash, hashParentListItem) {
-                    const hex = hash.value.trim();
-                    if (hex.length === 3) {
-                        const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
-                        const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
-                        const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
-                        hashParentListItem.data = rgbNode(r, g, b);
-                        return;
-                    }
-                    if (hex.length === 4) {
-                        const r = Number.parseInt(hex.charAt(0) + hex.charAt(0), 16);
-                        const g = Number.parseInt(hex.charAt(1) + hex.charAt(1), 16);
-                        const b = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
-                        const a = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16) / 255;
-                        hashParentListItem.data = rgbNode(r, g, b, a);
-                        return;
-                    }
-                    if (hex.length === 5) {
-                        const r = Number.parseInt(hex.slice(0, 2), 16);
-                        const g = Number.parseInt(hex.charAt(2) + hex.charAt(2), 16);
-                        const b = Number.parseInt(hex.charAt(3) + hex.charAt(3), 16);
-                        const a = Number.parseInt(hex.charAt(4) + hex.charAt(4), 16) / 255;
-                        hashParentListItem.data = rgbNode(r, g, b, a);
-                        return;
-                    }
-                    if (hex.length === 6) {
-                        const r = Number.parseInt(hex.slice(0, 2), 16);
-                        const g = Number.parseInt(hex.slice(2, 4), 16);
-                        const b = Number.parseInt(hex.slice(4, 6), 16);
-                        hashParentListItem.data = rgbNode(r, g, b);
-                        return;
-                    }
-                    if (hex.length === 7) {
-                        const r = Number.parseInt(hex.slice(0, 2), 16);
-                        const g = Number.parseInt(hex.slice(2, 4), 16);
-                        const b = Number.parseInt(hex.slice(4, 6), 16);
-                        const a = Number.parseInt(hex.charAt(6) + hex.charAt(6), 16) / 255;
-                        hashParentListItem.data = rgbNode(r, g, b, a);
-                        return;
+                // Convert space-based rgb to comma-based
+                if (node.type === 'function' && node.value === 'rgb') {
+                    const rgbValues = parseRgbValues(node.nodes);
+                    if (rgbValues.r === undefined || rgbValues.g === undefined || rgbValues.b === undefined) {
+                        throw new Error('Could not determine the parameters of an rgb() function.', {
+                            cause: decl
+                        });
                     }
-                    const r = Number.parseInt(hex.slice(0, 2), 16);
-                    const g = Number.parseInt(hex.slice(2, 4), 16);
-                    const b = Number.parseInt(hex.slice(4, 6), 16);
-                    const a = Number.parseInt(hex.slice(6, 8), 16) / 255;
-                    hashParentListItem.data = rgbNode(r, g, b, a);
+                    // Transform function node to word node
+                    node.type = 'word';
+                    node.value = formatRgb(rgbValues.r, rgbValues.g, rgbValues.b, rgbValues.a);
+                    node.nodes = [];
                 }
-            });
-            walk(declaration, {
-                visit: 'Function',
-                enter(func, parentListItem) {
-                    if (func.name === 'color-mix') {
-                        const children = func.children.toArray();
-                        // We're expecting the children here to be something like:
-                        // Identifier (in)
-                        // Identifier (oklab)
-                        // Operator (,)
-                        // FunctionNode (rgb(...))
-                        // Node (opacity)
-                        // Operator (,)
-                        // Identifier (transparent)
-                        const color = children[3];
-                        const opacity = children[4];
-                        if (func.children.last?.type === 'Identifier' &&
-                            func.children.last.name === 'transparent' &&
-                            color?.type === 'Function' &&
-                            color?.name === 'rgb' &&
-                            opacity) {
-                            color.children.appendData({
-                                type: 'Operator',
-                                value: ','
-                            });
-                            color.children.appendData(opacity);
-                            parentListItem.data = color;
-                        }
+                // Handle color-mix with transparent
+                if (node.type === 'function' && node.value === 'color-mix') {
+                    const result = transformColorMix(node);
+                    if (result) {
+                        // Transform function node to word node
+                        node.type = 'word';
+                        node.value = result;
+                        node.nodes = [];
                     }
                 }
+                // Convert hex to rgb
+                if (node.type === 'word' && node.value.startsWith('#')) {
+                    const rgb = hexToRgb(node.value);
+                    node.value = formatRgb(rgb.r, rgb.g, rgb.b, rgb.a);
+                }
             });
-            if (declaration.property === 'padding-inline') {
-                const paddingRight = separteShorthandDeclaration(declaration, [
-                    'padding-left',
-                    'padding-right'
-                ]);
-                list.insertData(paddingRight, item);
-            }
-            if (declaration.property === 'padding-block') {
-                const paddingBottom = separteShorthandDeclaration(declaration, [
-                    'padding-top',
-                    'padding-bottom'
-                ]);
-                list.insertData(paddingBottom, item);
-            }
-            if (declaration.property === 'margin-inline') {
-                const marginRight = separteShorthandDeclaration(declaration, [
-                    'margin-left',
-                    'margin-right'
-                ]);
-                list.insertData(marginRight, item);
-            }
-            if (declaration.property === 'margin-block') {
-                const paddingBottom = separteShorthandDeclaration(declaration, [
-                    'margin-top',
-                    'margin-bottom'
-                ]);
-                list.insertData(paddingBottom, item);
-            }
+            decl.value = valueParser.stringify(parsed.nodes);
         }
     });
 }

package/dist/render/utils/css/sanitize-non-inlinable-rules.d.ts

@@ -1,4 +1,4 @@
-import { type CssNode } from 'css-tree';
+import type { Root } from 'postcss';
 /**
  * This function goes through a few steps to ensure the best email client support and
  * to ensure that media queries and pseudo classes are applied correctly alongside
@@ -8,4 +8,4 @@ import { type CssNode } from 'css-tree';
  * 1. Converts all declarations in all rules into important ones
  * 2. Sanitizes class selectors of all non-inlinable rules
  */
-export declare function sanitizeNonInlinableRules(node: CssNode): void;
+export declare function sanitizeNonInlinableRules(root: Root): void;

package/dist/render/utils/css/sanitize-non-inlinable-rules.js

@@ -1,4 +1,3 @@
-import { string, walk } from 'css-tree';
 import { sanitizeClassName } from '../compatibility/sanitize-class-name.js';
 import { isRuleInlinable } from './is-rule-inlinable.js';
 /**
@@ -10,24 +9,20 @@ import { isRuleInlinable } from './is-rule-inlinable.js';
  * 1. Converts all declarations in all rules into important ones
  * 2. Sanitizes class selectors of all non-inlinable rules
  */
-export function sanitizeNonInlinableRules(node) {
-    walk(node, {
-        visit: 'Rule',
-        enter(rule) {
-            if (!isRuleInlinable(rule)) {
-                walk(rule.prelude, (node) => {
-                    if (node.type === 'ClassSelector') {
-                        const unescapedClassName = string.decode(node.name);
-                        node.name = sanitizeClassName(unescapedClassName);
-                    }
-                });
-                walk(rule, {
-                    visit: 'Declaration',
-                    enter(declaration) {
-                        declaration.important = true;
-                    }
-                });
-            }
+export function sanitizeNonInlinableRules(root) {
+    root.walkRules((rule) => {
+        if (!isRuleInlinable(rule)) {
+            // Sanitize class names in selector
+            // The regex matches class names including escaped characters (like \: or \/)
+            // Note: \\. must come FIRST in the alternation to properly match escapes
+            rule.selector = rule.selector.replace(/\.((?:\\.|[^\s.:>+~[#,])+)/g, (match, className) => {
+                const unescaped = className.replace(/\\(.)/g, '$1');
+                return '.' + sanitizeClassName(unescaped);
+            });
+            // Make all declarations important
+            rule.walkDecls((decl) => {
+                decl.important = true;
+            });
         }
     });
 }

package/dist/render/utils/css/sanitize-stylesheet.d.ts

@@ -1,2 +1,2 @@
-import type { StyleSheet } from 'css-tree';
-export declare function sanitizeStyleSheet(styleSheet: StyleSheet): void;
+import type { Root } from 'postcss';
+export declare function sanitizeStyleSheet(root: Root): void;

package/dist/render/utils/css/sanitize-stylesheet.js

@@ -1,8 +1,8 @@
 import { resolveAllCssVariables } from './resolve-all-css-variables.js';
 import { resolveCalcExpressions } from './resolve-calc-expressions.js';
 import { sanitizeDeclarations } from './sanitize-declarations.js';
-export function sanitizeStyleSheet(styleSheet) {
-    resolveAllCssVariables(styleSheet);
-    resolveCalcExpressions(styleSheet);
-    sanitizeDeclarations(styleSheet);
+export function sanitizeStyleSheet(root) {
+    resolveAllCssVariables(root);
+    resolveCalcExpressions(root);
+    sanitizeDeclarations(root);
 }

package/dist/render/utils/tailwindcss/add-inlined-styles-to-element.d.ts

@@ -1,4 +1,4 @@
-import type { Rule } from 'css-tree';
+import type { Rule } from 'postcss';
 import type { CustomProperties } from '../css/get-custom-properties.js';
 import type { AST } from '../../index.js';
 export declare function addInlinedStylesToElement(element: AST.Element, inlinableRules: Map<string, Rule>, nonInlinableRules: Map<string, Rule>, customProperties: CustomProperties, unknownClasses: string[]): AST.Element;

package/dist/render/utils/tailwindcss/setup-tailwind.d.ts

@@ -1,7 +1,7 @@
-import { type StyleSheet } from 'css-tree';
+import { type Root } from 'postcss';
 import type { TailwindConfig } from '../../index.js';
 export type TailwindSetup = Awaited<ReturnType<typeof setupTailwind>>;
 export declare function setupTailwind(config: TailwindConfig): Promise<{
     addUtilities: (candidates: string[]) => void;
-    getStyleSheet: () => StyleSheet;
+    getStyleSheet: () => Root;
 }>;

package/dist/render/utils/tailwindcss/setup-tailwind.js

@@ -1,4 +1,4 @@
-import { parse } from 'css-tree';
+import postcss, {} from 'postcss';
 import { compile } from 'tailwindcss';
 import indexCss from './tailwind-stylesheets/index.js';
 import preflightCss from './tailwind-stylesheets/preflight.js';
@@ -60,8 +60,8 @@ export async function setupTailwind(config) {
         addUtilities: function addUtilities(candidates) {
             css = compiler.build(candidates);
         },
-        getStyleSheet: function getCss() {
-            return parse(css);
+        getStyleSheet: function getStyleSheet() {
+            return postcss.parse(css);
         }
     };
 }