Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(feat) Load pure CSS files in the styleguide via css-loader #777

Closed
wants to merge 3 commits into from

Conversation

denniskigen
Copy link
Member

@denniskigen denniskigen commented Oct 3, 2023

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.

For changes to apps

If applicable

  • My work includes tests or is validated by existing tests.
  • I have updated the esm-framework mock to reflect any API changes I have made.

Summary

This PR attempts to fix an issue where the latest version of the openmrs tooling fails to build frontend assets as expected. More specifically, running npx --legacy-peer-deps openmrs@next build --build-config /spa-build-config.json --target /app (or its equivalents) yields the following error:

https://openmrs.slack.com/files/UJ8TY7J05/F05UG139EHM/cleanshot_2023-10-03_at_12___.10.08_2x.png?origin_team=T03U4PGDY&origin_channel=CHP5QAE5R

Digging deeper, this error stems from the tooling failing to load CSS provided by the React Spectrum library. As explained in the linked thread, the styleguide uses a custom webpack config which doesn't leverage either style-loader or css-loader for loading CSS modules. This PR adds a rule to the styleguide's webpack config that enables loading pure CSS files (such as the ones coming from external libraries) using css-loader.

Screenshots

Related Issue

Other

@denniskigen denniskigen marked this pull request as draft October 3, 2023 11:16
@github-actions
Copy link
Contributor

github-actions bot commented Oct 3, 2023

Size Change: -921 kB (-25%) 🎉

Total Size: 2.79 MB

