MWPW-178376: Improve variant layout handling #4730

Axelcureno · 2025-08-15T18:19:20Z

Enhanced variant registration logic with WeakMap for better state management.
Cleaned up style application process to ensure proper handling of CSSStyleSheet and fallback to style elements when necessary.
Adjusted variable names for consistency and clarity.
Avoids duplicate style injection.

Test URLs:

aem-code-sync · 2025-08-15T18:19:22Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
In case there are problems, just click the checkbox below to rerun the respective action.

Re-sync branch

Commits

9bb4a56 ✅ (latest)
c7562bc ✅
fe5b9ea ✅
1f15f69 ✅
c710211 ✅
101ff9d ✅
7478445 ✅
a446ba7 ✅
7e8d75c ✅

aem-code-sync · 2025-08-15T18:19:44Z

	Page	Scores	Audits	Google
📱	/?martech=off
🖥️	/?martech=off

github-actions · 2025-08-15T18:19:49Z

libs/features/mas/src/variants/variants.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

github-actions · 2025-08-26T01:46:47Z

This PR has not been updated recently and will be closed in 7 days if no action is taken. Please ensure all checks are passing, https://github.com/orgs/adobecom/discussions/997 provides instructions. If the PR is ready to be merged, please mark it with the "Ready for Stage" label.

bozojovicic

Approved but @Axelcureno please add some examples to before/after pages in future PRs. I remember I've seen these strikethru styles before but now I could not find it when I need it to compare.

github-actions · 2025-08-28T15:59:06Z

libs/features/mas/src/variants/variant-layout.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

Axelcureno · 2025-08-28T15:59:27Z

Approved but @Axelcureno please add some examples to before/after pages in future PRs. I remember I've seen these strikethru styles before but now I could not find it when I need it to compare.

yes, my bad. Here's an example URL: https://main--cc--adobecom.aem.page/creativecloud/plans?milolibs=mwpw-178376 (try with and without milolibs to compare).
I pushed new changes and the solution is a bit more complex now, if you want to review again.

cc @st-angelo-adobe

github-actions · 2025-08-29T01:45:45Z

This pull request is not passing all required checks. Please see this discussion for information on how to get all checks passing. Inconsistent checks can be manually retried. If a test absolutely can not pass for a good reason, please add a comment with an explanation to the PR.

nkthakur48 · 2025-09-23T10:23:25Z

@Axelcureno Could you please resolve the conflicts?

github-actions · 2025-10-01T01:53:38Z

Reminder to set the Ready for Stage label - to queue this to get merged to stage & production.

github-actions · 2025-10-14T18:44:01Z

libs/deps/mas/merch-card-collection.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

github-actions · 2025-10-14T18:44:02Z

libs/deps/mas/merch-card.js

⚠️ [eslint] _{reported by reviewdog 🐶}
File ignored because of a matching ignore pattern. Use "--no-ignore" to override.

github-actions · 2025-10-22T01:47:36Z

This PR has not been updated recently and will be closed in 7 days if no action is taken. Please ensure all checks are passing, https://github.com/orgs/adobecom/discussions/997 provides instructions. If the PR is ready to be merged, please mark it with the "Ready for Stage" label.

github-actions · 2025-10-29T01:50:06Z

Closing this PR due to inactivity.

github-actions · 2025-11-07T01:47:13Z

This PR has not been updated recently and will be closed in 7 days if no action is taken. Please ensure all checks are passing, https://github.com/orgs/adobecom/discussions/997 provides instructions. If the PR is ready to be merged, please mark it with the "Ready for Stage" label.

github-actions · 2025-11-14T01:48:58Z

Closing this PR due to inactivity.

seanchoi-dev · 2025-12-08T18:22:47Z

Please resolve the conflicts and fix the Nala errors.

…nt styles - Revert global.css.js to use <style> elements in document.head - Revert variant-layout.js to use styleMap and <style> elements - Fixes grid layout and price literal styling issues - The adoptedStyleSheets approach broke light DOM styling

Variants like plans, plans-students, plans-education share the same Plans class but had different variant names. Using variant name as the styleMap key caused 3 identical stylesheets to be injected. Now using this.constructor.name as the key ensures only one stylesheet is injected per variant class (e.g., 'Plans'), not per variant name.

Axelcureno · 2025-12-09T04:02:00Z

All comments addressed. Ready for QA.

yesil

Please close and re-open one against https://github.com/adobecom/mas

Axelcureno · 2025-12-15T20:24:28Z

PR has been moved to adobecom/mas#477

Axelcureno requested a review from a team as a code owner August 15, 2025 18:19

