Bug: using @apply with prose prevents re-render

[jsbrain]

This is a very odd bug I just discovered and I'm actually not even sure if it's a maizzle or tailwind thing:

When using @apply with the prose class and applying it to any html element the template rendering won't work anymore.

Using prose on the element directly though works but only if the file is not updated directly but another one instead. This is kinda hard to explain and is better to understand by checking it out yourself.

To reproduce, clone https://github.com/jsbrain/maizzle-render-bug and checkout the prose-bug branch. Start the server and follow the instructions in src/templates/nested/nested.md.

This might be related to #885 but I'm not sure.

The weird thing to me is not even that using @apply prose; and applying the custom class to an element causes an error, that could happen for whatever reason but the fact that even just using prose directly on an element seems to somehow cause a partial error on the styling while keeping the other applied classes/styles intact.

So this makes it questionable if it's actually a "prose compatibility thing" or again some kind of cache issue because why would it work when saving one file but not saving another?!

Sorry I keep coming up with those super "edgy" bugs 😵‍💫

• Maizzle Version: 4.4.0-beta.9
• Node.js Version: v16.17.1

[cossssmin]

Found the issue, it's not a prose bug but it's this line in Maizzle:

framework/src/generators/output/to-string.js

Line 40 in 3973b87

config: get(options, 'tailwind.config', {})

That line compiles Tailwind with a config set to an empty object. It happens both when developing locally and when using Maizzle programmatically.

When you start the dev server, Tailwind is compiled correctly using your tailwind.config.js (or whatever config object/file name string you have in build.tailwind.config), but on subsequent file changes it uses that empty config - which is wrong, of course.

We're using lodash.get here so updating the fallback to be basically undefined will do it, as the Tailwind CSS generator in Maizzle will handle that correctly and will use either your Tailwind config or the default one with rem and such:

- config: get(options, 'tailwind.config', {})
+ config: get(options, 'tailwind.config')

I'll also change that Received empty HTML, please save your file again warning to actually throw the error that was caught when saving a file while developing locally, so you can see the error stack.

Had it been like that you would have immediately noticed the issue with prose in this case, here's what it would have output:

⠋ Building email...F:\open-source\maizzle\_starters\starter-markdown\node_modules\@maizzle\framework\src\generators\tailwindcss.js:125
        throw new SyntaxError(error)
              ^

SyntaxError: CssSyntaxError: F:\open-source\maizzle\_starters\starter-markdown\src\css\markdown.css:10:3: The `prose` class does not exist. If `prose` is a custom class, make sure it is defined within a `@layer` directive.

   8 | 
   9 | .prose-content {
> 10 |   @apply prose;
     |   ^
  11 | }
  12 | 

    at F:\open-source\maizzle\_starters\starter-markdown\node_modules\@maizzle\framework\src\generators\tailwindcss.js:125:15
    at async module.exports [as toString] (F:\open-source\maizzle\_starters\starter-markdown\node_modules\@maizzle\framework\src\generators\output\to-string.js:34:18)

Thanks for spotting this, it's a pretty nasty bug. And by all means, please do keep these super edgy bug reports coming 😅 This is the sort of stuff that helps make Maizzle better and I truly appreciate it 🙌

[cossssmin]

Found another bug that I'm not sure yet when it was introduced, looks like beta.9 outputs the file at a wrong location when developing locally, i.e. in build_local/src/templates/example.html instead of just build_local/example.html... looking into it!

[jsbrain]

Thanks man very much appreciate your effort in this as well!

Where is the best place to send donations for your endeavors? 😁

[cossssmin]

The best way to support Maizzle will be mailviews.com, which we'll soon release an announcement about ;)

[cossssmin]

Found another bug that I'm not sure yet when it was introduced, looks like beta.9 outputs the file at a wrong location when developing locally, i.e. in build_local/src/templates/example.html instead of just build_local/example.html... looking into it!

Fixed it in #901, some paths were not normalized and that was causing issues on Windows. Curious nobody reported it so far, guess most beta users are on a Mac 😅

[cossssmin]

Released v4.4.0-beta.10, let me know if anything 👍

[jsbrain]

Works like a charm! 🥳 Thanks!

[afmp94]

The best way to support Maizzle will be mailviews.com, which we'll soon release an announcement about ;)

@cossssmin do you have an ETA for mail views?