Skip to content

fix: Deduplicate CSS by hoisting shared styles to base selectors - #4152

Open
TrevorBurnham wants to merge 1 commit into
cloudscape-design:mainfrom
TrevorBurnham:deduplicate-loop-styles
Open

fix: Deduplicate CSS by hoisting shared styles to base selectors#4152
TrevorBurnham wants to merge 1 commit into
cloudscape-design:mainfrom
TrevorBurnham:deduplicate-loop-styles

Conversation

@TrevorBurnham

@TrevorBurnhamTrevorBurnham commented Jan 4, 2026

Copy link
Copy Markdown
Contributor

Description

I noticed that some CSS declarations were being repeated in loops. For example, the class for each icon size has the same box-sizing and vertical-align declarations.

This PR moves those declarations to avoid repetition, reducing the amount of generated CSS by ~1.3KB (total) across the icon, spinner, tiles, and button components.

How has this been tested?

Since this is purely a CSS change, the screenshot tests (which I don't have the ability to run) should be definitive.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@TrevorBurnham
TrevorBurnham requested a review from a team as a code ownerJanuary 4, 2026 20:02
@TrevorBurnham
TrevorBurnham requested review from YueyingLu and removed request for a teamJanuary 4, 2026 20:02
Move repeated declarations from size/variant-specific selectors to base
classes, reducing compiled CSS output:
- icon: box-sizing and vertical-align to .icon base class
- spinner: remove redundant box-sizing from size loop (already on .root)
- tiles: remove redundant box-sizing from column loop (already on .tile-container)
- button: hoist text-decoration and position to .button base class
Total savings: ~1.3KB across affected components.
@TrevorBurnham
TrevorBurnhamforce-pushed the deduplicate-loop-styles branch from a8aafcc to 81275d5CompareAugust 26, 2026 16:10
@github-actions
github-actionsBot temporarily deployed to fork-dev-pages-react16 August 26, 2026 17:15 Inactive
@github-actions
github-actionsBot temporarily deployed to fork-dev-pages-react18 August 26, 2026 17:15 Inactive
Sign up for freeto 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.

1 participant

@TrevorBurnham