microsoft / griffel

CSS-in-JS with ahead-of-time compilation ⚡️
https://griffel.js.org
MIT License
1.2k stars 61 forks source link

`csstype` bump to 3.1.3 causing BREAKING CHANGEs on type-level #510

Closed Hotell closed 8 months ago

Hotell commented 8 months ago

While bumping griffel build dependencies within fluent core, I run into unexpected type errors.

I was able to troubleshoot it deeper and I can confirm that the culprit of this issue is csstype package bump from 3.1.2 to 3.1.3 which happened in @griffel/core@1.15.2 ( and related packages to that release ).

Also other folks run into this issue: https://github.com/frenic/csstype/issues/189

I dont have context if that package minor bump is required, but if not I'd recommend to revert to 3.1.2 until the package authors will release a fixed version.

Reproduction:

Repro:

checkout: https://github.com/microsoft/fluentui/pull/30694

yarn workspace @fluentui/react-positioning type-check

src/createArrowStyles.ts:93:34 - error TS2769: No overload matches this call.
  Overload 1 of 6, '(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderBottomStyle', gave the following error.
    Argument of type 'BorderBottomWidth<GriffelStylesCSSValue> | readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is not assignable to parameter of type 'BorderWidthInput'.
      Type 'readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is not assignable to type 'BorderWidthInput'.
        The type 'readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is 'readonly' and cannot be assigned to the mutable type 'BorderWidth<GriffelStylesCSSValue>[]'.
  Overload 2 of 6, '(style: BorderStyleInput, width: BorderWidthInput, color: BorderColorInput): BorderBottomStyle', gave the following error.
    Argument of type 'BorderBottomWidth<GriffelStylesCSSValue> | readonly BorderBottomWidth<GriffelStylesCSSValue>[]' is not assignable to parameter of type 'BorderStyleInput'.
      Type '0' is not assignable to type 'BorderStyleInput'.

93       ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
                                    ~~~~~~~~~~~