search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5.09k stars 320 forks source link

tw-plugin v0.4.0 removing tailwind class definitions #2612

Closed adamdva closed 6 months ago

adamdva commented 7 months ago

Current Behavior

Environment (up to date latest sveltekit with skeleton project): svelte: 4.2.13 tailwindcss: 3.4.3 vite: 5.2.8 node: 20.12.7 sveltejs/kit: 2.5.5 sveltejs/adapter-node: 5.0.1 @skeletonlabs/skeleton: 2.9.1 @skeletonlabs/tw-plugin: 0.4.0

Doing a full pnpm run build in our turborepo project, and executing via node dist/ is no longer using the tailwing css classes, so our webapp is unusable. This started when tw-plugin dependency was updated today.

Expected Behavior

reverting the tw-plugin to 0.3.1 and rebuilding resolves the issue.

Steps To Reproduce

No response

Link to Reproduction / Stackblitz

No response

More Information

No response

endigo9740 commented 7 months ago

Hey @adamdva I'd be highly suspect of this week's tw-plugin causing the issues as described. We've been busy with Skeleton v3, so the changes for that package were limited to minor cosmetic changes to scrollbar styling. And this was the first update to that package in a few months. You're welcome to scan through the release details to understand what changed. Honestly it was very minor though:

I'd encourage you to review all dependencies that updated in your project and see if you can pinpoint the point of failure. It also be valuable to know what the prior versions of the Skeleton packages you updated from. Especially if you moved from v1.x -> v2.x for the core package, as there would be a migration process for a major release like this.

Doing a full pnpm run build in our turborepo project, and executing via node dist/ is no longer using the tailwing css classes, so our webapp is unusable.

I've never personally used Turborepo, but typically you want to preview a local build using:

pnpm run build
pnpm run preview

But again, your project configuration may differ here.

adamdva commented 7 months ago

Looking at that change diff for tw-plugin, it doesn't look like it might be effecting the build, however, if I do nothing else besides toggle tw-plugin between 0.3.1 and 0.4.0, the issue is seen.

This does not occur when executing in dev mode, only after a full build and executing from the compiled code with node dist/

Several other packages have been updated in the last few days, so the issue could be in one of them, but is only exposed with the tw-plugin update.

Others that have changed:

I suspected it might have something to do with vite-plugin-tailwind-purgecss, which will not be needed in tailwind 4, but even removing it from the vite.config.ts did not help.

I've tried backing out the other updates, and the only thing that resulting in the issue is tw-plugin. My work-around is to not update the library, so ok for now, and hope it resolves itself with future releases.

endigo9740 commented 7 months ago

@adamdva thanks for expanding with more information.

Just to make sure we're clear, a small cosmetic CSS change in the tw-plugin should never cause the issue you're describing. But I can empathize with how confusing it must be if exchanging that package triggers the issue.

You may be onto something with the PurgeCSS plugin. There was a major update to the plugin this week that should make it much easier to use, but may be a factor here:

You mentioned disabling this did not help, but can you perhaps try reverting the PurgeCSS plugin to 0.2.1 and see if that has an affect? If so I can coordinate with Adrian (the author and fellow Skeleton maintainer) to help troubleshoot your issue.

Perhaps adhering the changes mentioned here will be enough to resolve this for you.

UPDATE:

The new Skeleton doc and CLI changes related to the PurgeCSS update are now live: https://www.skeleton.dev/docs/purgecss

adamdva commented 7 months ago

@endigo9740 Thank you for you attention and responses. I have tested rolling back the vite-plugin-tailwind-purgecss to 0.2.1 and experience the same issue with tw-plugin 0.4.0, while tw-plugin 0.3.1 worked fine. I have PurgeCSS configured as described in the latest docs. I understand that the turbo/sveltekit/vite/skeleton/tailwind build process is very complex, and something in my setup may be the issue, I just can't find what else is effecting the build. I can continue to use 0.3.1, and revisit it when tailwind 4 comes out. thanks again

endigo9740 commented 7 months ago

