refactor: first class HMR support

[ineshbose]

resolves #682

Planned for 6.12.0. This PR will be open for a while.

Test on Stackblitz: https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/first-class-hmr

Still very much in progress, but any efforts on testing this would be appreciated;
there are a few issues like importing CJS/ESM/TS in one file, template reloading, merging strategy, etc..

[ineshbose]

ALSO NEED TO TEST WITH WEBPACK

[ineshbose]

It's also possible that this has broken the normal HMR for other files 🥲
likely due to layers/loading CJS in config

[ineshbose]

Another thing to note: plugins will also work with Tailwind and intellisense (they can't be added through hooks as they won't be serialized in the function) - this could mean a few different things.

One of the tests for this is failing where we have require('something-that-doesnt-exist') in the plugins (and that is reasonable IMO)

[ineshbose]

CHANGES NEEDED IN
NUXT/UI: pass config as template and in configPath
NUXT/UI-PRO: pushing to content

[ineshbose]

CHANGES NEEDED IN
NUXT/UI: pass config as template and in configPath
NUXT/UI-PRO: pushing to content

the update to nuxt/ui exposes a bug in resolveModulePaths as that respects nuxt.options._layers over installModule options. Plus, I see it ignore layers' inline configs too (maybe intentional)

[ineshbose]

CHANGES NEEDED IN NUXT/UI: pass config as template and in configPath NUXT/UI-PRO: pushing to content

refer: nuxt/ui#1272, https://github.com/nuxt/ui-pro/pull/205

the update to nuxt/ui exposes a bug in resolveModulePaths as that respects nuxt.options._layers over installModule options. Plus, I see it ignore layers' inline configs too (maybe intentional)

refer: c7fe392

[ineshbose]

I think I should change my approach and not use defu to merge updates with the fresh config but rather generate more code in the template.

[ineshbose]

Wow. That worked surprisingly well - didn't even need to use knitwork.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
TailwindCSS	Edit on Studio ↗︎	View Live Preview	2c0d664

[ineshbose]

seems like https://github.com/unjs/c12?tab=readme-ov-file#watching-configuration was also an option... or maybe it wouldn't have worked the same way as we need to generate code after hook manipulation anyway. Will evaluate after working on #808

[ineshbose]

@benjamincanac would you be able to try this out with nuxt/ui using nightly?

[TechAkayy]

@benjamincanac would you be able to try this out with nuxt/ui using nightly?

Hi @benjamincanac,

I have tested this merge in my nuxt-ui sample app and tagged you here - #682 (comment).

But, the repo that I used in my testing is not using the latest nuxt-ui, and doesn't use nuxt-ui-pro, so would be great if you can try this out on your end, thanks in advance.

[benjamincanac]

@ineshbose Just tried it out and encountered the same errors as @TechAkayy: Pre-transform error: [postcss] Cannot read properties of undefined (reading 'includes').

Is there some breaking changes to take into account? I've made this draft PR if you want to try yourself: nuxt/ui#1397

[ineshbose]

Thanks for reporting @benjamincanac; I've pushed workaround/fix on the same PR. Lets continue discussion in #682.