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

Open
meakib opened 8:26pm on October 20, 2026 wants to merge 2 commits into angular/angular-cli main from
fix/postcss-dir-dependency-watch

Pull Request Overview

  • Opened on October 20, 2026
  • Status Open
  • Commit count 2 with first commit October 20, 2026

Total Delta

0 Total Diff Delta

Open Days

Open 19 weekdays

Test Delta

0 Diff Delta in Test Files
Breakdown by Phase

How long has this pull request spent in each phase of its lifecycle?

Fraction of total time Business days Phase
N/A 0.1 days Issue creation to work beginning
 
0.0 days Authoring 1 commit before pull request opened for review
 
0.0 days Awaiting first review
 
18.4 days Revising work with 1 commit in response to 1 review that left 1 comment

Total time for pull request still awaiting merge (longer than repo's target): 18.4 business days

Author avatar

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

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

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

  1. Angular 22 app with Tailwind v4 via @tailwindcss/postcss; run ng serve.
  2. Create src/app/foo/foo.ts using a class not used elsewhere, e.g. bg-[#123456]. It is generated.
  3. Rename the folder to src/app/bar/ and edit the file to use bg-[#654321]. The class is not generated.
  4. 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

Comments Threads Pending Resolution

gemini-code-assist[bot] reviewed on October 20, 2026
gemini-code-assist[bot] left a comment

## Code Review

This pull request introduces support for directory dependencies (such as PostCSS `dir-dependency`) by watching the dependency directory itself and updating the cache invalidation logic to check parent directories recursively. The review feedback suggests normalizing the input path in the `invalidate` method to ensure OS-consistent path matching when looking up file dependencies.

Resolved Comment Threads

No resolved comments have been left on this PR.