Filename Size Change
packages/apps/esm-devtools-app/dist/889.js 172 kB -284 kB (-62%) 🏆
packages/framework/esm-framework/dist/openmrs-esm-framework.js 346 kB -351 kB (-50%) 🏆
packages/framework/esm-styleguide/dist/openmrs-esm-styleguide.js 82.7 kB -286 kB (-78%) 🏆
ℹ️ View Unchanged
Filename Size Change
packages/apps/esm-devtools-app/dist/68.js 4.29 kB 0 B
packages/apps/esm-devtools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-devtools-app/dist/988.js 282 B 0 B
packages/apps/esm-devtools-app/dist/main.js 2.95 kB 0 B
packages/apps/esm-devtools-app/dist/openmrs-esm-devtools-app.js 3.03 kB 0 B
packages/apps/esm-implementer-tools-app/dist/220.js 4.43 kB 0 B
packages/apps/esm-implementer-tools-app/dist/246.js 449 B 0 B
packages/apps/esm-implementer-tools-app/dist/263.js 6.66 kB 0 B
packages/apps/esm-implementer-tools-app/dist/319.js 633 B 0 B
packages/apps/esm-implementer-tools-app/dist/329.js 10 kB 0 B
packages/apps/esm-implementer-tools-app/dist/426.js 1.66 kB 0 B
packages/apps/esm-implementer-tools-app/dist/466.js 5.85 kB 0 B
packages/apps/esm-implementer-tools-app/dist/499.js 2.87 kB 0 B
packages/apps/esm-implementer-tools-app/dist/500.js 2.83 kB 0 B
packages/apps/esm-implementer-tools-app/dist/519.js 400 B 0 B
packages/apps/esm-implementer-tools-app/dist/56.js 3.07 kB 0 B
packages/apps/esm-implementer-tools-app/dist/574.js 560 B 0 B
packages/apps/esm-implementer-tools-app/dist/575.js 713 B 0 B
packages/apps/esm-implementer-tools-app/dist/587.js 2.81 kB 0 B
packages/apps/esm-implementer-tools-app/dist/620.js 126 kB 0 B
packages/apps/esm-implementer-tools-app/dist/625.js 562 B 0 B
packages/apps/esm-implementer-tools-app/dist/657.js 562 B 0 B
packages/apps/esm-implementer-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-implementer-tools-app/dist/757.js 560 B 0 B
packages/apps/esm-implementer-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-implementer-tools-app/dist/807.js 1.44 kB 0 B
packages/apps/esm-implementer-tools-app/dist/833.js 681 B 0 B
packages/apps/esm-implementer-tools-app/dist/837.js 55.1 kB 0 B
packages/apps/esm-implementer-tools-app/dist/855.js 32.8 kB 0 B
packages/apps/esm-implementer-tools-app/dist/889.js 172 kB +10 B (0%)
packages/apps/esm-implementer-tools-app/dist/main.js 4.18 kB 0 B
packages/apps/esm-implementer-tools-app/dist/openmrs-esm-implementer-tools-app.js 3.31 kB 0 B
packages/apps/esm-login-app/dist/111.js 1.22 kB 0 B
packages/apps/esm-login-app/dist/126.js 2.5 kB 0 B
packages/apps/esm-login-app/dist/144.js 21.7 kB 0 B
packages/apps/esm-login-app/dist/173.js 1.22 kB 0 B
packages/apps/esm-login-app/dist/236.js 272 B 0 B
packages/apps/esm-login-app/dist/240.js 364 B 0 B
packages/apps/esm-login-app/dist/261.js 6.28 kB 0 B
packages/apps/esm-login-app/dist/263.js 6.65 kB 0 B
packages/apps/esm-login-app/dist/272.js 264 B 0 B
packages/apps/esm-login-app/dist/319.js 504 B 0 B
packages/apps/esm-login-app/dist/336.js 234 B 0 B
packages/apps/esm-login-app/dist/337.js 1.3 kB 0 B
packages/apps/esm-login-app/dist/342.js 11.6 kB 0 B
packages/apps/esm-login-app/dist/539.js 298 B 0 B
packages/apps/esm-login-app/dist/56.js 3.06 kB 0 B
packages/apps/esm-login-app/dist/574.js 428 B 0 B
packages/apps/esm-login-app/dist/610.js 5.84 kB 0 B
packages/apps/esm-login-app/dist/625.js 421 B 0 B
packages/apps/esm-login-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-login-app/dist/644.js 305 B 0 B
packages/apps/esm-login-app/dist/673.js 284 B 0 B
packages/apps/esm-login-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-login-app/dist/757.js 509 B 0 B
packages/apps/esm-login-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-login-app/dist/807.js 685 B 0 B
packages/apps/esm-login-app/dist/829.js 10.2 kB 0 B
packages/apps/esm-login-app/dist/833.js 528 B 0 B
packages/apps/esm-login-app/dist/889.js 172 kB +11 B (0%)
packages/apps/esm-login-app/dist/967.js 576 B 0 B
packages/apps/esm-login-app/dist/main.js 3.59 kB 0 B
packages/apps/esm-login-app/dist/openmrs-esm-login-app.js 3.28 kB 0 B
packages/apps/esm-offline-tools-app/dist/202.js 9.73 kB 0 B
packages/apps/esm-offline-tools-app/dist/206.js 7.41 kB 0 B
packages/apps/esm-offline-tools-app/dist/224.js 3.86 kB 0 B
packages/apps/esm-offline-tools-app/dist/263.js 6.66 kB 0 B
packages/apps/esm-offline-tools-app/dist/273.js 48.9 kB 0 B
packages/apps/esm-offline-tools-app/dist/281.js 16.3 kB 0 B
packages/apps/esm-offline-tools-app/dist/297.js 466 B 0 B
packages/apps/esm-offline-tools-app/dist/316.js 2.04 kB 0 B
packages/apps/esm-offline-tools-app/dist/319.js 1.14 kB 0 B
packages/apps/esm-offline-tools-app/dist/391.js 305 B 0 B
packages/apps/esm-offline-tools-app/dist/412.js 1.58 kB 0 B
packages/apps/esm-offline-tools-app/dist/47.js 6.34 kB 0 B
packages/apps/esm-offline-tools-app/dist/501.js 24.1 kB 0 B
packages/apps/esm-offline-tools-app/dist/526.js 15.7 kB 0 B
packages/apps/esm-offline-tools-app/dist/538.js 6.79 kB 0 B
packages/apps/esm-offline-tools-app/dist/541.js 383 B 0 B
packages/apps/esm-offline-tools-app/dist/56.js 3.07 kB 0 B
packages/apps/esm-offline-tools-app/dist/574.js 1.04 kB 0 B
packages/apps/esm-offline-tools-app/dist/594.js 11.4 kB 0 B
packages/apps/esm-offline-tools-app/dist/625.js 1.04 kB 0 B
packages/apps/esm-offline-tools-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-offline-tools-app/dist/696.js 410 B 0 B
packages/apps/esm-offline-tools-app/dist/733.js 290 B 0 B
packages/apps/esm-offline-tools-app/dist/735.js 2.63 kB 0 B
packages/apps/esm-offline-tools-app/dist/752.js 2.83 kB 0 B
packages/apps/esm-offline-tools-app/dist/757.js 1.21 kB 0 B
packages/apps/esm-offline-tools-app/dist/78.js 6.15 kB 0 B
packages/apps/esm-offline-tools-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-offline-tools-app/dist/807.js 1.03 kB 0 B
packages/apps/esm-offline-tools-app/dist/833.js 1.23 kB 0 B
packages/apps/esm-offline-tools-app/dist/889.js 172 kB +11 B (0%)
packages/apps/esm-offline-tools-app/dist/937.js 6.61 kB 0 B
packages/apps/esm-offline-tools-app/dist/main.js 56.8 kB 0 B
packages/apps/esm-offline-tools-app/dist/openmrs-esm-offline-tools-app.js 3.31 kB 0 B
packages/apps/esm-primary-navigation-app/dist/241.js 14 kB 0 B
packages/apps/esm-primary-navigation-app/dist/263.js 6.66 kB 0 B
packages/apps/esm-primary-navigation-app/dist/319.js 200 B 0 B
packages/apps/esm-primary-navigation-app/dist/574.js 183 B 0 B
packages/apps/esm-primary-navigation-app/dist/575.js 441 B 0 B
packages/apps/esm-primary-navigation-app/dist/625.js 184 B 0 B
packages/apps/esm-primary-navigation-app/dist/63.js 16.5 kB 0 B
packages/apps/esm-primary-navigation-app/dist/674.js 680 B 0 B
packages/apps/esm-primary-navigation-app/dist/710.js 6.44 kB 0 B
packages/apps/esm-primary-navigation-app/dist/716.js 6.12 kB 0 B
packages/apps/esm-primary-navigation-app/dist/735.js 2.64 kB 0 B
packages/apps/esm-primary-navigation-app/dist/743.js 7.25 kB 0 B
packages/apps/esm-primary-navigation-app/dist/757.js 209 B 0 B
packages/apps/esm-primary-navigation-app/dist/788.js 42.9 kB 0 B
packages/apps/esm-primary-navigation-app/dist/807.js 182 B 0 B
packages/apps/esm-primary-navigation-app/dist/833.js 210 B 0 B
packages/apps/esm-primary-navigation-app/dist/889.js 172 kB +11 B (0%)
packages/apps/esm-primary-navigation-app/dist/948.js 3.07 kB 0 B
packages/apps/esm-primary-navigation-app/dist/953.js 12.8 kB 0 B
packages/apps/esm-primary-navigation-app/dist/main.js 4.78 kB 0 B
packages/apps/esm-primary-navigation-app/dist/openmrs-esm-primary-navigation-app.js 3.29 kB 0 B
packages/framework/esm-api/dist/openmrs-esm-api.js 9.68 kB 0 B
packages/framework/esm-breadcrumbs/dist/openmrs-esm-breadcrumbs.js 2.66 kB 0 B
packages/framework/esm-config/dist/openmrs-esm-module-config.js 7.87 kB 0 B
packages/framework/esm-dynamic-loading/dist/openmrs-esm-dynamic-loading.js 2.12 kB 0 B
packages/framework/esm-error-handling/dist/openmrs-esm-error-handling.js 894 B 0 B
packages/framework/esm-extensions/dist/openmrs-esm-extensions.js 8.05 kB 0 B
packages/framework/esm-feature-flags/dist/openmrs-esm-feature-flags.js 1.67 kB 0 B
packages/framework/esm-framework/dist/146.openmrs-esm-framework.js 6.69 kB 0 B
packages/framework/esm-framework/dist/455.openmrs-esm-framework.js 4.57 kB 0 B
packages/framework/esm-framework/dist/530.openmrs-esm-framework.js 2.92 kB 0 B
packages/framework/esm-framework/dist/645.openmrs-esm-framework.js 9.31 kB 0 B
packages/framework/esm-framework/dist/710.openmrs-esm-framework.js 6.48 kB 0 B
packages/framework/esm-framework/dist/735.openmrs-esm-framework.js 2.66 kB 0 B
packages/framework/esm-framework/dist/788.openmrs-esm-framework.js 42.9 kB 0 B
packages/framework/esm-globals/dist/openmrs-esm-globals.js 714 B 0 B
packages/framework/esm-offline/dist/openmrs-esm-offline.js 34.4 kB 0 B
packages/framework/esm-react-utils/dist/openmrs-esm-react-utils.js 14.8 kB 0 B
packages/framework/esm-state/dist/openmrs-esm-state.js 888 B 0 B
packages/framework/esm-utils/dist/openmrs-esm-utils.js 10.2 kB 0 B
packages/shell/esm-app-shell/dist/966c4dfec919951f.js 1.58 kB 0 B
packages/shell/esm-app-shell/dist/e861b352d93d75e6.js 9.88 kB 0 B
packages/shell/esm-app-shell/dist/f587be8fbac73856.js 6.04 kB 0 B
packages/shell/esm-app-shell/dist/openmrs.a9106efa128792da.js 324 kB 0 B
packages/shell/esm-app-shell/dist/service-worker.js 57.3 kB 0 B
packages/tooling/openmrs/dist/cli.js 3.08 kB 0 B
packages/tooling/openmrs/dist/commands/assemble.js 2.73 kB 0 B
packages/tooling/openmrs/dist/commands/build.js 1.61 kB 0 B
packages/tooling/openmrs/dist/commands/debug.js 579 B 0 B
packages/tooling/openmrs/dist/commands/develop.js 1.84 kB 0 B
packages/tooling/openmrs/dist/commands/index.js 438 B 0 B
packages/tooling/openmrs/dist/commands/start.js 848 B 0 B
packages/tooling/openmrs/dist/index.js 517 B 0 B
packages/tooling/openmrs/dist/runner.js 870 B 0 B
packages/tooling/openmrs/dist/utils/config.js 726 B 0 B
packages/tooling/openmrs/dist/utils/debugger.js 529 B 0 B
packages/tooling/openmrs/dist/utils/dependencies.js 639 B 0 B
packages/tooling/openmrs/dist/utils/helpers.js 393 B 0 B
packages/tooling/openmrs/dist/utils/importmap.js 3.25 kB 0 B
packages/tooling/openmrs/dist/utils/index.js 444 B 0 B
packages/tooling/openmrs/dist/utils/logger.js 234 B 0 B
packages/tooling/openmrs/dist/utils/npmConfig.js 854 B 0 B
packages/tooling/openmrs/dist/utils/untar.js 721 B 0 B
packages/tooling/openmrs/dist/utils/variables.js 192 B 0 B
packages/tooling/openmrs/dist/utils/webpack.js 276 B 0 B
packages/tooling/webpack-config/dist/index.js 3.37 kB 0 B

compressed-size-action

@denniskigen denniskigen changed the title (feat) Add module loaders for CSS files to the styleguide webpack config (feat) Load pure CSS files in the styleguide via css-loader Oct 3, 2023
@denniskigen denniskigen marked this pull request as ready for review October 3, 2023 12:19
@ibacher
Copy link
Member

ibacher commented Oct 3, 2023

Have you tested this with the updated React Spectrum libraries?

@ibacher
Copy link
Member

ibacher commented Oct 3, 2023

So, I think this also needs to be applied to the framework.

use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader"],
},
{
test: /\.s[ac]ss$/i,
Copy link
Member

Choose a reason for hiding this comment

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

What is the "postcss-loader" used for sass/scss, and is this needed for pure css?

Copy link
Member

Choose a reason for hiding this comment

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

It runs postcss, a CSS post-processor on the CSS. I suppose it wouldn't hurt to put in here. (we mostly use it for this feature).

@denniskigen
Copy link
Member Author

denniskigen commented Oct 3, 2023

Closing in favour of #778

@denniskigen denniskigen closed this Oct 3, 2023
@ibacher ibacher deleted the feat/update-styleguide-webpack-config branch October 3, 2023 14:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants