Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New classes not added when symlink is present #10555

Closed
bagbag opened this issue Feb 10, 2023 · 1 comment
Closed

New classes not added when symlink is present #10555

bagbag opened this issue Feb 10, 2023 · 1 comment
Assignees

Comments

@bagbag
Copy link

bagbag commented Feb 10, 2023

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.

@bagbag bagbag changed the title New classes not added when symlink is in content path New classes not added when symlink is present Feb 10, 2023
@thecrypticace thecrypticace self-assigned this Feb 10, 2023
@thecrypticace
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants