Component level CSS optimization error - Invalid version: "TP"

[zackschuster]

Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

Yes

Description

see title. this occurs for all css, whether inlined using styles or referenced via styleUrls, and occurs for scss compilation as well. global css compiles fine.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Error: [REDACTED].scss from Css Minimizer
Error: Transform failed with 1 error:
error: Invalid version: "TP"
    at failureErrorWithLog (/Users/zschuster/Source/SARC_V2_Client/node_modules/esbuild/lib/main.js:1451:15)
    at /Users/zschuster/Source/SARC_V2_Client/node_modules/esbuild/lib/main.js:1262:29
    at /Users/zschuster/Source/SARC_V2_Client/node_modules/esbuild/lib/main.js:609:9
    at handleIncomingPacket (/Users/zschuster/Source/SARC_V2_Client/node_modules/esbuild/lib/main.js:706:9)
    at Socket.readFromStdout (/Users/zschuster/Source/SARC_V2_Client/node_modules/esbuild/lib/main.js:576:7)
    at Socket.emit (node:events:394:28)
    at addChunk (node:internal/streams/readable:312:12)
    at readableAddChunk (node:internal/streams/readable:287:9)
    at Socket.Readable.push (node:internal/streams/readable:226:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Please provide the environment you discovered this bug in

Angular CLI: 12.2.3
Node: 14.17.4
Package Manager: npm 7.20.3
OS: darwin x64

Angular: 12.2.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.3
@angular-devkit/build-angular   12.2.3
@angular-devkit/core            12.2.3
@angular-devkit/schematics      12.2.3
@schematics/angular             12.2.3
rxjs                            7.3.0
typescript                      4.3.5

Anything else?

this appears to be a bug in esbuild browser version detection

[alan-agius4]

Please see: #21699

[zackschuster]

i had supports es6-module in .browserslistrc, same as the linked issue. adding not safari tp indeed fixes the build. still seems kind of weird overall, not just to have to do that but that it only affects css compilation (??).

[alan-agius4]

Browserlists also effects JS downleveling when needed.

In future it is not excluded that it may effect other features, so configuring explicitly the browsers that your application needs to support or leaving the default config is definitely recommended.

supports es6-module is also too broad and the majority of resulting browsers are not supported

Note: the supported browsers should be the full or subset of browsers that the Angular framework supports.

[zackschuster]

angular's official window of support is extremely short, which is specifically why i went for that config. the compiler should not error out-of-hand over such things, especially when the subset of features i use strictly conforms to a 2017-era compatibility matrix. if i want to go beyond what angular supports, then angular should not get in my way.