No problem @adamdva, I understand. If by chance you do come across a fix for this please let us know. It may be helpful for other users. Likewise I'll keep and ear to the ground if anyone else reports similar issues - but so far your case does seem isolated.

You can expect some sizable updates to Skeleton in v3 and of course again in the future when Tailwind v4 drops. I'd encourage you to test both, as the former will likely come sooner than the latter!

In the meantime, I'll go ahead and close this issue. But I'm happy to reopen if we can determine a change is needed on our end.

Good luck!

endigo9740 commented 6 months ago

Hey @adamdva, so we've finally had a couple other users report similar issues on Discord today. After troubleshooting with them, they've confirmed the styles that are missing are limited to those within custom modals.

We're currently gathering information to try to pinpoint the issue:

  1. Were your app's missing styles limited to modals as well?
  2. Are you building the project on a Windows computer
  3. And if you don't mind, just double checking what version of the PurgeCSS plugin with npm ls.

If we stubble upon a solution I'll make sure to share it here as well asap!

ollema commented 6 months ago

just wanted to add that for me, removing the purge css plugin did not seem to work at first. but I forgot to clear the browser cache. when I cleared the browser cache and I disabled the plugin it started to work again!

endigo9740 commented 6 months ago

@AdrianGonz97 FYI ^^^

knd775 commented 6 months ago

just wanted to add that for me, removing the purge css plugin did not seem to work at first. but I forgot to clear the browser cache. when I cleared the browser cache and I disabled the plugin it started to work again!

Yep, this was my experience as well. It led me to mistakenly believe it was the tw-plugin's fault.

AdrianGonz97 commented 6 months ago

I think this specific issue is different than what the both of you are experiencing @ollema @knd775 .

OP says their app is no longer using the tailwind css classes, so our webapp is unusable., which tells me that everything is being purged rather than just a couple of TW classes. @adamdva Are you on windows? There was a windows specific bug in vite-plugin-tailwind-purgecss for v0.3.0 that's now been resolved in v0.3.1.

Re: Modals I've raised an issue in the purge plugin repo where I list the cause, though I haven't come up with a fix yet. You can keep track of it here: https://github.com/AdrianGonz97/vite-plugin-tailwind-purgecss/issues/32

endigo9740 commented 6 months ago

If Adrian is correct the issue for which this thread was created should now be solved, so I'm going to mark this issue closed. Adam, feel free to confirm when you can - Adrian and I will see it.

Per modals - let's move further discussion over the the issue Adrian linked above.

Thanks for help on this one guys!

adamdva commented 6 months ago

Hello, Sorry I didn't see and reply earlier.

  1. No, the missing styles are not limited to modals. The initial +layout.svelte with a Skeleton AppShell has the tailwind CSS working fine. It does have some modal defined in it. Below that the tailwind CSS gets purged. We're using the svelte version of xyflow, and the custome nodes lose all the tailwind styling.
  2. No. My development machine is windows, but I build in a linux docker dev container using VSCode dev container plugin.
  3. My package-lock.yaml shows vite-plugin-tailwind-purgecss@0.3.1

Hey @adamdva, so we've finally had a couple other users report similar issues on Discord today. After troubleshooting with them, they've confirmed the styles that are missing are limited to those within custom modals.

We're currently gathering information to try to pinpoint the issue:

  1. Were your app's missing styles limited to modals as well?
  2. Are you building the project on a Windows computer
  3. And if you don't mind, just double checking what version of the PurgeCSS plugin with npm ls.

If we stubble upon a solution I'll make sure to share it here as well asap!

endigo9740 commented 6 months ago

Thanks for confirming Adam.

@AdrianGonz97 pinging you for visibility.

AdrianGonz97 commented 6 months ago

Hey all, I just released vite-plugin-tailwind-purgecss version 0.3.2, a patch that should fix the issues for @knd775 and @ollema. Not quite sure if it'll fix your issue, @adamdva, but please try it out and let us know!

knd775 commented 6 months ago

Fixed for us! Thanks!