New tailwind classes are not added when symlink is present

[bagbag]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

New tailwind classes are not added in ng serve without restarting it, while a symlink exists in tailwinds content path.
This issue can be fixed by removing the symlink. Now class changes are added without restarting ng serve.
It does not matter what file type it is, the existence of a symlink is enough to break it.

Minimal Reproduction

setup new project:

ng new --minimal --style scss --defaults tailwind-symlink-bug
cd tailwind-symlink-bug/
npm install --save-dev tailwindcss
ln -s ../../node_modules/@angular/core/README.md src/assets/README.md
echo "module.exports = { content: ['./src/**/*.{html,ts}'] };" > tailwind.config.js
echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > src/styles.scss

replace html in app.component.ts with following:

<div class="w-40 h-40 bg-red-500"></div>

start:

ng serve

You will see a red square. Now change bg-red-500 to bg-green-500 -> the square will disappear, as the new tailwind class is not generated. A restart of ng serve will add it.

If you remove the symlink at src/assets/README.md and restart ng serve, the problem above does not appear.

Exception or Error

No response

Your Environment

Node.js version v19.6.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 15.1.5
Node: 19.6.0 (Unsupported)
Package Manager: npm 8.19.2
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1501.5 (cli-only)
@angular-devkit/core         15.1.5 (cli-only)
@angular-devkit/schematics   15.1.5 (cli-only)
@schematics/angular          15.1.5 (cli-only)
    
Warning: The current version of Node (19.6.0) is not supported by Angular.

Anything else relevant?

Issue also occurs on Windows.

Additional information from a tailwind developer: tailwindlabs/tailwindcss#10555 (comment)

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.

[alan-agius4]

Hi,

This seems to be an issue with Webpack itself.

I can see that the correct dependencies are added by postcss/tailwinds in https://github.com/webpack-contrib/postcss-loader/blob/888d72e340b6d176e95c15d5f96ca412af86a66a/src/index.js#L196-L198. But, for some reason when the added ContextDependency is a directory with a nested symlink, Webpack do not invalidate the correct files.

Unfortunately, this is not actionable from our end.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}