styled-components: add performance test for large unions (#58176)

* styled-components: add performance test for large unions

* Make the test agnostic of FC/VFC difference

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

types/styled-components/test/index.tsx

@@ -1243,3 +1243,25 @@ function unionTest2() {
     <C />; // $ExpectError
     <C foo={123} bar="foobar" />; // $ExpectError
 }
+
+function unionPerformanceTest() {
+    type ManyUnion = ({ signal1: 'green'; greenTime1?: number } | { signal1: 'red'; redTime1: number }) &
+        ({ signal2?: 'green'; greenTime2?: number } | { signal2: 'red'; redTime2: number }) &
+        ({ signal3?: 'green'; greenTime3?: number } | { signal3: 'red'; redTime3: number }) &
+        ({ signal4?: 'green'; greenTime4?: number } | { signal4: 'red'; redTime4: number }) &
+        ({ signal5?: 'green'; greenTime5?: number } | { signal5: 'red'; redTime5: number });
+
+    const C = (props: ManyUnion) => null;
+
+    const Styled = styled(C)<{ defaultColor?: string }>`
+        .signal1 {
+            color: ${props => props.signal1 || 'green'};
+        }
+    `;
+
+    <Styled signal1="green" greenTime1={100} />;
+    <Styled signal1="red" redTime1={200} />;
+    <Styled signal1="red" greenTime1={100} />; // $ExpectError
+    <Styled signal1="green" greenTime1={100} signal2="green" greenTime2={100} />;
+    <Styled signal1="green" greenTime1={100} signal2="red" greenTime2={100} />; // $ExpectError
+}