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

[bagbag]

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:
tailwindlabs/tailwindcss#10555
angular/angular-cli#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.

[alexander-akait]

Sorry for delay, sounds like symlinks are disabled in ng

/cc @alan-agius4

[alan-agius4]

You can try to enable "preserveSymlinks": true in the build section of your angular.json?

[bagbag]

It is and was enabled, as I use shared types between client and server. So this does not fix the problem.

[alexander-akait]

@bagbag Can you try to reproduce it with pure webpack setup

[bagbag]

As I have no experience with webpack, I simply tried it with https://levelup.gitconnected.com/setup-tailwind-css-with-webpack-3458be3eb547, created a symlink to that css file, imported it in the .js file, and... it worked.

[alexander-akait]

@bagbag That is why I think something wrong in angluar, postcss-loader don't know about symlinks nothing

[bagbag]

/cc @alan-agius4

[alexander-akait]

@bagbag Hope you solved your problem, if no please open an issue in angular-cli repo (you can ping me), postcss-loader doesn't know nothing about files/symlinks and etc, so the problem is not here

If you still have a problem can you provide a reproducible example?

[bagbag]

@alexander-akait I haven't tested it with the current versions, but there was nothing solved back then. There is already an issue and example at angular/angular-cli#24705.