Revert "Fix globalCss types to support multiple arguments (#1012)" (#…

…1017) This reverts commit 4938d6d.
stitchesjs · May 2, 2022 · 74c3b96 · 74c3b96
1 parent 4938d6d
commit 74c3b96
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 169 deletions.
diff --git a/packages/core/tests/types.test.ts b/packages/core/tests/types.test.ts
@@ -1,4 +1,4 @@
-import { createStitches, FontFace } from '../types/index'
+import { createStitches } from '../types/index'
 
 const { css, globalCss, keyframes } = createStitches({
 	utils: {
@@ -148,77 +148,3 @@ 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,30 +21,37 @@ 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 })[], 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[]
+		<Styles extends { [K: string]: any }>(
+			...styles: (
+				{
+					/** The **@import** CSS at-rule imports style rules from other style sheets. */
+					'@import'?: unknown
 
-						/** 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
-						}
-					}
-			}
+					/** 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
 		}

diff --git a/packages/react/tests/types.test.tsx b/packages/react/tests/types.test.tsx
@@ -203,56 +203,3 @@ 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,34 +21,41 @@ 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 })[], 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[]
+	globalCss: {
+		<Styles extends { [K: string]: any }>(
+			...styles: (
+				{
+					/** The **@import** CSS at-rule imports style rules from other style sheets. */
+					'@import'?: unknown
 
-						/** 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
-		 }
-	 },
+					/** 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
+		}
+	},
 	keyframes: {
 		(style: {
 			[offset: string]: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>