Skip to content

Wave 3: Component/template and Sass modernization #424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tobydrinkall wants to merge 3 commits into
base: devin/1782984123-angular20-core-upgrade
Choose a base branch
from
Open

Wave 3: Component/template and Sass modernization #424

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0dee7bd
Wave 3: modernize Sass (@use, math.div, ::ng-deep) and align browsers…
devin-ai-integration[bot] Jul 2, 2026
d7af3be
Provide zone change detection explicitly for Angular 21 zoneless default
devin-ai-integration[bot] Jul 2, 2026
17de9dc
Enable event coalescing for zone change detection
devin-ai-integration[bot] Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions browserslist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@
# You can see what browsers were selected by your queries by running:
# npx browserslist

> 0.5%
last 2 versions
# Aligned with the browsers supported by Angular.
# https://angular.dev/reference/versions#browser-support
last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.
4 changes: 2 additions & 2 deletions src/app/app.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "./shared/scss/media";
@import "./shared/scss/theme_variables";
@use "./shared/scss/media" as *;
@use "./shared/scss/theme_variables" as *;

.body-cover {
width: 100%;
Expand Down
4 changes: 2 additions & 2 deletions src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgModule, provideZoneChangeDetection } from '@angular/core';

import { routing } from './app.routes';

Expand All @@ -26,7 +26,7 @@ import { SettingsService } from './shared/services/settings.service';
enabled: environment.production,
}),
],
providers: [HackerNewsAPIService, SettingsService],
providers: [provideZoneChangeDetection({ eventCoalescing: true }), HackerNewsAPIService, SettingsService],

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 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.

Open in Devin Review

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

bootstrap: [AppComponent],
})
export class AppModule {}
4 changes: 2 additions & 2 deletions src/app/core/footer/footer.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../../shared/scss/media";
@import "../../shared/scss/theme_variables";
@use "../../shared/scss/media" as *;
@use "../../shared/scss/theme_variables" as *;

#footer {
position: relative;
Expand Down
4 changes: 2 additions & 2 deletions src/app/core/header/header.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../../shared/scss/media";
@import "../../shared/scss/theme_variables";
@use "../../shared/scss/media" as *;
@use "../../shared/scss/theme_variables" as *;

#header {
color: #fff;
Expand Down
4 changes: 2 additions & 2 deletions src/app/core/settings/settings.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../../shared/scss/media";
@import "../../shared/scss/theme_variables";
@use "../../shared/scss/media" as *;
@use "../../shared/scss/theme_variables" as *;

.overlay {
position: fixed;
Expand Down
4 changes: 2 additions & 2 deletions src/app/feeds/feed/feed.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../../shared/scss/media";
@import "../../shared/scss/theme_variables";
@use "../../shared/scss/media" as *;
@use "../../shared/scss/theme_variables" as *;

a {
text-decoration: none;
Expand Down
4 changes: 2 additions & 2 deletions src/app/feeds/item/item.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../../shared/scss/media";
@import "../../shared/scss/theme_variables";
@use "../../shared/scss/media" as *;
@use "../../shared/scss/theme_variables" as *;

p {
margin: 2px 0;
Expand Down
6 changes: 3 additions & 3 deletions src/app/item-details/comment/comment.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import "../../shared/scss/media";
@import "../../shared/scss/theme_variables";
@use "../../shared/scss/media" as *;
@use "../../shared/scss/theme_variables" as *;

:host >>> {
:host ::ng-deep {

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 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.

Open in Devin Review

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

a {
font-weight: bold;
text-decoration: none;
Expand Down
4 changes: 2 additions & 2 deletions src/app/item-details/item-details.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../shared/scss/media";
@import "../shared/scss/theme_variables";
@use "../shared/scss/media" as *;
@use "../shared/scss/theme_variables" as *;

.main-content {
position: relative;
Expand Down
13 changes: 7 additions & 6 deletions src/app/shared/components/error-message/error-message.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "../../scss/media";
@import "../../scss/theme_variables";
@use "sass:math";
@use "../../scss/media" as *;
@use "../../scss/theme_variables" as *;

.error-section {
height: 300px;
Expand Down Expand Up @@ -65,9 +66,9 @@
content: "";
position: absolute;
top: 100%;
left: $skull-size / 15;
border-right: $skull-size / 20 solid transparent;
border-left: $skull-size / 40 solid transparent;
left: math.div($skull-size, 15);
border-right: math.div($skull-size, 20) solid transparent;
border-left: math.div($skull-size, 40) solid transparent;
}
}
}
Expand All @@ -77,7 +78,7 @@
position: absolute;
top: 75%;
left: 30%;
border-radius: 0 0 $skull-size / 10 $skull-size / 10;
border-radius: 0 0 math.div($skull-size, 10) math.div($skull-size, 10);
&:before {
content: "";
position: absolute;
Expand Down
4 changes: 2 additions & 2 deletions src/app/shared/components/loader/loader.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "../../scss/media";
@import "../../scss/theme_variables";
@use "../../scss/media" as *;
@use "../../scss/theme_variables" as *;

.loader {
-webkit-animation: load1 1s infinite ease-in-out;
Expand Down
12 changes: 7 additions & 5 deletions src/app/shared/scss/_themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import "./media";
@import "./theme_variables";
@use "sass:color";
@use "sass:math";
@use "./media" as *;
@use "./theme_variables" as *;

/* ----------------------------------

Expand Down Expand Up @@ -142,10 +144,10 @@
}

&:before {
border-top: $skull-size / 8 solid $wrapper-background-color;
border-top: math.div($skull-size, 8) solid $wrapper-background-color;

@media #{$mobile-only} {
border-top: $skull-size / 8 solid $wrapper-mobile-background-color;
border-top: math.div($skull-size, 8) solid $wrapper-mobile-background-color;
}
}
}
Expand Down Expand Up @@ -230,7 +232,7 @@
$theme-amoledblack-body-background-color,
$theme-amoledblack-text-color,
$theme-amoledblack-text-color,
darken($theme-amoledblack-text-color, 33%),
color.adjust($theme-amoledblack-text-color, $lightness: -33%),

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 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.

Open in Devin Review

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

$theme-amoledblack-body-background-color,
$theme-amoledblack-subtext-color,
$theme-amoledblack-secondary-color,
Expand Down
6 changes: 3 additions & 3 deletions src/app/user/user.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import "../shared/scss/media";
@import "../shared/scss/theme_variables";
@use "../shared/scss/media" as *;
@use "../shared/scss/theme_variables" as *;

:host >>> pre {
:host ::ng-deep pre {
white-space: pre-wrap;
}

Expand Down
2 changes: 1 addition & 1 deletion src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import "./app/shared/scss/themes";
@use "./app/shared/scss/themes";

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 *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.

Open in Devin Review

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


html {
height: 100%;
Expand Down