Skip to content

Commit 455614f

Browse files
authored
Revert "fix: Properly parse multi-value shorthand with slash (#859)" (#880)
This reverts commit fbf792c.
1 parent fbf792c commit 455614f

File tree

3 files changed

+4
-90
lines changed

3 files changed

+4
-90
lines changed

packages/shared/__tests__/split-value-test.js

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -44,28 +44,4 @@ describe('Ensure CSS values are split correctly', () => {
4444
splitValue('calc((100% - 50px) * 0.5) var(--rightpadding, 20px)'),
4545
).toEqual(['calc((100% - 50px) * 0.5)', 'var(--rightpadding,20px)']);
4646
});
47-
48-
test('Expands a string of values with slash notation appropriately.', () => {
49-
expect(splitValue('1px / 2px 3px 4px 5px', 'borderRadius')).toEqual([
50-
'1px 2px',
51-
'1px 3px',
52-
'1px 4px',
53-
'1px 5px',
54-
]);
55-
expect(splitValue('1px 2px / 3px 4px', 'borderRadius')).toEqual([
56-
'1px 3px',
57-
'2px 4px',
58-
'1px 3px',
59-
'2px 4px',
60-
]);
61-
expect(splitValue('1px 2px / 3px 4px 5px', 'borderRadius')).toEqual([
62-
'1px 3px',
63-
'2px 4px',
64-
'1px 5px',
65-
'2px 4px',
66-
]);
67-
expect(
68-
splitValue('1px 2px 3px 4px / 5px 6px 7px 8px', 'borderRadius'),
69-
).toEqual(['1px 5px', '2px 6px', '3px 7px', '4px 8px']);
70-
});
7147
});

packages/shared/src/preprocess-rules/legacy-expand-shorthands.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -162,10 +162,7 @@ const shorthands: $ReadOnly<{ [key: string]: (TStyleValue) => TReturn }> = {
162162
],
163163

164164
borderRadius: (rawValue: TStyleValue): TReturn => {
165-
const [top, right = top, bottom = top, left = right] = splitValue(
166-
rawValue,
167-
'borderRadius',
168-
);
165+
const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
169166

170167
return [
171168
['borderTopStartRadius', top],

packages/shared/src/utils/split-css-value.js

Lines changed: 3 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -23,49 +23,9 @@ function printNode(node: PostCSSValueASTNode): string {
2323
}
2424
}
2525

26-
// Splits PostCSS value nodes for border-radius into horizontal and vertical groups by slash.
27-
function splitNodesBySlash(
28-
nodes: PostCSSValueASTNode[],
29-
): PostCSSValueASTNode[][] {
30-
const result = [];
31-
let current = [];
32-
33-
for (const node of nodes) {
34-
const isSeparator = node.type === 'div' && node.value === '/';
35-
if (isSeparator) {
36-
if (current.length > 0) {
37-
result.push(current);
38-
current = [];
39-
}
40-
} else {
41-
current.push(node);
42-
}
43-
}
44-
45-
if (current.length > 0) {
46-
result.push(current);
47-
}
48-
49-
return result;
50-
}
51-
52-
// Expands a border-radius shorthand value to an array of four values.
53-
function expandBorderRadiusShorthand(group: PostCSSValueASTNode[]) {
54-
if (group.length === 2) return [group[0], group[1], group[0], group[1]];
55-
if (group.length === 3) return [group[0], group[1], group[2], group[1]];
56-
if (group.length === 4) return [group[0], group[1], group[2], group[3]];
57-
return Array(4).fill(group[0]);
58-
}
59-
60-
// Combines two arrays of border-radius values into a single formatted string.
61-
function combineBorderRadiusValues(verticals: string[], horizontals: string[]) {
62-
return verticals.map((value, i) => `${value} ${horizontals[i]}`);
63-
}
64-
6526
// Using split(' ') Isn't enough because of values like calc.
6627
export default function splitValue(
6728
str: TStyleValue,
68-
propertyName: string = '',
6929
): $ReadOnlyArray<number | string | null> {
7030
if (str == null || typeof str === 'number') {
7131
return [str];
@@ -78,28 +38,9 @@ export default function splitValue(
7838

7939
const parsed = parser(str.trim());
8040

81-
let nodes: string[] = [];
82-
if (propertyName === 'borderRadius') {
83-
const groups = splitNodesBySlash(
84-
parsed.nodes.filter((node) => node.type !== 'space'),
85-
);
86-
if (groups.length === 1) {
87-
nodes = parsed.nodes.filter((node) => node.type !== 'div').map(printNode);
88-
} else {
89-
// edge case
90-
const vertical = expandBorderRadiusShorthand(
91-
groups[0].filter((node) => node.type !== 'div'),
92-
).map(printNode);
93-
const horizontal = expandBorderRadiusShorthand(
94-
groups[1].filter((node) => node.type !== 'div'),
95-
).map(printNode);
96-
nodes = combineBorderRadiusValues(vertical, horizontal);
97-
}
98-
} else {
99-
nodes = parsed.nodes
100-
.filter((node) => node.type !== 'space' && node.type !== 'div')
101-
.map(printNode);
102-
}
41+
const nodes = parsed.nodes
42+
.filter((node) => node.type !== 'space' && node.type !== 'div')
43+
.map(printNode);
10344

10445
if (
10546
nodes.length > 1 &&

0 commit comments

Comments
 (0)