Fix globalCss types to support multiple arguments (#1012)

* Fix globalCss types to support multiple arguments * Add endline * Remove unaccessible types * Fix indentation
stitchesjs · May 2, 2022 · 4938d6d · 4938d6d
1 parent 397222f
commit 4938d6d
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 56 deletions.
diff --git a/packages/core/tests/types.test.ts b/packages/core/tests/types.test.ts
@@ -1,4 +1,4 @@
-import { createStitches } from '../types/index'
+import { createStitches, FontFace } from '../types/index'
 
 const { css, globalCss, keyframes } = createStitches({
 	utils: {
@@ -148,3 +148,77 @@ PotatoButton({
 		}
 	},
 })
+
+/* -------------------------------------------------------------------------------------------------
+ * Issue #1010
+ * -----------------------------------------------------------------------------------------------*/
+const fontFaceArray: FontFace[] = [
+	{
+		fontFamily: "Inter",
+		src: `url(file.woff2) format("woff2")`,
+		fontDisplay: "swap"
+	  }
+];
+const styles = {
+	"@font-face": fontFaceArray,
+	body: {
+	  // Falbacking to a serif font so it's easier to see that the swap is hapenning
+	  fontFamily: "Inter, serif"
+	}
+  };
+void function Test() {
+	globalCss(styles)
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Issue #842
+ * -----------------------------------------------------------------------------------------------*/
+void function Test() {
+	globalCss(
+		{
+			"@font-face": [
+				{
+					fontFamily: "Roboto",
+					fontStyle: "normal",
+					fontWeight: "100",
+					src: "url('/Roboto-Thin.ttf') format('truetype')"
+				}
+			]
+		}, {
+			body: {
+				color: "red"
+			}
+		}, {
+			"@property thing": {
+				inherits: true,
+				syntax: "$plue"
+			}
+		}, {
+			"@keyframes fancy-frame": {
+				something: {
+					color: "$red"
+				}
+			}
+		}
+	)
+
+
+	globalCss(
+		{
+			body: {
+				color: "red"
+			}
+		}, {
+			"@property thing": {
+				inherits: true,
+				syntax: "$plue"
+			}
+		}, {
+			"@keyframes fancy-frame": {
+				something: {
+					color: "$red"
+				}
+			}
+		}
+	)
+}
diff --git a/packages/core/types/stitches.d.ts b/packages/core/types/stitches.d.ts
@@ -21,37 +21,30 @@ export default interface Stitches<
 		themeMap: ThemeMap
 		utils: Utils
 	},
-	prefix: Prefix
 	/** The **prefix** property defined.
 	 *
 	 * [Read Documentation](https://stitches.dev/docs/variants)
 	 */
+	prefix: Prefix,
 	globalCss: {
-		<Styles extends { [K: string]: any }>(
-			...styles: (
-				{
-					/** The **@import** CSS at-rule imports style rules from other style sheets. */
-					'@import'?: unknown
+		<Styles extends ({ [K: string]: any })[], CSS = CSSUtil.CSS<Media, Theme, ThemeMap, Utils>>(
+			...styles: {
+				[K in keyof Styles]:
+					CSS
+					& {
+						/** The **@import** CSS at-rule imports style rules from other style sheets. */
+						'@import'?: string | string[]
 
-					/** The **@font-face** CSS at-rule specifies a custom font with which to display text. */
-					'@font-face'?: unknown
-				}
-				& {
-					[K in keyof Styles]: (
-						K extends '@import'
-							? string | string[]
-						: K extends '@font-face'
-							? CSSUtil.Native.AtRule.FontFace | Array<CSSUtil.Native.AtRule.FontFace>
-						: K extends `@keyframes ${string}`
-							? {
-								[KeyFrame in string]: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>
-							}
-						: K extends `@property ${string}`
-							? CSSUtil.Native.AtRule.Property
-						: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>
-					)
-				}
-			)[]
+						/** The **@font-face** CSS at-rule specifies a custom font with which to display text. */
+						'@font-face'?: CSSUtil.Native.AtRule.FontFace | Array<CSSUtil.Native.AtRule.FontFace>
+					} & {
+						[KA in `@property ${string}`]: CSSUtil.Native.AtRule.Property
+					} & {
+						[KS in `@keyframes ${string}`]: {
+							[KeyFrame in string]: CSS
+						}
+					}
+			}
 		): {
 			(): string
 		}

diff --git a/packages/react/tests/types.test.tsx b/packages/react/tests/types.test.tsx
@@ -203,3 +203,56 @@ const styles = {
 void function Test() {
 	globalCss(styles)
 }
+
+/* -------------------------------------------------------------------------------------------------
+ * Issue #842
+ * -----------------------------------------------------------------------------------------------*/
+void function Test() {
+	globalCss(
+		{
+			"@font-face": [
+				{
+					fontFamily: "Roboto",
+					fontStyle: "normal",
+					fontWeight: "100",
+					src: "url('/Roboto-Thin.ttf') format('truetype')"
+				}
+			]
+		}, {
+			body: {
+				color: "red"
+			}
+		}, {
+			"@property thing": {
+				inherits: true,
+				syntax: "$plue"
+			}
+		}, {
+			"@keyframes fancy-frame": {
+				something: {
+					color: "$red"
+				}
+			}
+		}
+	)
+
+
+	globalCss(
+		{
+			body: {
+				color: "red"
+			}
+		}, {
+			"@property thing": {
+				inherits: true,
+				syntax: "$plue"
+			}
+		}, {
+			"@keyframes fancy-frame": {
+				something: {
+					color: "$red"
+				}
+			}
+		}
+	)
+}
diff --git a/packages/react/types/stitches.d.ts b/packages/react/types/stitches.d.ts
@@ -21,41 +21,34 @@ export default interface Stitches<
 		themeMap: ThemeMap
 		utils: Utils
 	},
-	prefix: Prefix
 	/** The **prefix** property defined.
 	 *
 	 * [Read Documentation](https://stitches.dev/docs/variants)
 	 */
-	globalCss: {
-		<Styles extends { [K: string]: any }>(
-			...styles: (
-				{
-					/** The **@import** CSS at-rule imports style rules from other style sheets. */
-					'@import'?: unknown
+	 prefix: Prefix,
+	 globalCss: {
+		<Styles extends ({ [K: string]: any })[], CSS = CSSUtil.CSS<Media, Theme, ThemeMap, Utils>>(
+			...styles: {
+				[K in keyof Styles]:
+					CSS
+					& {
+						/** The **@import** CSS at-rule imports style rules from other style sheets. */
+						'@import'?: string | string[]
 
-					/** The **@font-face** CSS at-rule specifies a custom font with which to display text. */
-					'@font-face'?: unknown
-				}
-				& {
-					[K in keyof Styles]: (
-						K extends '@import'
-							? string | string[]
-						: K extends '@font-face'
-							? CSSUtil.Native.AtRule.FontFace | Array<CSSUtil.Native.AtRule.FontFace>
-						: K extends `@keyframes ${string}`
-							? {
-								[KeyFrame in string]: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>
-							}
-						: K extends `@property ${string}`
-							? CSSUtil.Native.AtRule.Property
-						: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>
-					)
-				}
-			)[]
-		): {
-			(): string
-		}
-	},
+						/** The **@font-face** CSS at-rule specifies a custom font with which to display text. */
+						'@font-face'?: CSSUtil.Native.AtRule.FontFace | Array<CSSUtil.Native.AtRule.FontFace>
+					} & {
+						[KA in `@property ${string}`]: CSSUtil.Native.AtRule.Property
+					} & {
+						[KS in `@keyframes ${string}`]: {
+							[KeyFrame in string]: CSS
+						}
+					}
+			}
+		 ): {
+			 (): string
+		 }
+	 },
 	keyframes: {
 		(style: {
 			[offset: string]: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>