Skip to content

Conversation

@dirkwa
Copy link
Contributor

@dirkwa dirkwa commented Jan 8, 2026

Summary

  • Fix SCSS deprecation warnings by migrating from / division to math.div() and from darken() to color.adjust()
  • Silence Bootstrap 4's internal SCSS deprecation warnings (we can't fix those, Bootstrap 5 migration is a separate effort)
  • Reduce admin-ui bundle size by tree-shaking FontAwesome 5 icons and removing unused dependencies

Changes

SCSS modernization:

  • Replace deprecated / division operator with sass:math.div() in _grid.scss_card.scss_sidebar.scss_layout.scss_rtl.scss
  • Replace deprecated darken() function with sass:color.adjust() in _card.scss
  • Configure sass-loader to silence Bootstrap 4's internal deprecation warnings (unavoidable until Bootstrap 5 migration)

Bundle size optimization:

  • Tree-shake FontAwesome 5: import only used icons instead of entire icon packs
  • Remove FontAwesome 4 dependency, use FA5's v4-shims for backward compatibility
  • Remove unused lodash dependency (replaced with native JS)
  • Exclude SVG font files from webpack bundle (served as static assets instead)

@tkurki
Copy link
Member

tkurki commented Jan 9, 2026

How dows this relate #2177 ?

@dirkwa
Copy link
Contributor Author

dirkwa commented Jan 9, 2026

How dows this relate #2177 ?

Depends what you're plan with PR #2177 is.

Neither I can verify what needs to be changed here after PR #2177 is part of the master or Karl-Erik has to maybe modify his PR if this one comes first.

@tkurki
Copy link
Member

tkurki commented Jan 9, 2026

The title says "Webpack - remove build warnings and better performance". If #2177 removes webpack then is this still relevant?

@dirkwa
Copy link
Contributor Author

dirkwa commented Jan 9, 2026

The title says "Webpack - remove build warnings and better performance". If #2177 removes webpack then is this still relevant?

The key question: Will PR #2177 (Vite migration) eliminate the warnings that my PR #2237 fixes?

Answer: Partially, but not completely.

Here's the breakdown:

Issue My PR #2237 PR #2177 (Vite)
SCSS / division deprecation warnings ✅ Fixes with math.div() ❌ Still needed - Vite uses Sass too
Webpack asset size warnings ✅ Disables them ✅ Eliminated (no webpack)
Bootstrap 4 deprecation warnings ✅ Silences via sass-loader config ❓ May need different config for Vite
SVG font removal (~2.2MB savings) ✅ Removes ❌ Still needed - fonts are still bundled
Font Awesome 4→5 migration ✅ Does this ❌ Still needed
Lodash removal (531KB) ✅ Removes ❌ Still needed
Tree-shaking FA icons (1012KB→17KB) ✅ Does this ⚠️ Vite may tree-shake better, but deep imports still help

I would recommend you do PR #2177 first and than I rebase and adjust this PR.

@KEGustafsson
Copy link
Contributor

KEGustafsson commented Jan 11, 2026

I would recommend you do PR #2177 first and than I rebase and adjust this PR.

Sounds fine to me if you make improvement to Vite too after PR #2177

EDIT: I made personal test build including all these changes to PR #2177 codes and all fine. I don't want to take your credits to PR #2177, so best to split this update to two part

  1. Vite change PR chore: switch server-admin-ui bundler from Webpack to Vite #2177
  2. Updates, this PR

@KEGustafsson
Copy link
Contributor

@dirkwa #2177 Is now included, so please you can do improvements on top of that.

@dirkwa dirkwa changed the title Webpack - remove build warnings and better performance admin ui - remove build warnings and better performance Jan 15, 2026
@dirkwa
Copy link
Contributor Author

dirkwa commented Jan 15, 2026

@KEGustafsson

Done and PR title and text adjusted.

@dirkwa
Copy link
Contributor Author

dirkwa commented Jan 15, 2026

Something must have been gone wrong during the rebase. I will look into it tomorrow.

@dirkwa dirkwa force-pushed the fix-scss-warnings branch from 5ede87d to 6d49ac2 Compare January 16, 2026 15:36
@dirkwa dirkwa changed the title admin ui - remove build warnings and better performance fix(admin ui): remove build warnings and better performance Jan 16, 2026
@dirkwa
Copy link
Contributor Author

dirkwa commented Jan 16, 2026

Commit history is much more clean now, sorry for the delay.

@dirkwa
Copy link
Contributor Author

dirkwa commented Jan 17, 2026

NOTE

This PR is not needed when PR #2267 merged.

@tkurki tkurki added the chore label Jan 18, 2026
@tkurki tkurki changed the title fix(admin ui): remove build warnings and better performance fix(admin ui): remove build warnings and reduce bundle size Jan 18, 2026
Use math.div() instead of / operator for division to fix
Dart Sass 2.0 deprecation warnings.
Replace font-awesome package with @fortawesome/fontawesome-free v4-shims
for backwards compatibility with FA4 class names. Saves ~78KB.
Replace lodash isUndefined with native === undefined check.
Removes 531KB lodash bundle from the build.
Use deep imports (@fortawesome/free-solid-svg-icons/faIcon) instead of
barrel imports to enable tree-shaking. Reduces FA5 icons from 1012KB
to 17KB.
@tkurki tkurki force-pushed the fix-scss-warnings branch from 6d49ac2 to d7e676e Compare January 18, 2026 08:57
Copy link
Contributor

@bkeepers bkeepers left a comment

Choose a reason for hiding this comment

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

Looks. good. Looking forward to seeing those build warnings go away!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants