Updated to csstype@3

[rahulsunil2]

Closing Issue #31 Update to csstype@3

• Updated CSS Type to 3.0.10

[ghost]

All CLA requirements met.

[layershifter]

Thank you, that really helps ❤️

---

In meantime I added proper type checking to this repo (#42) and it discovered few problems:

Error: ../core/src/types.ts(59,65): error TS2694: Namespace '"/home/runner/work/griffel/griffel/node_modules/csstype/index"' has no exported member 'AnimationProperty'.

This is a problem indeed, just perform that same change:

// packages/core/src/types.ts
export type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties &
  GriffelStylesCSSPseudos & {
-    animationName?: GriffelAnimation | GriffelAnimation[] | CSS.AnimationProperty;
+    animationName?: GriffelAnimation | GriffelAnimation[] | CSS.Property.AnimationName;

Error: src/types.test.ts(86,5): error TS2578: Unused '@ts-expect-error' directive.
Error: src/types.test.ts(98,9): error TS2578: Unused '@ts-expect-error' directive.
Error: src/types.test.ts(112,9): error TS2578: Unused '@ts-expect-error' directive.
Error: src/types.test.ts(127,11): error TS2578: Unused '@ts-expect-error' directive.

These are in tests, please update all of them in this way:

-// @ts-expect-error "1" is invalid value for "flexShrink"
-flexShrink: '1',
+// @ts-expect-error "1" is invalid value for "overflow"
+overflow: '1',

[layershifter]

I checked these changes in Fluent UI repo and everything builds:

Once comments will be addressed we are good to go 🏍

[rahulsunil2]

I'll fix the issues mentioned in the comments as soon as possible and request a new review.

[rahulsunil2]

@layershifter Sorry, I have no experience writing tests in js but I would love to learn how to. Can you please tell me what I should do and provide me with some reference material? I will work on it at the earliest.

[layershifter]

@layershifter Sorry, I have no experience writing tests in js but I would love to learn how to. Can you please tell me what I should do and provide me with some reference material? I will work on it at the earliest.

@rahulsunil2 in the previous message I meant to update these usages as was suggested:

griffel/packages/core/src/types.test.ts

Lines 86 to 87 in 95b0a74

	// @ts-expect-error "1" is invalid value for "flexShrink"
	assertType({ flexShrink: '1' });

-// @ts-expect-error "1" is invalid value for "flexShrink"
-flexShrink: '1',
+// @ts-expect-error "1" is invalid value for "overflow"
+overflow: '1',

There is no need to write new ones 😃

[rahulsunil2]

I have made the fixes for both types.test.ts and types.ts.

[rahulsunil2]

There is an Expression produces a union type that is too complex to represent. error in generateStyles.ts file.

Can you please confirm, whether this is caused due to my updates?

[rahulsunil2]

Thanks @layershifter, I will go through the solution. 👍

[layershifter]

There is an Expression produces a union type that is too complex to represent. error in generateStyles.ts file.

Can you please confirm, whether this is caused due to my updates?

@rahulsunil2 it's related and not related 😸

• Related because it really breaks 💥 (and it's kinda understandable from TypeScript POV)
• Not related because typings on generateStyles() function were not ideal even before 😅

I pushed a minor refactor in 8432f3f and now CI is passing ✅

[layershifter]

These was a typo before. As type was not exported, we can fix it 😇

[rahulsunil2]

Thanks a lot @layershifter for explaining and letting me contribute to this awesome repo! I hope I could contribute more. Before I really need to understand a lot more about TS. 😄