tailwindlabs/tailwindcss

New classes not added when symlink is present

bagbag opened this issue · 1 comments

bagbag commented

What version of Tailwind CSS are you using?

v3.2.6

What build tool (or framework if it abstracts the build tool) are you using?

Angular 15.1.4

What version of Node.js are you using?

v19.6.0

What browser are you using?

Chrome

What operating system are you using?

Linux

Reproduction URL

https://github.com/bagbag/tailwind-symlink-bug

Describe your issue

The project is a minimal angular project (--minimal) with only tailwind added.

The project has 2 changes:

  1. Added tailwind classes to index.html and app.component.ts
  2. Symlink: ln -s ../../node_modules/@angular/core/README.md assets/README.md

New tailwind classes are not added in ng serve without restarting it. Try to change bg-red-500 to bg-green-500 in app.component.ts. The sqaure will disappear as bg-green-500 is not added to the css output.

This issue can be fixed by removing the symlink. Now class changes are added without restarting ng serve (may even require rm -rf .angular).

It does not matter what file type it is, the existence of a symlink is enough to break it.

thecrypticace commented

Hey! This is a super weird one but it looks like a problem with Angular itself. We aren't producing any content or postcss messages that are different whether the symlink is there or not.

  1. On the initial build we are returning the expected content paths from our plugin for postcss-loader to hand off to webpack.
  2. On subsequent builds Tailwind CSS itself isn't called at all by Angular (I'm guessing PostCSS itself isn't called)
  3. This problem is only present when a glob path is passed to postcss-loader AND there is a symlink inside the "root" (non-dynamic) directory of the glob path.
  4. I suspected this was a problem with the persistent cache but disabling the angular cache does not fix this.

All this to say I believe this is an issue with Angular and possibly webpack itself that underlies Angular. I would suggest you open an issue with Angular and see what they can uncover. I can help provide more info to the Angular and/or webpack teams as needed as well.