Angular+Tailwind: New classes are not added when symlink is present

報告にある Angular プロジェクトと symlink コマンドで問題を再現し、その後 postcss-loader/src/index.js の 196〜198 行付近と、webpack による追加された ContextDependency の処理を調査します。ng serve で Tailwind クラスを変更すると、再起動せずに監視対象の出力が無効化されて再コンパイルされることを確認します。

Preamble

Yes, this bug report is very unspecific to webpack and I cannot say what is wrong where, because I don't have the knowledge, but the tailwind developer said the bug could be in webpack and the angular developer said the problem seems to rely in webpack.

My previous issues leading me to webpack:
https://github.com/tailwindlabs/tailwindcss/issues/10555
https://github.com/angular/angular-cli/issues/24705

Information from @thecrypticace (tailwind developer)

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.

He said that he is willing to provide additional information if needed.

Information from @alan-agius4 (angular developer)

This seems to be an issue with Webpack itself.
I can see that the correct dependencies are added by postcss/tailwinds in webpack-contrib/postcss-loader@888d72e/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.

Bug report

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.

Actual Behavior

Changes in files are not reflected in watched output.

Expected Behavior

The dependency should be invalidated and recompiled.

How Do We Reproduce?

setup new angular 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.