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.

Sign up for GitHub

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

Jump to bottom

fix: Properly parse multi-value shorthand with slash #859

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

fix: Properly parse multi-value shorthand with slash #859

wants to merge 5 commits into from
+90 −4

Conversation

yasuhiro-yamamoto
Copy link
Contributor

What changed / motivation ?

Fixed the expansion handling of border-radius shorthand values containing the '/' separator.

Linked PR/Issues

Fixes #730

Additional Context

  • Modified the splitValue function to handle nodes containing '/' by merging them with adjacent nodes
  • Example: '1px / 2px' is now correctly processed as borderStartStartRadius: '1px / 2px'
  • Added test cases in packages/shared/tests/split-value-test.js

Pre-flight checklist

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 15, 2025
@yasuhiro-yamamoto yasuhiro-yamamoto changed the title Fix/issue 730 fix: Properly parse multi-value shorthand with slash Jan 15, 2025
@yasuhiro-yamamoto yasuhiro-yamamoto mentioned this pull request Jan 16, 2025
Open
nmn
nmn requested changes Jan 17, 2025
View reviewed changes
Copy link
Contributor

@nmn nmn left a comment

Choose a reason for hiding this comment

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

Thanks for trying to fix this edge case, but the logic isn't quite right.

(Note: also, this code path is only used if you use the legacy-expand-shorthands configuration which should not be needed in the vast majority of use-cases.)

packages/shared/__tests__/split-value-test.js Outdated
Comment on lines 47 to 56

test('Splits a string of values with slash notation appropriately.', () => {
expect(splitValue('1px/2px 3px 4px 5px')).toEqual([
'1px/2px',
'3px',
'4px',
'5px',
]);
});
});
Copy link
Contributor

@nmn nmn Jan 17, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

This is not how border-radius values are expanded. The correct expansion should be:

Suggested change
test('Splits a string of values with slash notation appropriately.', () => {
expect(splitValue('1px/2px 3px 4px 5px')).toEqual([
'1px/2px',
'3px',
'4px',
'5px',
]);
});
});
test('Splits a string of values with slash notation appropriately.', () => {
expect(splitValue('1px/2px 3px 4px 5px')).toEqual([
'1px 2px',
'1px 3px',
'1px 4px',
'1px 5px',
]);
});
});

See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
which mentions:

border-radius: 4px 3px 6px / 2px 4px;

/* It is equivalent to: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

To further explain, a border-radius value can only contain a single / and it separates the "vertical" / "horizontal" border radii.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I misunderstood the usage of / in border-radius. I will review the specification and correct the code accordingly.

@yasuhiro-yamamoto
Copy link
Contributor Author

@nmn I've revised the expansion logic for cases involving '/' and corrected the code. Additionally, I've updated the splitValue function to accept an optional argument, and explicitly handle processing specific to border-radius within the code.

nmn
nmn approved these changes Jan 19, 2025
View reviewed changes
Copy link
Contributor

@nmn nmn left a comment

Choose a reason for hiding this comment

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

LGTM.

@nmn
Copy link
Contributor

nmn commented Jan 19, 2025

Will merge this PR after doing more testing as this code primarily affects internal code.

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

@nmn nmn nmn approved these changes

Assignees
No one assigned
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Detect / within values of a multi-value borderRadius shorthand
3 participants
@yasuhiro-yamamoto @nmn @facebook-github-bot