fluentui icon indicating copy to clipboard operation
fluentui copied to clipboard

[Bug]: The latest version of `@fluentui/merge-styles` package is breaking.

Open dotnetjunky opened this issue 1 year ago • 3 comments

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22631
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 78.44 GB / 127.71 GB
  Browsers:
    Edge: Chromium (125.0.2535.92)
    Internet Explorer: 11.0.22621.3527

Are you reporting Accessibility issue?

None

Reproduction

https://codepen.io/dotnetjunky/pen/QWRQYxG

Bug Description

We've bumping the @fluentui packages in our repo to the latest version and discovered that the latest version of @fluentui/merge-styles, v8.6.10, contains a breaking change.

Specifically, we're calling the concatStyleSetsWithProps() function, which used to return a DeepPartial<TStyleSet> object. With the latest version, it returns a new object DeepPartialV2 instead. As a result, the returned style set object that we use to assign to the DefaultButton.styles is no longer building.

When I tried to downgrade merge-styles to v8.6.9, our code built fine.

This is the commit #31703 that contains the breaking change. @Hotell

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • [X] The provided reproduction is a minimal reproducible example of the bug.

dotnetjunky avatar Jun 19 '24 17:06 dotnetjunky

Confirmed with the partner that they are not blocked.

miroslavstastny avatar Jun 19 '24 21:06 miroslavstastny

the previous DeepPartial was actually incorrect and also introduced infinite type recursions in other big repos. the change we did is a fix, based on your type gymnastics you might run into some issues but if you do they probably exposed hidden bugs within your code.

@dotnetjunky can you please share:

  • proper reproduction showcasing the type issues assignment ( using stackblitz ideally https://stackblitz.com/edit/vitejs-vite-cb7rld?file=index.html&terminal=dev )?
  • typescript version
  • typescript configuration

ty

Hotell avatar Jun 25 '24 16:06 Hotell

@dotnetjunky can you also try out following to verify the issue:

tweak your node_modules:

  1. open `@fluentui/merge-styles/lib/DeepPartial.d.ts
  2. do following change:
export type DeepPartialV2<T> = T extends Function
- ? T
+ ? {}
  : T extends Array<infer U>
  ? IDeepPartialArray<U>
  : T extends object
  ? DeepPartialObject<T>
  : T;
  1. run you type check command

Hotell avatar Jun 28 '24 09:06 Hotell

@dotnetjunky

ping to provide repro and verify https://github.com/microsoft/fluentui/issues/31769#issuecomment-2196535284

Hotell avatar Jul 22 '24 09:07 Hotell

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!