Skip to content

Conversation

@srobinson
Copy link
Member

BREAKING CHANGE: background-position now fully expands to -x and -y even in multi-layer backgrounds

Before:
background: url(a.png) center, url(b.png) left top
→ background-position: center, left top (shorthand)

After:
background: url(a.png) center, url(b.png) left top
→ background-position-x: center, left
→ background-position-y: center, top (longhands)

This fixes integration with @b/values which only supports longhands.

Changes:

  • Remove isMultiLayer check in expand.ts
  • Remove unused import hasTopLevelCommas
  • Update expandBackgroundPosition to handle comma-separated layers
  • Split each layer, expand individually, rejoin with commas
  • Update test expectations to match new behavior
  • Fix invalid-cases test expectations

BREAKING CHANGE: background-position now fully expands to -x and -y even in multi-layer backgrounds

Before:
  background: url(a.png) center, url(b.png) left top
  → background-position: center, left top (shorthand)

After:
  background: url(a.png) center, url(b.png) left top
  → background-position-x: center, left
  → background-position-y: center, top (longhands)

This fixes integration with @b/values which only supports longhands.

Changes:
- Remove isMultiLayer check in expand.ts
- Remove unused import hasTopLevelCommas
- Update expandBackgroundPosition to handle comma-separated layers
- Split each layer, expand individually, rejoin with commas
- Update test expectations to match new behavior
- Fix invalid-cases test expectations
Copilot AI review requested due to automatic review settings November 15, 2025 11:26
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes recursive expansion of background-position in multi-layer backgrounds by removing the guard that prevented expansion of comma-separated values and updating the expandBackgroundPosition function to handle multi-layer values.

  • Removes the isMultiLayer check in src/core/expand.ts to allow recursive expansion of all shorthand properties, including those with comma-separated values
  • Updates expandBackgroundPosition to split comma-separated layers, expand each individually, and rejoin with commas
  • Updates test expectations to reflect the new behavior where multi-layer background-position values are now fully expanded to -x and -y longhands

Reviewed Changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated no comments.

Show a summary per file
File Description
src/core/expand.ts Removed isMultiLayer guard and unused hasTopLevelCommas import to enable recursive expansion for all properties
src/handlers/background-position/expand.ts Added multi-layer support using splitLayers, expanding each layer individually and rejoining with commas
test/recursive-expansion.test.ts Updated test expectations to verify multi-layer positions are now expanded to -x and -y longhands
test/invalid-cases.test.ts Updated expected output to use backgroundPositionX and backgroundPositionY instead of backgroundPosition
FIX_SUMMARY.md Added documentation explaining the fix and breaking change

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@srobinson srobinson merged commit 91f2f19 into main Nov 15, 2025
14 checks passed
@srobinson srobinson deleted the develop branch November 15, 2025 11:45
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.

2 participants