github-actions bot reviewed Aug 15, 2025

View reviewed changes

Axelcureno self-assigned this Aug 18, 2025

github-actions bot added the Stale label Aug 26, 2025

st-angelo-adobe approved these changes Aug 26, 2025

View reviewed changes

github-actions bot removed the Stale label Aug 27, 2025

bozojovicic approved these changes Aug 28, 2025

View reviewed changes

aem-code-sync bot temporarily deployed to MWPW-178376 August 28, 2025 15:58 Inactive

github-actions bot reviewed Aug 28, 2025

View reviewed changes

aem-code-sync bot temporarily deployed to MWPW-178376 September 2, 2025 00:29 Inactive

aem-code-sync bot temporarily deployed to MWPW-178376 September 2, 2025 14:02 Inactive

aem-code-sync bot temporarily deployed to MWPW-178376 September 4, 2025 19:27 Inactive

aem-code-sync bot temporarily deployed to MWPW-178376 September 8, 2025 23:00 Inactive

aem-code-sync bot temporarily deployed to MWPW-178376 September 25, 2025 18:28 Inactive

aem-code-sync bot temporarily deployed to MWPW-178376 October 7, 2025 22:51 Inactive

Axelcureno requested a review from a team as a code owner October 8, 2025 19:22

aem-code-sync bot temporarily deployed to MWPW-178376 October 13, 2025 19:17 Inactive

aem-code-sync bot temporarily deployed to MWPW-178376 October 14, 2025 18:41 Inactive

improve variant layout handling

7e8d75c

Axelcureno force-pushed the MWPW-178376 branch from 17f223b to 7e8d75c Compare October 14, 2025 18:43

aem-code-sync bot temporarily deployed to MWPW-178376 October 14, 2025 18:43 Inactive

github-actions bot reviewed Oct 14, 2025

View reviewed changes

github-actions bot added the Stale label Oct 22, 2025

github-actions bot closed this Oct 29, 2025

Axelcureno reopened this Oct 29, 2025

github-actions bot removed the Stale label Oct 30, 2025

github-actions bot added the Stale label Nov 7, 2025

github-actions bot closed this Nov 14, 2025

Axelcureno added 3 commits November 25, 2025 09:43

Merge branch 'MWPW-178376' of github.com:adobecom/milo into MWPW-178376

a446ba7

Merge branch 'stage' into MWPW-178376

7478445

Merge branch 'stage' into MWPW-178376

101ff9d

Axelcureno reopened this Dec 3, 2025

aem-code-sync bot temporarily deployed to MWPW-178376 December 3, 2025 06:06 Inactive

Axelcureno requested review from Roycethan and afmicka December 3, 2025 06:07

Axelcureno added 2 commits December 2, 2025 23:05

fix: call insertVariantStyle in connectedCallbackHook

c710211

fix: make insertVariantStyle synchronous for immediate style application

1f15f69

github-actions bot removed the Stale label Dec 4, 2025

Axelcureno added 3 commits December 8, 2025 17:54

Merge branch 'stage' into MWPW-178376

fe5b9ea

aem-code-sync bot deployed to MWPW-178376 December 9, 2025 02:31 View deployment

yesil requested changes Dec 15, 2025

View reviewed changes

Axelcureno mentioned this pull request Dec 15, 2025

MWPW-178376: Improve variant layout handling adobecom/mas#477

Open

Axelcureno closed this Dec 15, 2025

MWPW-178376: Improve variant layout handling #4730

MWPW-178376: Improve variant layout handling #4730

Uh oh!

Conversation

Axelcureno commented Aug 15, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aem-code-sync bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aem-code-sync bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot Aug 15, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 26, 2025

Uh oh!

bozojovicic left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

Axelcureno commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 29, 2025

Uh oh!

nkthakur48 commented Sep 23, 2025

Uh oh!

github-actions bot commented Oct 1, 2025

Uh oh!

github-actions bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Oct 14, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Oct 22, 2025

Uh oh!

github-actions bot commented Oct 29, 2025

Uh oh!

github-actions bot commented Nov 7, 2025

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

seanchoi-dev commented Dec 8, 2025

Uh oh!

Axelcureno commented Dec 9, 2025

Uh oh!

yesil left a comment

Choose a reason for hiding this comment

Uh oh!

Axelcureno commented Dec 15, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Axelcureno commented Aug 15, 2025 •

edited by github-actions bot

Loading

aem-code-sync bot commented Aug 15, 2025 •

edited

Loading

aem-code-sync bot commented Aug 15, 2025 •

edited

Loading

Axelcureno commented Aug 28, 2025 •

edited

Loading