@samitouri / QOS-React-2 / commits / 3f0b9e61c4

Update CSS shorthand property list (#35636)

Kid committed Mar 17, 2026 at 21:54 UTC 3f0b9e61c467cd6e09cac6fb69f6e8f68cd3c5d7
1 file changed +72 -2
packages/react-dom-bindings/src/client/CSSShorthandProperty.js
+72 -2
@@ -5,8 +5,8 @@
5 * LICENSE file in the root directory of this source tree.
6 */
7
8 -// List derived from Gecko source code:
9 -// https://github.com/mozilla/gecko-dev/blob/4e638efc71/layout/style/test/property_database.js
8 +// List derived from Firefox source code:
9 +// https://github.com/mozilla-firefox/firefox/blob/58f365ba0eb5761a182f1925e4654cc75212b8ac/layout/style/test/property_database.js
10 export const shorthandToLonghand = {
11 animation: [
12 'animationDelay',
@@ -49,6 +49,15 @@ export const shorthandToLonghand = {
49 'borderTopStyle',
50 'borderTopWidth',
51 ],
52 + borderBlock: [
53 + 'borderBlockEndColor',
54 + 'borderBlockEndStyle',
55 + 'borderBlockEndWidth',
56 + 'borderBlockStartColor',
57 + 'borderBlockStartStyle',
58 + 'borderBlockStartWidth',
59 + ],
60 + borderBlockColor: ['borderBlockEndColor', 'borderBlockStartColor'],
61 borderBlockEnd: [
62 'borderBlockEndColor',
63 'borderBlockEndStyle',
@@ -59,6 +68,8 @@ export const shorthandToLonghand = {
68 'borderBlockStartStyle',
69 'borderBlockStartWidth',
70 ],
71 + borderBlockStyle: ['borderBlockEndStyle', 'borderBlockStartStyle'],
72 + borderBlockWidth: ['borderBlockEndWidth', 'borderBlockStartWidth'],
73 borderBottom: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth'],
74 borderColor: [
75 'borderBottomColor',
@@ -73,6 +84,15 @@ export const shorthandToLonghand = {
84 'borderImageSource',
85 'borderImageWidth',
86 ],
87 + borderInline: [
88 + 'borderInlineEndColor',
89 + 'borderInlineEndStyle',
90 + 'borderInlineEndWidth',
91 + 'borderInlineStartColor',
92 + 'borderInlineStartStyle',
93 + 'borderInlineStartWidth',
94 + ],
95 + borderInlineColor: ['borderInlineEndColor', 'borderInlineStartColor'],
96 borderInlineEnd: [
97 'borderInlineEndColor',
98 'borderInlineEndStyle',
@@ -83,6 +103,8 @@ export const shorthandToLonghand = {
103 'borderInlineStartStyle',
104 'borderInlineStartWidth',
105 ],
106 + borderInlineStyle: ['borderInlineEndStyle', 'borderInlineStartStyle'],
107 + borderInlineWidth: ['borderInlineEndWidth', 'borderInlineStartWidth'],
108 borderLeft: ['borderLeftColor', 'borderLeftStyle', 'borderLeftWidth'],
109 borderRadius: [
110 'borderBottomLeftRadius',
@@ -104,8 +126,11 @@ export const shorthandToLonghand = {
126 'borderRightWidth',
127 'borderTopWidth',
128 ],
129 + colorAdjust: ['printColorAdjust'],
130 columnRule: ['columnRuleColor', 'columnRuleStyle', 'columnRuleWidth'],
131 columns: ['columnCount', 'columnWidth'],
132 + containIntrinsicSize: ['containIntrinsicHeight', 'containIntrinsicWidth'],
133 + container: ['containerName', 'containerType'],
134 flex: ['flexBasis', 'flexGrow', 'flexShrink'],
135 flexFlow: ['flexDirection', 'flexWrap'],
136 font: [
@@ -127,6 +152,12 @@ export const shorthandToLonghand = {
152 'fontWeight',
153 'lineHeight',
154 ],
155 + fontSynthesis: [
156 + 'fontSynthesisPosition',
157 + 'fontSynthesisSmallCaps',
158 + 'fontSynthesisStyle',
159 + 'fontSynthesisWeight',
160 + ],
161 fontVariant: [
162 'fontVariantAlternates',
163 'fontVariantCaps',
@@ -155,8 +186,13 @@ export const shorthandToLonghand = {
186 'gridTemplateColumns',
187 'gridTemplateRows',
188 ],
189 + inset: ['bottom', 'left', 'right', 'top'],
190 + insetBlock: ['insetBlockEnd', 'insetBlockStart'],
191 + insetInline: ['insetInlineEnd', 'insetInlineStart'],
192 listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
193 margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
194 + marginBlock: ['marginBlockEnd', 'marginBlockStart'],
195 + marginInline: ['marginInlineEnd', 'marginInlineStart'],
196 marker: ['markerEnd', 'markerMid', 'markerStart'],
197 mask: [
198 'maskClip',
@@ -170,23 +206,57 @@ export const shorthandToLonghand = {
206 'maskSize',
207 ],
208 maskPosition: ['maskPositionX', 'maskPositionY'],
209 + offset: [
210 + 'offsetAnchor',
211 + 'offsetDistance',
212 + 'offsetPath',
213 + 'offsetPosition',
214 + 'offsetRotate',
215 + ],
216 outline: ['outlineColor', 'outlineStyle', 'outlineWidth'],
217 overflow: ['overflowX', 'overflowY'],
218 + overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
219 padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
220 + paddingBlock: ['paddingBlockEnd', 'paddingBlockStart'],
221 + paddingInline: ['paddingInlineEnd', 'paddingInlineStart'],
222 + pageBreakAfter: ['breakAfter'],
223 + pageBreakBefore: ['breakBefore'],
224 + pageBreakInside: ['breakInside'],
225 placeContent: ['alignContent', 'justifyContent'],
226 placeItems: ['alignItems', 'justifyItems'],
227 placeSelf: ['alignSelf', 'justifySelf'],
228 + scrollMargin: [
229 + 'scrollMarginBottom',
230 + 'scrollMarginLeft',
231 + 'scrollMarginRight',
232 + 'scrollMarginTop',
233 + ],
234 + scrollMarginBlock: ['scrollMarginBlockEnd', 'scrollMarginBlockStart'],
235 + scrollMarginInline: ['scrollMarginInlineEnd', 'scrollMarginInlineStart'],
236 + scrollPadding: [
237 + 'scrollPaddingBottom',
238 + 'scrollPaddingLeft',
239 + 'scrollPaddingRight',
240 + 'scrollPaddingTop',
241 + ],
242 + scrollPaddingBlock: ['scrollPaddingBlockEnd', 'scrollPaddingBlockStart'],
243 + scrollPaddingInline: ['scrollPaddingInlineEnd', 'scrollPaddingInlineStart'],
244 textDecoration: [
245 'textDecorationColor',
246 'textDecorationLine',
247 'textDecorationStyle',
248 + 'textDecorationThickness',
249 ],
250 textEmphasis: ['textEmphasisColor', 'textEmphasisStyle'],
251 + textWrap: ['textWrapMode', 'textWrapStyle'],
252 transition: [
253 + 'transitionBehavior',
254 'transitionDelay',
255 'transitionDuration',
256 'transitionProperty',
257 'transitionTimingFunction',
258 ],
259 + verticalAlign: ['alignmentBaseline', 'baselineShift', 'baselineSource'],
260 + whiteSpace: ['textWrapMode', 'whiteSpaceCollapse'],
261 wordWrap: ['overflowWrap'],
262 };