Skip to content

#580 Trim notification-list CSS to fit style budget#581

Merged
bracyw merged 2 commits intodevelopfrom
580-fix-notification-list-css-budget
Apr 7, 2026
Merged

#580 Trim notification-list CSS to fit style budget#581
bracyw merged 2 commits intodevelopfrom
580-fix-notification-list-css-budget

Conversation

@bracyw
Copy link
Copy Markdown
Collaborator

@bracyw bracyw commented Apr 7, 2026

Changes

Trims notification-list.component.css from 4.40 kB to 4.00 kB compiled output, bringing it under the anyComponentStyle error budget without changing any visual design. No budget thresholds were modified.

Key reductions:

  • Removed redundant/default-value rules (variant-stream max-height, position: relative)
  • Removed imperceptible properties (letter-spacing: 0.01em, border-radius on 3px accent bar)
  • Grouped shared truncation and background-color patterns into shared selectors
  • Shortened rgba() to hex8 color notation for smaller compiled output
  • Removed inherited font-family declaration

Notes

Angular's ViewEncapsulation adds ~20 bytes of scoping attribute per CSS rule, so selector grouping alone barely helps — the main wins came from property removal and shorthand colors. The compiled output lands at exactly 4.00 kB (warning threshold, but under the 4 kB error threshold).

Test Cases

  • Production build completes without budget errors
  • No visual or layout changes — all reductions target redundant defaults, sub-pixel values, or minification-only differences

Checklist

It can be helpful to check the Checks and Files changed tabs.
Please review the contributor guide and reach out to your Tech Lead if anything is unclear.
Please request reviewers and ping on slack only after you've gone through this whole checklist.

  • All commits are tagged with the ticket number
  • No linting errors / newline at end of file warnings
  • All code follows repository-configured prettier formatting
  • No merge conflicts
  • All checks passing
  • Remove any non-applicable sections of this template
  • Assign the PR to yourself
  • No package-lock.json changes (unless dependencies have changed)
  • Request reviewers & ping on Slack
  • PR is linked to the ticket (fill in the closes line below)

Closes #580

@bracyw bracyw self-assigned this Apr 7, 2026
@bracyw bracyw force-pushed the 580-fix-notification-list-css-budget branch from 8d7569d to 0fe3892 Compare April 7, 2026 21:25
@bracyw bracyw changed the title #580 Raise component style budget to fix CI build #580 Trim notification-list CSS to fit style budget Apr 7, 2026
@bracyw bracyw marked this pull request as ready for review April 7, 2026 21:43
@bracyw bracyw merged commit b5e6c95 into develop Apr 7, 2026
4 checks passed
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.

Fix notification-list component CSS exceeding style budget

1 participant