[fix] Default value for alignContent style property

necolas · Dec 26, 2024 · d256a9f · d256a9f
1 parent a5ba27c
commit d256a9f
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 162 deletions.
diff --git a/packages/benchmarks/src/implementations/styleq/View.js b/packages/benchmarks/src/implementations/styleq/View.js
@@ -11,7 +11,7 @@ function View(props) {
 const styles = {
   root: {
     $$css: true,
-    'css-175oi2r': 'css-175oi2r'
+    'css-g5y9jx': 'css-g5y9jx'
   }
 };
 

diff --git a/...react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/...react-native-web/src/exports/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap
@@ -5,11 +5,11 @@ exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`]
   aria-label="accessibility label"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -42,11 +42,11 @@ exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is se
   aria-live="polite"
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -78,11 +78,11 @@ exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
   >
     <svg
       height="100%"
@@ -114,11 +114,11 @@ exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -175,13 +175,13 @@ exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   data-one="one"
   data-two="two"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -213,11 +213,11 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
   >
     <svg
       height="100%"
@@ -249,11 +249,11 @@ exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
   >
     <svg
       height="100%"
@@ -285,12 +285,12 @@ exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   id="123"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -322,11 +322,11 @@ exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -358,11 +358,11 @@ exports[`components/ActivityIndicator prop "size" is a number 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
     style="height: 30px; width: 30px;"
   >
     <svg
@@ -395,12 +395,12 @@ exports[`components/ActivityIndicator prop "style" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   role="progressbar"
   style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"
@@ -432,12 +432,12 @@ exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
 <div
   aria-valuemax="1"
   aria-valuemin="0"
-  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  class="css-view-g5y9jx r-alignItems-1awozwy r-justifyContent-1777fci"
   data-testid="123"
   role="progressbar"
 >
   <div
-    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
+    class="css-view-g5y9jx r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-1yef0xd r-animationTimingFunction-1ldzwu0"
   >
     <svg
       height="100%"

diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/AppRegistry/__tests__/__snapshots__/index-test.js.snap
@@ -8,7 +8,7 @@ exports[`AppRegistry runApplication styles roots in different documents 1`] = `
   "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
   "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
   "[stylesheet-group="1"] {}",
-  ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+  ".css-view-g5y9jx {align-content: flex-start; align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
   "[stylesheet-group="2"] {}",
   ".r-display-xoduu5 {display: inline-flex;}",
   ".r-flex-13awgt0 {flex: 1;}",
@@ -35,7 +35,7 @@ exports[`AppRegistry runApplication styles roots in different documents 2`] = `
   "html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);}",
   "input::-webkit-search-cancel-button,input::-webkit-search-decoration,input::-webkit-search-results-button,input::-webkit-search-results-decoration {display: none;}",
   "[stylesheet-group="1"] {}",
-  ".css-view-175oi2r {align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
+  ".css-view-g5y9jx {align-content: flex-start; align-items: stretch; background-color: rgba(0,0,0,0.00); border: 0 solid black; box-sizing: border-box; display: flex; flex-basis: auto; flex-direction: column; flex-shrink: 0; list-style: none; margin: 0px; min-height: 0px; min-width: 0px; padding: 0px; position: relative; text-decoration: none; z-index: 0;}",
   "[stylesheet-group="2"] {}",
   ".r-display-xoduu5 {display: inline-flex;}",
   ".r-flex-13awgt0 {flex: 1;}",

diff --git a/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js b/packages/react-native-web/src/exports/AppRegistry/__tests__/index-test.node.js
@@ -47,7 +47,7 @@ describe('AppRegistry', () => {
         [stylesheet-group="1"]{}
         .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
-        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        .css-view-g5y9jx{align-content:flex-start;align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
         [stylesheet-group="2"]{}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
@@ -104,7 +104,7 @@ describe('AppRegistry', () => {
         [stylesheet-group="1"]{}
         .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
-        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        .css-view-g5y9jx{align-content:flex-start;align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
         [stylesheet-group="2"]{}
         .r-display-krxsd3{display:-webkit-box;}
         .r-display-xoduu5{display:inline-flex;}
@@ -152,7 +152,7 @@ describe('AppRegistry', () => {
         [stylesheet-group="1"]{}
         .css-text-146c3p1{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:rgba(0,0,0,1.00);display:inline;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;list-style:none;margin:0px;padding:0px;position:relative;text-align:start;text-decoration:none;white-space:pre-wrap;word-wrap:break-word;}
         .css-textHasAncestor-1jxf684{background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;color:inherit;display:inline;font:inherit;list-style:none;margin:0px;padding:0px;position:relative;text-align:inherit;text-decoration:none;white-space:inherit;word-wrap:break-word;}
-        .css-view-175oi2r{align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
+        .css-view-g5y9jx{align-content:flex-start;align-items:stretch;background-color:rgba(0,0,0,0.00);border:0 solid black;box-sizing:border-box;display:flex;flex-basis:auto;flex-direction:column;flex-shrink:0;list-style:none;margin:0px;min-height:0px;min-width:0px;padding:0px;position:relative;text-decoration:none;z-index:0;}
         [stylesheet-group="2"]{}
         .r-borderWidth-1bee2fs{border-bottom-width:1234px;border-left-width:1234px;border-right-width:1234px;border-top-width:1234px;}
         .r-display-krxsd3{display:-webkit-box;}