Cache XXL breakpoint CSS to improve breakpoint switching performance

[kyrapieterse]

Motivation

• Switching responsive breakpoints (notably XL → XXL) is slow because XXL CSS is regenerated per block on each switch.

Description

• Add per-block XXL cache fields xxlStyleCache and isXxlStyleCacheDirty to MaxiBlockComponent to avoid unnecessary regeneration of XXL CSS.
• Thread a new isBaseBreakpointChange parameter through displayStyles, injectStyles, and generateStyleContent to make cache validity decisions aware of base breakpoint changes.
• Use the cached XXL CSS when switching to the xxl breakpoint if xxlStyleCache exists and isXxlStyleCacheDirty is false, and save the generated XXL CSS back to xxlStyleCache when computed.
• Mark the XXL cache dirty when style-impacting changes occur (non-relation attribute changes, baseBreakpoint changes, or blockStyle changes) so the cache is invalidated and recomputed when necessary.

Testing

• No automated tests were executed for this change.
• Please run the repository's unit tests and style/test suites (for example npm test) after pulling to verify integration and performance improvements.

---

Codex Task

Summary by CodeRabbit

Performance

• Improved style generation efficiency through optimized caching for XXL breakpoint handling, reducing unnecessary style recalculations during content and attribute updates.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces XXL breakpoint style caching in MaxiBlockComponent to avoid redundant style regeneration. It adds internal cache fields, marks the cache as dirty when breakpoint/content changes occur, and reuses cached styles under specific conditions. Three method signatures are extended to propagate a new isBaseBreakpointChange parameter through the style generation pipeline.

Changes

Cohort / File(s)

Summary

XXL Breakpoint Caching & Base Breakpoint Tracking src/extensions/maxi-block/maxiBlockComponent.js

Added xxlStyleCache and isXxlStyleCacheDirty instance properties; implemented caching logic to reuse XXL styles when cache is valid. Extended displayStyles(), injectStyles(), and generateStyleContent() signatures with isBaseBreakpointChange parameter. Enhanced change detection in componentDidUpdate() to mark cache dirty on non-relational attribute changes. Modified style generation paths to bypass regeneration when cached XXL content is available.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Backend optimization 2 #5765 — Modifies the same style-management methods (displayStyles, injectStyles, generateStyleContent, componentDidUpdate) to alter breakpoint-aware style generation/injection.
• Fix xxl breakpoint styles #5865 — Updates injectStyles and generateStyleContent for XXL breakpoint handling; this PR adds caching and the new isBaseBreakpointChange parameter.
• Issue 5778: Fix xxl styles on breakpoint switch #5788 — Modifies displayStyles/injectStyles behavior for XXL breakpoint style application.

Suggested labels

optimization, Final code review, lgtm, size:XL

Suggested reviewers

• Olekrut

Poem

🐰 A cache for the XXL so fine,
No more styles to redesign!
Breakpoint changes mark it dirty—
But reuse keeps performance flirty. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete; it lacks the required test checklist sections and testing details specified in the template.	Add the 'How Has This Been Tested?' section with test instructions and complete the 'Test checklist' and 'Checklist' sections with appropriate checkboxes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: introducing XXL breakpoint CSS caching to improve performance when switching breakpoints.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom Pre-merge Checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/extensions/maxi-block/maxiBlockComponent.js (1)

657-783: Consider clearing cache on unmount (optional).

While not strictly necessary (strings are garbage collected with the component), you could add explicit cache cleanup in componentWillUnmount for consistency with the existing cleanup pattern:

this.xxlStyleCache = null;
this.isXxlStyleCacheDirty = false;

This is purely a hygiene suggestion and has no functional impact.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8d56c22 and 24c9105.

📒 Files selected for processing (1)

• src/extensions/maxi-block/maxiBlockComponent.js

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: e2e-js
• GitHub Check: unit-js
• GitHub Check: e2e-js-playwright

🔇 Additional comments (10)

src/extensions/maxi-block/maxiBlockComponent.js (10)

100-101: LGTM!

Instance properties for the XXL style cache are appropriately initialized. Using instance properties (rather than React state) avoids unnecessary re-renders for internal cache management.

---

564-575: LGTM!

The cache invalidation logic correctly marks the XXL cache as dirty when any style-affecting change occurs: non-relation attribute changes, base breakpoint changes, or block style changes. This ensures stale styles won't be served.

---

580-589: LGTM!

The new isBaseBreakpointChange parameter is correctly computed and passed, mirroring the existing pattern for detecting valid breakpoint transitions (excluding initial undefined→value cases).

---

1377-1381: LGTM!

The updated signature maintains backward compatibility via the default value, and the new parameter is correctly threaded through to downstream methods.

---

1422-1432: LGTM!

The new parameter is correctly passed through the injectStyles call to enable cache-aware style generation.

---

1544-1554: LGTM!

The signature update correctly adds isBaseBreakpointChange in the parameter chain while maintaining the existing parameter order.

---

1563-1573: LGTM!

The new parameter is correctly threaded through to generateStyleContent where the caching logic resides.

---

1748-1758: LGTM!

The signature correctly includes the new isBaseBreakpointChange parameter for cache validity decisions.

---

1783-1791: LGTM!

The cache hit conditions are appropriately defensive: requiring a breakpoint change to XXL, no block style change, no base breakpoint change, existing cache, and clean cache state. This provides multiple layers of validation before serving cached CSS.

---

1839-1842: LGTM!

The cache is correctly updated after style generation and processing, but only when styleContent is truthy. The dirty flag is properly reset to ensure subsequent XXL breakpoint switches can benefit from the cache.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 24c9105337

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Invalidate XXL cache on inherited blockStyle changes

This cached-XXL branch will reuse the previous xxlStyleCache whenever isXxlStyleCacheDirty stays false. That flag is only set from attribute diffs, but getCurrentBlockStyle() can update attributes.blockStyle after the diff (e.g., when a parent style-card changes), so the dirty flag never flips. In that scenario, switching to the XXL breakpoint reuses CSS that still references the old --maxi-<style>- variables, so colors stay wrong until another style edit forces regeneration. Consider marking the cache dirty whenever getCurrentBlockStyle() updates the style (or when SC context changes).

Useful? React with 👍 / 👎.