Review fix(@angular/build): rebuild stylesheets when files are added to a PostCSS directory dependency (#34451)

Reviewing

(100% less) vs GitHub

This saves about 175.0 hours per year vs conventional diff tools

This work implements Tailwind CSS v4 classes in new or moved files are not picked up by ng serve until another rebuild (open)

Command

build

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

In @angular/build 22.2.2 (and 22.2.3), src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js handles PostCSS dir-dependency messages by expanding the glob with tinyglobby and adding the resulting files to watchFiles. Only files that exist at build time are watched. A file created later, or moved by renaming its folder, is never watched, so classes used only in it are not generated until something else triggers a stylesheet rebuild. esbuild has no directory/glob watch to fall back on, so the dir itself should probably be watched (or the glob re-expanded on add/unlink events).

Minimal Reproduction

Angular 22 app with Tailwind v4 via @tailwindcss/postcss; run ng serve.
Create src/app/foo/foo.ts using a class not used elsewhere, e.g. bg-[#123456]. It is generated.
Rename the folder to src/app/bar/ and edit the file to use bg-[#654321]. The class is not generated.
Touch src/styles.css. Now it is generated.

NG_BUILD_WATCH_ROOT=1 stops detecting changes entirely. Polling ("poll": 1000) doesn't help either.

Exception or Error

Classes in files added or moved under Tailwind's sources are generated on the next rebuild, as with modifications.

Your Environment

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


Angular CLI       : 22.2.0
Angular           : 22.2.0
Node.js           : 24.15.0
Package Manager   : bun 1.4.2
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/aria             │ 22.2.0            │ 22.2.0            │
│ @angular/build            │ 22.2.0            │ 22.2.0            │
│ @angular/cdk              │ 22.2.0            │ 22.2.0            │
│ @angular/cli              │ 22.2.0            │ 22.2.0            │
│ @angular/common           │ 22.2.0            │ 22.2.0            │
│ @angular/compiler         │ 22.2.0            │ 22.2.0            │
│ @angular/compiler-cli     │ 22.2.0            │ 22.2.0            │
│ @angular/core             │ 22.2.0            │ 22.2.0            │
│ @angular/material         │ 22.2.0            │ 22.2.0            │
│ @angular/platform-browser │ 22.2.0            │ 22.2.0            │
│ @angular/platform-server  │ 22.2.0            │ 22.2.0            │
│ @angular/router           │ 22.2.0            │ 22.2.0            │
│ @angular/ssr              │ 22.2.0            │ 22.2.0            │
│ rxjs                      │ 7.8.2             │ ^7.8.2            │
│ typescript                │ 6.0.2             │ 6.0.2             │
│ vitest                    │ 4.1.11            │ 4.1.11            │

Anything else relevant?

No response

meakib authored

of work during October 20

angular/angular-cli

fix/postcss-dir-dependency-watch

Diff Delta:

About 0 Diff Delta/hour

Classified as: General

meakib's Description of Work #34446 Tailwind CSS v4 classes in new or moved files are not picked up by ng serve until another rebuild

Previously, a PostCSS dir-dependency message (used by Tailwind CSS v4 for its content sources) was expanded with a glob and only the files that existed at build time were watched. Files created later, or moved by renaming their folder, did not invalidate the cached stylesheet, so classes used only in them were not generated until the stylesheet itself changed.

The directory is now also added to the watch files, and the load result cache invalidates an entry when a changed path is inside one of its watched directories.

Fixes #34446

4 total changed files

(4 files ignored)

You’ve reached the end of the pull request

Like the credits, but with fewer stunts.

fix(@angular/build): rebuild stylesheets when files are added to a PostCSS directory dependency #34451