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, });