fix: ensure webpack.dev.config.js includes quietDeps: true, applies injected <link> styles once loaded, example app updates to show ParagonWebpackPlugin output

[adamstankiewicz]

CHANGELOG

Fix quietDeps: true regression during local dev

As part of #546, some of the styles-related Webpack config in webpack.dev.config.js were refactored to a helper function getStyleUseConfig. As part of this refactor, the quietDeps option passed in sassOptions was lost.

Without quietDeps: true, Webpack will throw a (loud) warning in the browser/console given some usage of deprecated Sass syntax in some/all MFEs when running npm start to run the app.

This PR ensures quietDeps: true is added back to sassOptions to remove deprecation errors surfaced by Webpack.

Applies injected <link> styles onload

Currently, frontend-build injects <link> elements with rel="preload" as="style", but does not actually apply the styles itself.

This PR adds an onload handler on the injected <link> elements to ensure the stylesheets are applied as early as possible, e.g. without relying on frontend-platform's handling of PARAGON_THEME_URLS.

In short, frontend-build is primarily be responsible for applying Paragon/brand styles from configuration on initial page load whereas frontend-platform is responsible to handling any runtime configuration changes of the configuration (e.g., as this could be used with the MFE runtime configuration API, or if env.config.js is dynamic).

Example MFE app

• Imports Paragon SCSS (v22) into example app to give it styles 🎨 (i.e., @use '@openedx/paragon/scss/core/core';)
  • Note: this should change once Paragon v23 is released.
• Introduces ParagonPreview in the example app to more easily QA changes in ParagonWebpackPlugin, carried over from my original PR.

With Paragon v22

With Paragon / brand package (@edx/elm-theme, github) v23 (alpha)

[adamstankiewicz]

[inform] Now installs @openedx/paragon in example app, which now includes a ParagonPreview component to render the output of the generated PARAGON_THEME global variable. It also includes a basic component preview of Button, which will be useful when using the example app for any of brand package overrides with the ParagonWebpackPlugin (e.g., to sure it's applying correctly).

[adamstankiewicz]

[inform] This is carried over from my original PR for ParagonWebpackPlugin.

[adamstankiewicz]

[inform] Ensures the pre-loaded stylesheet is applied once its successfully loaded. E.g., it no longer relies on the corresponding frontend-platform PR to apply the injected <link> styles, ensuring they're applied as early as possible in the initial page load.

Edit: frontend-platform is more responsible for handling when:

• there's an initial attempt at loading CDN urls fails from frontend-build, frontend-platform will retry, and then fallback to the locally installed version.
• the PARAGON_THEME_URLS config changes at runtime (e.g., via MFE runtime config API or a dynamic value with env.config).

[brian-smith-tcril]

LGTM! Since this is all in 1 commit would you mind updating the commit message to mention all the changes (or just changing the PR title and we can squash)?

[openedx-semantic-release-bot]

🎉 This PR is included in version 14.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[openedx-semantic-release-bot]

🎉 This PR is included in version 15.0.0-alpha.16 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