nuxt-modules / tailwindcss

Tailwind CSS module for Nuxt

Home Page:https://tailwindcss.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nuxt's import protection triggers

manniL opened this issue · comments

Version

@nuxtjs/tailwindcss: 6.11.4
nuxt: 3.10.2

Reproduction Link

https://stackblitz.com/edit/github-hoyhk3?file=tailwind.config.ts,package.json

Steps to reproduce

  1. Start the app
  2. See the import protection in the console

What is Expected?

No error

What is actually happening?

Nuxt's import protection is triggering

Workaround

Remove the content in the Tailwind Config, then restart the server.
This means that files from server/ are not imported and analyzed anymore, not triggering the protection.

Related

nuxt/nuxt#25534
nuxt/nuxt#25162

Would this mean that we include something like !${nuxt.options.serverDir}/**/*.ts in the content? This may cause side-effects; some devs may be adding in styles from server-side possibly?

Although the module would still be resolving the right content, while this seems to be the user-input causing the issue - so they would have to narrow the paths accordingly. What do you think?

Would this mean that we include something like !${nuxt.options.serverDir}/**/*.ts in the content? This may cause side-effects; some devs may be adding in styles from server-side possibly?

I never worked with negative globs in the tailwind config. Not sure 🤔
Ideally this could be solved differently as I think it is reasonable to check server-styles (e.g. when rendering HTML via serve routes).

(cc @danielroe @pi0 so you are aware)

The module doesn't automatically add the serverDir; the dev has added that explicitly in the configuration (being user input), so I would ask them to narrow the glob and/or add '!./src/server/**/*.ts' to their content array.

@ineshbose but what if the server (route e.g.) returns tailwind classes? 🤔
I think this is still a valid use case

@ineshbose but what if the server (route e.g.) returns tailwind classes? 🤔

I think this is still a valid use case

Yes you're right and I would assume that some devs may have already configured Tailwind according to it and have their adaptive solutions - if anyone can post that'll be great. 😊

But as the warning mentions, these classes may not be in server files but possibly a shared JSON and/or the same classes are somewhere in the non-serverDir code as well - so server added classes aren't unique.