fix(platform-browser): collect external component styles from server rendering by clydin · Pull Request #59031 · angular/angular · GitHub
Skip to content

fix(platform-browser): collect external component styles from server rendering - #59031

Closed
clydin wants to merge 1 commit into
angular:mainfrom
clydin:styles/ssr-external-styles
Closed

clydin wants to merge 1 commit into
angular:mainfrom
clydin:styles/ssr-external-styles

Conversation

@clydin

@clydin clydin commented Dec 3, 2024

Copy link
Copy Markdown
Member

SSR generated component styles used in development environments will add external styles via link elements to the HTML. However, the runtime would previously not collect these link elements for reuse with rendered components. This would result in two copies of the link elements present in the DOM. In isolation this is not problematic as it is only present in development mode. Unfortunately, the Vite-based CSS HMR functionality used by the Angular CLI only updates the first stylesheet it finds and leaves other instances of the stylesheet in place. This behavior causes the styles to be left in an inconsistent state. This could be considered a defect within Vite as it should update all relevant styles to maintain consistency but ideally there should not be two instances in the Angular SSR case. To avoid the Vite issue, the runtime will now collect SSR generated external styles and reuse them.

@clydin clydin added target: patch This PR is targeted for the next patch release area: core Issues related to the framework runtime labels Dec 3, 2024
@ngbot ngbot Bot added this to the Backlog milestone Dec 3, 2024
@angular-robot angular-robot Bot removed the area: core Issues related to the framework runtime label Dec 3, 2024
@ngbot ngbot Bot removed this from the Backlog milestone Dec 3, 2024
@clydin clydin added the area: core Issues related to the framework runtime label Dec 3, 2024
@ngbot ngbot Bot added this to the Backlog milestone Dec 3, 2024
@clydin
clydin marked this pull request as ready for review December 5, 2024 00:30
@pullapprove
pullapprove Bot requested a review from alxhub December 5, 2024 00:30
@clydin
clydin requested review from AndrewKushnir and removed request for alxhub December 5, 2024 00:30

@AndrewKushnir AndrewKushnir left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@clydin thanks for the fix 👍 Just left a couple comments and I was also thinking that it'd be great to put together a test to avoid regressions (if we have the necessary test setup to validate this scenario).

Comment thread packages/platform-browser/src/dom/shared_styles_host.ts Outdated
Comment thread packages/platform-browser/src/dom/shared_styles_host.ts Outdated
@clydin
clydin force-pushed the styles/ssr-external-styles branch from eed4895 to cc3d750 Compare December 5, 2024 03:51
@angular-robot angular-robot Bot removed the area: core Issues related to the framework runtime label Dec 5, 2024
@ngbot ngbot Bot removed this from the Backlog milestone Dec 5, 2024
@clydin
clydin force-pushed the styles/ssr-external-styles branch from cc3d750 to 5f49c3e Compare December 5, 2024 03:52
@clydin

clydin commented Dec 5, 2024

Copy link
Copy Markdown
Member Author

Comment thread packages/platform-browser/src/dom/shared_styles_host.ts Outdated
@AndrewKushnir AndrewKushnir added core: hot module replacement (HMR) area: core Issues related to the framework runtime labels Dec 5, 2024
@ngbot ngbot Bot added this to the Backlog milestone Dec 5, 2024
…rendering

SSR generated component styles used in development environments will add
external styles via link elements to the HTML. However, the runtime would
previously not collect these link elements for reuse with rendered components.
This would result in two copies of the link elements present in the DOM. In
isolation this is not problematic as it is only present in development mode.
Unfortunately, the Vite-based CSS HMR functionality used by the Angular CLI
only updates the first stylesheet it finds and leaves other instances of the
stylesheet in place. This behavior causes the styles to be left in an
inconsistent state. This could be considered a defect within Vite as it should
update all relevant styles to maintain consistency but ideally there should
not be two instances in the Angular SSR case. To avoid the Vite issue, the
runtime will now collect SSR generated external styles and reuse them.
@clydin
clydin force-pushed the styles/ssr-external-styles branch from 5f49c3e to 800cadf Compare December 5, 2024 17:24
@angular-robot angular-robot Bot removed the area: core Issues related to the framework runtime label Dec 5, 2024
@ngbot ngbot Bot removed this from the Backlog milestone Dec 5, 2024
@clydin clydin added action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime labels Dec 5, 2024
@ngbot ngbot Bot modified the milestone: Backlog Dec 5, 2024
@alxhub

alxhub commented Dec 6, 2024

Copy link
Copy Markdown
Member

This PR was merged into the repository by commit 52be351.

The changes were merged into the following branches: main, 19.0.x

alxhub pushed a commit that referenced this pull request Dec 6, 2024
…rendering (#59031)

SSR generated component styles used in development environments will add
external styles via link elements to the HTML. However, the runtime would
previously not collect these link elements for reuse with rendered components.
This would result in two copies of the link elements present in the DOM. In
isolation this is not problematic as it is only present in development mode.
Unfortunately, the Vite-based CSS HMR functionality used by the Angular CLI
only updates the first stylesheet it finds and leaves other instances of the
stylesheet in place. This behavior causes the styles to be left in an
inconsistent state. This could be considered a defect within Vite as it should
update all relevant styles to maintain consistency but ideally there should
not be two instances in the Angular SSR case. To avoid the Vite issue, the
runtime will now collect SSR generated external styles and reuse them.

PR Close #59031
@alxhub alxhub closed this in 52be351 Dec 6, 2024
@clydin
clydin deleted the styles/ssr-external-styles branch December 6, 2024 00:54
@angular-automatic-lock-bot

Copy link
Copy Markdown

@angular-automatic-lock-bot angular-automatic-lock-bot Bot locked and limited conversation to collaborators Jan 6, 2025
PrajaktaB27 pushed a commit to PrajaktaB27/angular that referenced this pull request Feb 7, 2025
…rendering (angular#59031)

SSR generated component styles used in development environments will add
external styles via link elements to the HTML. However, the runtime would
previously not collect these link elements for reuse with rendered components.
This would result in two copies of the link elements present in the DOM. In
isolation this is not problematic as it is only present in development mode.
Unfortunately, the Vite-based CSS HMR functionality used by the Angular CLI
only updates the first stylesheet it finds and leaves other instances of the
stylesheet in place. This behavior causes the styles to be left in an
inconsistent state. This could be considered a defect within Vite as it should
update all relevant styles to maintain consistency but ideally there should
not be two instances in the Angular SSR case. To avoid the Vite issue, the
runtime will now collect SSR generated external styles and reuse them.

PR Close angular#59031
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime core: hot module replacement (HMR) target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants