2025-03-27 Frontend Working Group Meeting Notes: Dependency updates, CSS Modules, etc

By Adolfo Brandes
2 min

 Date, time, location

 Discussion topic(s)

One, maybe two topics to be presented or discussed in depth in the upcoming meeting.

🎥Recording

 Participants

Adam Stankiewicz, Adolfo Brandes, Brian Smith, Fox Piacenti, Hamzah Ullah, Juan Carlos Iasenza, Max Frank

🤖 Summary

1. Dependency Updates & React 18 Preparation

  • Brian Smith is working on a series of PRs to prepare MFEs (Micro Frontends) for React 18, by isolating dependency updates (e.g. Paragon, frontend-build) from React 18-specific changes.

  • This improves commit clarity and makes debugging/reactive updates easier.

  • React unit test utils remains React 17-compatible for now, to avoid breaking dependent MFs.

  • Multiple test updates were required due to changes in async behavior, Paragon components, and test practices (e.g., switching from getBy to findBy).

2. CSS Modules Support

  • Adam Stankiewicz proposed enabling CSS Modules in frontend-build to prevent global style collisions.

  • Current SCSS setup treats styles globally, leading to potential class name collisions and brittle QA.

  • Proposed change introduces optional *.module.scss support via Webpack config (non-breaking for existing code).

  • Suggestion to create a linting rule or GitHub search to identify SCSS files that could migrate to module usage.

  • Decision: move forward with draft PR, document in frontend-build README, and possibly add an ADR (Architecture Decision Record) and examples in the frontend template app.

3. Frontend Base Mini Summit

  • A mini frontend base summit is planned for April 28th at Axim HQ in Cambridge (Kendall Square).

  • Goal: prepare Frontend Base for OMO (One Micro Frontend to rule them all) by making it the default deployment mechanism.

  • Max Frank invited to participate alongside Adam and others.

  • Even those not local will be able to contribute or influence the direction, as development remains open and transparent.

4. Style Duplication Cleanup

  • Brian and Adolfo discussed removing duplicate SCSS imports across components (e.g., Paragon styles).

  • Proposed solution: centralize stylesheet imports (e.g., use index.scss in the MF root) to avoid redundant style loading.

  • This helps with performance and cleanliness pre-design-tokens (Paragon 22).

  • Will be obsolete with Paragon 23/design tokens, but is still worth pursuing now.

5. Testing Improvements

  • Brian’s PR to prep for React 18 required significant test updates:

    • Switching to async testing patterns (findBy vs. getBy).

    • Replacing fragile methods like window.location.href with more robust ones (location display component).

    • Fixing issues related to intl-provider, user-event usage, and flaky tests with increased timeouts.

6. Miscellaneous

  • Adam proposed parallelizing CI in the frontend template app to improve build speed.

  • Alias import support (@components/...) was discussed as a way to simplify import paths in MFs.

  • Brian’s PR strategy for upgrading all MFs to React 18 involves two steps:

    1. Prep dependencies

    2. Upgrade React version itself to keep PRs reviewable and manageable.

✅ Next Steps

  • Finalize and merge CSS Modules support PR.

  • Add documentation in frontend-build and possibly an ADR.

  • Continue dependency update PRs for React 18.

  • Clean up duplicated SCSS imports.

  • Prepare for the mini summit and eventual transition to frontend base as the default.

  • Approve and merge Adam’s alias imports PR.

 Action items

 Decisions

Related content