Tailwind @screen Directive does not work with Application builder but previously worked with Webpack builder

[mirobo]

Command

build, 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

I create a new issue based on my previous one #26644 (comment) since it's a different topic now.

I've reproduced the issue successfully with the old, but still valid directive @screen (even if not documented). If this isn't supposed to work the ESBuild, then I wonder what the upgrade path (from @screen to @media screen (xy)) would be. It seems like nothing is mentioned anywhere?

See https://github.com/mirobo/nx-angular-tailwind/tree/main and (maybe you need to run npm install it with legacy peer deps). Then npm run start (it starts both variants).

Resize the window to see colors of the h1 with "TAILWIND SCREENS TEST" change (the variant with ESBuild won't work)

I see that both executors do something with postcss and autoprefixer internally (which are both added as dependencies in this test project), but only the Webpack executor seems to have a "sass-loader" webpack/configs/styles.ts while in esbuild..sass-language.ts and esbuild..stylesheet-plugin-factory.ts I didn't find it.

The styles.css produced by both bundlers is pretty much identical: https://github.com/mirobo/nx-angular-tailwind/tree/main/style-css-output

In the generated main.js I see that some processing was not done:

ESBuild

Webpack

Minimal Reproduction

• clone https://github.com/mirobo/nx-angular-tailwind/tree/main
• npm install (maybe run it with legacy peer deps).
• npm run start (it starts both variants, one with Application builder and one with Webpack).
• Resize the window to see how the header TAILWIND SCREENS TEST changes color (in case of Webpack) and how it doesn't change color (in case of Application/ESBuild builder)

Exception or Error

No response

Your Environment

Angular CLI: 17.0.0
Node: 18.14.0
Package Manager: npm 9.3.1
OS: win32 x64

Angular: 17.0.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.0.5
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.0.5
@angular/cli                    17.0.0
@schematics/angular             17.0.5
ng-packagr                      17.0.2
rxjs                            7.8.0
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[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.}