Wave 3: Component/template and Sass modernization

[tobydrinkall]

Summary

Wave 3 of the Angular 9→21 migration (base: Wave 1 branch). npm run build now completes with zero errors and zero Sass deprecation warnings (only the pre-existing rxjs/Observable non-ESM warning remains — Wave 2 scope).

• Sass modernization (all component .scss, src/styles.scss, _themes.scss):
  • @import "shared/scss/media|theme_variables" → @use "..." as *
  • $skull-size / N → math.div($skull-size, N) via @use "sass:math" (error-message + _themes.scss)
  • darken($c, 33%) → color.adjust($c, $lightness: -33%)
  • Bogus combinators: :host >>> ... → :host ::ng-deep ... (user + comment components)
• browserslist: replaced the > 0.5% / last 2 versions / not dead query with the Angular-supported browser set (last 2 Chrome/Edge/Safari/iOS, Firefox + ESR), eliminating the "unsupported browsers" build warnings.
• Runtime fix: Angular 21 defaults to zoneless change detection, so the app fetched data but never re-rendered (stuck on the loader — reproducible on the base branch). Added provideZoneChangeDetection() to AppModule providers; the app now renders.

Verification

Ran ng serve and clicked through news/newest/ask/show/jobs feeds and item comments:

Note: user profile pages show the app's error state because the upstream node-hnapi.herokuapp.com/user/:id endpoint currently returns 404 for all users (verified via curl) — not related to these changes. The styled error page itself renders correctly (exercising the migrated skull SCSS).

Link to Devin session: https://app.devin.ai/sessions/694fd2293fc3459b87671b46a53eda31
Requested by: @tobydrinkall

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[devin-ai-integration]

Devin Review found 4 potential issues.

[devin-ai-integration]

📝 Info: Replaced deprecated >>> with also-deprecated ::ng-deep

The >>> deep combinator in src/app/item-details/comment/comment.component.scss:4 and src/app/user/user.component.scss:4 has been replaced with ::ng-deep. While this is the correct migration (Angular's >>> support was removed), ::ng-deep is itself deprecated with no timeline for removal. Angular has not yet provided a replacement. This is fine for now, but worth tracking — when Angular does provide an alternative, these two files will need updating.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

📝 *Info: styles.scss uses @use without 'as ' unlike all other files

In src/styles.scss:1, the themes partial is imported as @use "./app/shared/scss/themes" (without as *), while every other SCSS file in the PR uses @use ... as *. This is actually correct and intentional: _themes.scss only produces CSS output via @include theme(...) calls and does not export any variables or mixins that styles.scss needs to reference by name. The as * form is only needed in files that reference exported members like $mobile-only or $skull-size.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

📝 Info: darken() to color.adjust() migration is mathematically equivalent

The migration from darken($theme-amoledblack-text-color, 33%) to color.adjust($theme-amoledblack-text-color, $lightness: -33%) at src/app/shared/scss/_themes.scss:235 is correct. Sass's darken($color, $amount) is defined as color.adjust($color, $lightness: -$amount), so these produce identical output. The input color $theme-amoledblack-text-color is rgba(255, 255, 255, 0.75) (white at 75% opacity, HSL lightness 100%), so the result is lightness 67% with the same alpha — identical under both functions.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Devin Review found 1 new potential issue.

[devin-ai-integration]

📝 Info: Event coalescing changes change detection timing behavior

Adding provideZoneChangeDetection({ eventCoalescing: true }) at src/app/app.module.ts:29 is a behavioral change, not just a refactor. With event coalescing enabled, Angular will batch multiple change detection cycles triggered by events in the same event loop tick into a single cycle. This improves performance but subtly changes when views update — if any component relies on intermediate change detection runs between synchronous event handlers, it could behave differently. For this app (a Hacker News reader), this is very unlikely to cause issues, but it's worth noting as a deliberate behavioral change rather than a mechanical migration.

---

Was this helpful? React with 👍 or 👎 to provide feedback.