From f3a791b1285afd2e5b523b9e4ac6104c10dace0c Mon Sep 17 00:00:00 2001
From: Manuel Carrera <mannycarrera4@users.noreply.github.com>
Date: Tue, 27 Aug 2024 09:25:11 -0600
Subject: [PATCH] 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](https://github.com/Workday/canvas-kit/discussions/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](https://github.com/Workday/canvas-kit/discussions/2893)

Co-authored-by: manuel.carrera <manuel.carrera@workday.com>
---
 modules/react/layout/spec/mergeStyles.spec.tsx |  4 ++--
 modules/styling/lib/cs.ts                      | 11 ++++++++---
 modules/styling/spec/cs.spec.tsx               |  4 +++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/modules/react/layout/spec/mergeStyles.spec.tsx b/modules/react/layout/spec/mergeStyles.spec.tsx
index 7cadbf4da7..d24392ebbe 100644
--- a/modules/react/layout/spec/mergeStyles.spec.tsx
+++ b/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,
     });
diff --git a/modules/styling/lib/cs.ts b/modules/styling/lib/cs.ts
index 350cdf3f46..ff80877b7b 100644
--- a/modules/styling/lib/cs.ts
+++ b/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.
diff --git a/modules/styling/spec/cs.spec.tsx b/modules/styling/spec/cs.spec.tsx
index 5f5cab85fa..e7d4f419fb 100644
--- a/modules/styling/spec/cs.spec.tsx
+++ b/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,
     });