Skip to content

Commit 9f87934

Browse files
necolasnecolas
committed
Use built-in React Native support for logical CSS
Replace the polyfills with the built-in support for `marginInline`, etc.
1 parent c31eead commit 9f87934

File tree

5 files changed

+59
-99
lines changed

5 files changed

+59
-99
lines changed

‎apps/website/docs/api/02-css/index.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ The following tables represent the compatibility status of the strict CSS API fo
130130
| color | ✅ | ✅ | |
131131
| columnGap | ✅ | ✅ | |
132132
| cursor | ❌ | ✅ Partial | |
133-
| direction | ❌ | ❌ | |
133+
| direction | ✅ | ✅ | |
134134
| display: block | 🟡 Partial | 🟡 Partial | [#2](https://github.com/facebook/react-strict-dom/issues/2) |
135135
| display: contents | ✅ | ✅ | |
136136
| display: flex | ✅ | ✅ | |
@@ -156,13 +156,13 @@ The following tables represent the compatibility status of the strict CSS API fo
156156
| gap | ✅ | ✅ | |
157157
| height | ✅ | ✅ | |
158158
| inlineSize | 🟡 | 🟡 | |
159-
| inset | 🟡 | 🟡 | |
160-
| insetBlock | 🟡 | 🟡 | |
161-
| insetBlockEnd | 🟡 | 🟡 | |
162-
| insetBlockStart | 🟡 | 🟡 | |
163-
| insetInline | 🟡 | 🟡 | |
164-
| insetInlineEnd | 🟡 | 🟡 | |
165-
| insetInlineStart | 🟡 | 🟡 | |
159+
| inset | ✅ | ✅ | |
160+
| insetBlock | ✅ | ✅ | |
161+
| insetBlockEnd | ✅ | ✅ | |
162+
| insetBlockStart | ✅ | ✅ | |
163+
| insetInline | ✅ | ✅ | |
164+
| insetInlineEnd | ✅ | ✅ | |
165+
| insetInlineStart | ✅ | ✅ | |
166166
| isolation | ✅ | ✅ | |
167167
| justifyContent | ✅ | ✅ | |
168168
| justifyItems | ❌ | ❌ | |
@@ -175,13 +175,13 @@ The following tables represent the compatibility status of the strict CSS API fo
175175
| listStylePosition | ❌ | ❌ | |
176176
| listStyleType | ❌ | ❌ | |
177177
| margin | ✅ | ✅ | |
178-
| marginBlock | 🟡 | 🟡 | |
179-
| marginBlockEnd | 🟡 | 🟡 | |
180-
| marginBlockStart | 🟡 | 🟡 | |
178+
| marginBlock | ✅ | ✅ | |
179+
| marginBlockEnd | ✅ | ✅ | |
180+
| marginBlockStart | ✅ | ✅ | |
181181
| marginBottom | ✅ | ✅ | |
182-
| marginInline | 🟡 | 🟡 | |
183-
| marginInlineEnd | 🟡 | 🟡 | |
184-
| marginInlineStart | 🟡 | 🟡 | |
182+
| marginInline | ✅ | ✅ | |
183+
| marginInlineEnd | ✅ | ✅ | |
184+
| marginInlineStart | ✅ | ✅ | |
185185
| marginLeft | ✅ | ✅ | |
186186
| marginRight | ✅ | ✅ | |
187187
| marginTop | ✅ | ✅ | |
@@ -208,13 +208,13 @@ The following tables represent the compatibility status of the strict CSS API fo
208208
| overflowX | ❌ | ❌ | |
209209
| overflowY | ❌ | ❌ | |
210210
| padding | ✅ | ✅ | |
211-
| paddingBlock | 🟡 | 🟡 | |
212-
| paddingBlockEnd | 🟡 | 🟡 | |
213-
| paddingBlockStart | 🟡 | 🟡 | |
211+
| paddingBlock | ✅ | ✅ | |
212+
| paddingBlockEnd | ✅ | ✅ | |
213+
| paddingBlockStart | ✅ | ✅ | |
214214
| paddingBottom | ✅ | ✅ | |
215-
| paddingInline | 🟡 | 🟡 | |
216-
| paddingInlineEnd | 🟡 | 🟡 | |
217-
| paddingInlineStart | 🟡 | 🟡 | |
215+
| paddingInline | ✅ | ✅ | |
216+
| paddingInlineEnd | ✅ | ✅ | |
217+
| paddingInlineStart | ✅ | ✅ | |
218218
| paddingLeft | ✅ | ✅ | |
219219
| paddingRight | ✅ | ✅ | |
220220
| paddingTop | ✅ | ✅ | |

‎packages/react-strict-dom/src/native/css/index.js‎

Lines changed: 0 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -392,63 +392,10 @@ export function props(
392392
nativeProps.cursorColor = styleValue;
393393
}
394394
}
395-
// inset
396-
else if (styleProp === 'inset') {
397-
nextStyle.top ??= styleValue;
398-
nextStyle.start ??= styleValue;
399-
nextStyle.end ??= styleValue;
400-
nextStyle.bottom ??= styleValue;
401-
} else if (styleProp === 'insetBlock') {
402-
nextStyle.top ??= styleValue;
403-
nextStyle.bottom ??= styleValue;
404-
} else if (styleProp === 'insetBlockEnd') {
405-
nextStyle.bottom = flatStyle.bottom ?? styleValue;
406-
} else if (styleProp === 'insetBlockStart') {
407-
nextStyle.top = flatStyle.top ?? styleValue;
408-
} else if (styleProp === 'insetInline') {
409-
nextStyle.end ??= styleValue;
410-
nextStyle.start ??= styleValue;
411-
} else if (styleProp === 'insetInlineEnd') {
412-
nextStyle.end = flatStyle.end ?? styleValue;
413-
} else if (styleProp === 'insetInlineStart') {
414-
nextStyle.start = flatStyle.start ?? styleValue;
415-
}
416395
// lineClamp polyfill
417396
else if (styleProp === 'lineClamp') {
418397
nativeProps.numberOfLines = styleValue;
419398
}
420-
// marginBlock
421-
else if (styleProp === 'marginBlock') {
422-
nextStyle.marginVertical = styleValue;
423-
} else if (styleProp === 'marginBlockStart') {
424-
nextStyle.marginTop ??= styleValue;
425-
} else if (styleProp === 'marginBlockEnd') {
426-
nextStyle.marginBottom ??= styleValue;
427-
}
428-
// marginInline
429-
else if (styleProp === 'marginInline') {
430-
nextStyle.marginHorizontal = styleValue;
431-
} else if (styleProp === 'marginInlineStart') {
432-
nextStyle.marginStart = styleValue;
433-
} else if (styleProp === 'marginInlineEnd') {
434-
nextStyle.marginEnd = styleValue;
435-
}
436-
// paddingBlock
437-
else if (styleProp === 'paddingBlock') {
438-
nextStyle.paddingVertical = styleValue;
439-
} else if (styleProp === 'paddingBlockStart') {
440-
nextStyle.paddingTop ??= styleValue;
441-
} else if (styleProp === 'paddingBlockEnd') {
442-
nextStyle.paddingBottom ??= styleValue;
443-
}
444-
// paddingInline
445-
else if (styleProp === 'paddingInline') {
446-
nextStyle.paddingHorizontal = styleValue;
447-
} else if (styleProp === 'paddingInlineStart') {
448-
nextStyle.paddingStart = styleValue;
449-
} else if (styleProp === 'paddingInlineEnd') {
450-
nextStyle.paddingEnd = styleValue;
451-
}
452399
// '::placeholder' polyfill
453400
else if (styleProp === 'placeholderTextColor') {
454401
nativeProps.placeholderTextColor = styleValue;

‎packages/react-strict-dom/tests/__snapshots__/compat-test.native.js.snap-native‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ exports[`<compat.native> "as" equals "view": as=view 1`] = `
6868
style={
6969
{
7070
"boxSizing": "content-box",
71-
"paddingHorizontal": 32,
71+
"paddingInline": 32,
7272
"position": "static",
7373
}
7474
}
@@ -82,7 +82,7 @@ exports[`<compat.native> default: default 1`] = `
8282
style={
8383
{
8484
"boxSizing": "content-box",
85-
"paddingHorizontal": 32,
85+
"paddingInline": 32,
8686
"position": "static",
8787
}
8888
}

‎packages/react-strict-dom/tests/__snapshots__/css-test.native.js.snap-native‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,14 @@ exports[`properties: general caretColor: unsupported caret color 1`] = `
161161
}
162162
`;
163163

164+
exports[`properties: general direction: inherit 1`] = `
165+
{
166+
"style": {
167+
"direction": "inherit",
168+
},
169+
}
170+
`;
171+
164172
exports[`properties: general direction: ltr 1`] = `
165173
{
166174
"style": {
@@ -1022,10 +1030,7 @@ exports[`properties: logical direction inlineSize: minInlineSize after minWidth
10221030
exports[`properties: logical direction inset: inset 1`] = `
10231031
{
10241032
"style": {
1025-
"bottom": 1,
1026-
"end": 1,
1027-
"start": 1,
1028-
"top": 1,
1033+
"inset": 1,
10291034
},
10301035
}
10311036
`;
@@ -1034,6 +1039,7 @@ exports[`properties: logical direction inset: inset vs top 1`] = `
10341039
{
10351040
"style": {
10361041
"bottom": 100,
1042+
"insetBlockStart": 3,
10371043
"left": 10,
10381044
"right": 10,
10391045
"top": 100,
@@ -1044,8 +1050,7 @@ exports[`properties: logical direction inset: inset vs top 1`] = `
10441050
exports[`properties: logical direction inset: insetBlock 1`] = `
10451051
{
10461052
"style": {
1047-
"bottom": 2,
1048-
"top": 2,
1053+
"insetBlock": 2,
10491054
},
10501055
}
10511056
`;
@@ -1054,6 +1059,7 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = `
10541059
{
10551060
"style": {
10561061
"bottom": 100,
1062+
"insetBlockStart": 3,
10571063
"top": 100,
10581064
},
10591065
}
@@ -1062,7 +1068,7 @@ exports[`properties: logical direction inset: insetBlock vs top 1`] = `
10621068
exports[`properties: logical direction inset: insetBlockEnd 1`] = `
10631069
{
10641070
"style": {
1065-
"bottom": 4,
1071+
"insetBlockEnd": 4,
10661072
},
10671073
}
10681074
`;
@@ -1071,21 +1077,23 @@ exports[`properties: logical direction inset: insetBlockEnd vs bottom 1`] = `
10711077
{
10721078
"style": {
10731079
"bottom": 100,
1080+
"insetBlockEnd": 4,
10741081
},
10751082
}
10761083
`;
10771084

10781085
exports[`properties: logical direction inset: insetBlockStart 1`] = `
10791086
{
10801087
"style": {
1081-
"top": 3,
1088+
"insetBlockStart": 3,
10821089
},
10831090
}
10841091
`;
10851092

10861093
exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
10871094
{
10881095
"style": {
1096+
"insetBlockStart": 3,
10891097
"top": 100,
10901098
},
10911099
}
@@ -1094,120 +1102,119 @@ exports[`properties: logical direction inset: insetBlockStart vs top 1`] = `
10941102
exports[`properties: logical direction inset: insetInline 1`] = `
10951103
{
10961104
"style": {
1097-
"end": 5,
1098-
"start": 5,
1105+
"insetInline": 5,
10991106
},
11001107
}
11011108
`;
11021109

11031110
exports[`properties: logical direction inset: insetInlineEnd 1`] = `
11041111
{
11051112
"style": {
1106-
"end": 7,
1113+
"insetInlineEnd": 7,
11071114
},
11081115
}
11091116
`;
11101117

11111118
exports[`properties: logical direction inset: insetInlineStart 1`] = `
11121119
{
11131120
"style": {
1114-
"start": 6,
1121+
"insetInlineStart": 6,
11151122
},
11161123
}
11171124
`;
11181125

11191126
exports[`properties: logical direction margin: marginBlock 1`] = `
11201127
{
11211128
"style": {
1122-
"marginVertical": 1,
1129+
"marginBlock": 1,
11231130
},
11241131
}
11251132
`;
11261133

11271134
exports[`properties: logical direction margin: marginBlockEnd 1`] = `
11281135
{
11291136
"style": {
1130-
"marginBottom": 3,
1137+
"marginBlockEnd": 3,
11311138
},
11321139
}
11331140
`;
11341141

11351142
exports[`properties: logical direction margin: marginBlockStart 1`] = `
11361143
{
11371144
"style": {
1138-
"marginTop": 2,
1145+
"marginBlockStart": 2,
11391146
},
11401147
}
11411148
`;
11421149

11431150
exports[`properties: logical direction margin: marginInline 1`] = `
11441151
{
11451152
"style": {
1146-
"marginHorizontal": 1,
1153+
"marginInline": 1,
11471154
},
11481155
}
11491156
`;
11501157

11511158
exports[`properties: logical direction margin: marginInlineEnd 1`] = `
11521159
{
11531160
"style": {
1154-
"marginEnd": 3,
1161+
"marginInlineEnd": 3,
11551162
},
11561163
}
11571164
`;
11581165

11591166
exports[`properties: logical direction margin: marginInlineStart 1`] = `
11601167
{
11611168
"style": {
1162-
"marginStart": 2,
1169+
"marginInlineStart": 2,
11631170
},
11641171
}
11651172
`;
11661173

11671174
exports[`properties: logical direction padding: paddingBlock 1`] = `
11681175
{
11691176
"style": {
1170-
"paddingVertical": 1,
1177+
"paddingBlock": 1,
11711178
},
11721179
}
11731180
`;
11741181

11751182
exports[`properties: logical direction padding: paddingBlockEnd 1`] = `
11761183
{
11771184
"style": {
1178-
"paddingBottom": 3,
1185+
"paddingBlockEnd": 3,
11791186
},
11801187
}
11811188
`;
11821189

11831190
exports[`properties: logical direction padding: paddingBlockStart 1`] = `
11841191
{
11851192
"style": {
1186-
"paddingTop": 2,
1193+
"paddingBlockStart": 2,
11871194
},
11881195
}
11891196
`;
11901197

11911198
exports[`properties: logical direction padding: paddingInline 1`] = `
11921199
{
11931200
"style": {
1194-
"paddingHorizontal": 1,
1201+
"paddingInline": 1,
11951202
},
11961203
}
11971204
`;
11981205

11991206
exports[`properties: logical direction padding: paddingInlineEnd 1`] = `
12001207
{
12011208
"style": {
1202-
"paddingEnd": 3,
1209+
"paddingInlineEnd": 3,
12031210
},
12041211
}
12051212
`;
12061213

12071214
exports[`properties: logical direction padding: paddingInlineStart 1`] = `
12081215
{
12091216
"style": {
1210-
"paddingStart": 2,
1217+
"paddingInlineStart": 2,
12111218
},
12121219
}
12131220
`;

‎packages/react-strict-dom/tests/css-test.native.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,13 +241,19 @@ describe('properties: general', () => {
241241

242242
test('direction', () => {
243243
const styles = css.create({
244+
inherit: {
245+
direction: 'inherit'
246+
},
244247
ltr: {
245248
direction: 'ltr'
246249
},
247250
rtl: {
248251
direction: 'rtl'
249252
}
250253
});
254+
expect(css.props.call(mockOptions, styles.inherit)).toMatchSnapshot(
255+
'inherit'
256+
);
251257
expect(css.props.call(mockOptions, styles.ltr)).toMatchSnapshot('ltr');
252258
expect(css.props.call(mockOptions, styles.rtl)).toMatchSnapshot('rtl');
253259
});

0 commit comments

Comments
 (0)