@travetto/email-inky 3.1.22 → 3.1.25

package/README.md

@@ -25,10 +25,10 @@ export default inkyTpl(<>
   <Title>Test Email</Title>
   <Summary>Email Summary</Summary>
   <Container>
-    <If key='person'>
+    <If attr='person'>
       <Row>
         <Column small={5}>
-          <Button href='https://google.com/[[query]]'>Hello <Value key='name' /></Button>
+          <Button href='https://google.com/{{query}}'>Hello <Value attr='name' /></Button>
         </Column>
       </Row>
     </If>
@@ -48,5 +48,6 @@ To that end, the module introduces additional components ([If Component](https:/
 ## Template Extension Points
 The template extension points are defined at:
    1. `email/main.scss` - The entry point for adding, and overriding any [sass](https://github.com/sass/dart-sass)
+   1. `email/inky.variables.scss` - Allows for specifying any variables that should be defined before [inky](https://github.com/zurb/inky)'s styles are loaded.
    1. `email/inky.wrapper.html` - Provides direct access to override the entire base HTML document for all HTML emails.
 In addition to the overrides, you can find the list of available settings at [Github](https://github.com/foundation/foundation-emails/blob/develop/scss/settings/_settings.scss)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travetto/email-inky",
-  "version": "3.1.22",
+  "version": "3.1.25",
   "description": "Email Inky templating module",
   "keywords": [
     "email",

package/src/render/html.ts

@@ -115,12 +115,12 @@ export const Html: RenderProvider<RenderContext> = {
     const pProps = parent.props as { columnVisited: boolean };
     if (!pProps.columnVisited) {
       pProps.columnVisited = true;
+
       const sibs = getKids(parent).filter(x => isOfType(x, 'Column'));
       if (sibs.length) {
         sibs[0].props.class = classStr(sibs[0].props.class ?? '', 'first');
         sibs[sibs.length - 1].props.class = classStr(sibs[sibs.length - 1].props.class ?? '', 'last');
       }
-
     }
 
     // Check for sizes. If no attribute is provided, default to small-12. Divide evenly for large columns
@@ -148,7 +148,7 @@ export const Html: RenderProvider<RenderContext> = {
       classes.push('hide-for-small');
     }
     if (props.largeOffset) {
-      classes.push(`large-offset-${props.smallOffset}`);
+      classes.push(`large-offset-${props.largeOffset}`);
     }
     if (props.hideLarge) {
       classes.push('hide-for-large');

package/src/render/renderer.ts

@@ -81,7 +81,12 @@ export class InkyRenderer {
    */
   static async render(root: DocumentShape, provider: RenderProvider<RenderContext>): Promise<string> {
     const ctx = new RenderContext();
-    const par = { props: { children: Array.isArray(root.text) ? root.text : [root.text] }, type: '', key: '' };
+    let par: JSXElement;
+    if (isJSXElement(root.text)) {
+      par = root.text;
+    } else {
+      par = { props: { children: Array.isArray(root.text) ? root.text : [] }, type: '', key: '' };
+    }
     const text = await this.#render(ctx, provider, root.text, [par]);
 
     let cleaned = `${text.replace(/\n{3,100}/msg, '\n\n').trim()}\n`;

package/src/wrapper.ts

@@ -19,8 +19,9 @@ export const inkyTpl = (content: JSXElement | JSXElement[]): MessageCompilationS
   styles: {
     search: [path.dirname(req.resolve('foundation-emails/scss/_global.scss'))],
     global: `
-@import 'settings/_settings.scss';    
-@import 'foundation-emails.scss';
+@import 'email/inky.variables';
+@import '_global';
+@import 'foundation-emails';
 `
   }
 });