How do I get the API to render new styles #894

paulsutherland · 2023-02-09T15:50:52Z

paulsutherland
Feb 9, 2023

Hi,

I am no doubt missing something very obvious, but I am having trouble getting this to work.

Any help will be gratefully appreciated.

When using the starter-api, if I drop in some new html into the example.js file it does not compile any new classes in the output.

Keeping everything as is and only changing the example.js file, I expected to be able to update the template and the build would pull out any new tailwind classes I added eg:

const Maizzle = require('@maizzle/framework')

let template = `---
preheader: Using Maizzle on the server
image: https://images.unsplash.com/photo-1565932887479-b18108f07ffd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80
---

<extends src="layout.html">
  <block name="template">
    <div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
      <div class="lg:w-1/2 px-6">
        <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">
        ADDRESS</h2>

        <p class="mt-1">1 New Street, New Town</p>
      </div>

      <div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
        <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs">
        EMAIL</h2><a class="text-indigo-500 leading-relaxed">example@email.com</a>

        <h2 class="title-font font-semibold text-gray-900 tracking-widest text-xs mt-4">
        PHONE</h2>

        <p class="leading-relaxed">123-456-7890</p>
      </div>
    </div>
  </block>
</extends>
`

Maizzle.render(
  template,
  {
    maizzle: {
      prettify: true,
      inlineCSS: true,
      removeUnusedCSS: true,
      shorthandInlineCSS: true,
    },
    tailwind: {
      config: './tailwind.config.js',
    },
  }
)
  .then(({html}) => console.log(html))

However, the output is:

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
  <meta charset="utf-8">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
  </style>
  <![endif]-->
</head>
<body style="-webkit-font-smoothing: antialiased; word-break: break-word; margin: 0; width: 100%; padding: 0">
  <div style="display: none">
    Using Maizzle on the server
    &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
  </div>
  <div role="article" aria-roledescription="email" aria-label lang="en">
    <div style="position: relative; display: flex; flex-wrap: wrap; border-radius: 4px; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-top: 24px; padding-bottom: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)">
      <div style="padding-left: 24px; padding-right: 24px">
        <h2 style="font-size: 12px; font-weight: 600; letter-spacing: 0.1em; --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity))">
          ADDRESS</h2>
        <p style="margin-top: 4px">1 New Street, New Town</p>
      </div>
      <div style="margin-top: 16px; padding-left: 24px; padding-right: 24px">
        <h2 style="font-size: 12px; font-weight: 600; letter-spacing: 0.1em; --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity))">
          EMAIL</h2><a style="line-height: 1.625; --tw-text-opacity: 1; color: rgb(99 102 241 / var(--tw-text-opacity))">example@email.com</a>
        <h2 style="margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity))">
          PHONE</h2>
        <p style="line-height: 1.625">123-456-7890</p>
      </div>
    </div>
  </div>
</body>
</html>

cossssmin · 2023-02-11T13:49:30Z

cossssmin
Feb 11, 2023
Maintainer

I see CSS variables in the inlined CSS, looks like the Maizzle.render method in example.js is either pointed at the wrong or an inexistent tailwind.config.js. Or maybe that is on purpose?

Otherwise looks like CSS is generated and inlined correctly, what new classes aren't compiled?

1 reply

paulsutherland Feb 17, 2023
Author

Sorry for the late reply.

So it is working fine now - I am not sure what was happening 😕

Sorry for the noise.

Cheers...

Paul

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maizzle

How do I get the API to render new styles #894

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Maizzle

How do I get the API to render new styles #894

Uh oh!

paulsutherland Feb 9, 2023

Replies: 1 comment · 1 reply

Uh oh!

cossssmin Feb 11, 2023 Maintainer

Uh oh!

paulsutherland Feb 17, 2023 Author

paulsutherland
Feb 9, 2023

Replies: 1 comment 1 reply

cossssmin
Feb 11, 2023
Maintainer

paulsutherland Feb 17, 2023
Author