fix: Enable styling compat mode to ensure proper style merging (#2890)

Enable compat mode all the time to ensure correct style merging regardless of environment. For more information, reference our [discussion](#2893)

[category:Infrastructure]

Release Note:
We're seeing style merging issues when using createStyles or createStencil. It only happens when every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element. These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order. In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable full static mode (for better performance) once we know why this is happening and have a proper workaround.

For more information, please read our [discussion](#2893)

Co-authored-by: manuel.carrera <manuel.carrera@workday.com>

modules/react/layout/spec/mergeStyles.spec.tsx

@@ -41,8 +41,8 @@ describe('mergeStyles', () => {
 
     expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute});
   });
-
-  it('should allow the cs prop to override base styles', () => {
+  // Skipping this for now while we enable compat mode to run all the time
+  it.skip('should allow the cs prop to override base styles', () => {
     const overrideStyles = createStyles({
       padding: padding.createStyles,
     });

modules/styling/lib/cs.ts

@@ -694,8 +694,13 @@ export function handleCsProp<
   const {cs, style, className, ...restProps} = elemProps;
   const instance = getInstance();
 
-  // We are going to track if any runtime styles are detected
-  let shouldRuntimeMergeStyles = false;
+  // We're seeing style merging issues when using createStyles or createStencil. It only happens when
+  // every style override of the element uses these utilities and @emotion/react or @emotion/styled is not used on the same element.
+  // These utilities rely on module execution order and we're having a few reports where modules are possibly executing out of order.
+  // In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going
+  // to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable
+  // full static mode (for better performance) once we know why this is happening and have a proper workaround.
+  let shouldRuntimeMergeStyles = true;
 
   // The order is intentional. The `className` should go first, then the `cs` prop. If we don't do
   // runtime merging, this order doesn't actually matter because the browser doesn't care the order
@@ -891,7 +896,7 @@ function combineClassNames(input: (string | undefined)[]): string {
     .filter((s, i, a) => onlyDefined(s) && onlyUnique(s, i, a))
     .join(' ');
 }
-  
+
 /**
  * Creates a reuseable Stencil for styling elements. It takes vars, base styles, modifiers, and
  * compound modifiers.

modules/styling/spec/cs.spec.tsx

@@ -862,7 +862,9 @@ describe('handleCsProp', () => {
     expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute});
   });
 
-  it('should allow the cs prop to override base styles', () => {
+  // While we have compat mode enabled, we'll skip these tests. The class generated comes from emotion and
+  //we have no way of validating the correct class.
+  it.skip('should allow the cs prop to override base styles', () => {
     const overrideStyles = createStyles({
       padding: padding.createStyles,
     });