Fix issue typing import and font-face rules (stitchesjs#809)

implydata · Sep 23, 2021 · c8615f7 · c8615f7
1 parent bfe80ee
commit c8615f7
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 30 deletions.
diff --git a/packages/core/types/stitches.d.ts b/packages/core/types/stitches.d.ts
@@ -27,31 +27,31 @@ export default interface Stitches<
 	 * [Read Documentation](https://stitches.dev/docs/variants)
 	 */
 	globalCss: {
-		<Styles extends { [K: string]: unknown }[]>(
-			...styles: {
-				[Index in keyof Styles]: (
-					& {
-						/** The **@import** CSS at-rule imports style rules from other style sheets. */
-						'@import'?: unknown
+		<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'?: unknown
-					}
-					& {
-						[K in keyof Styles[Index]]: K extends '@import'
+					/** 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 | CSSUtil.Native.AtRule.FontFace[]
+							? 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/types/stitches.d.ts b/packages/react/types/stitches.d.ts
@@ -27,31 +27,31 @@ export default interface Stitches<
 	 * [Read Documentation](https://stitches.dev/docs/variants)
 	 */
 	globalCss: {
-		<Styles extends { [K: string]: unknown }[]>(
-			...styles: {
-				[Index in keyof Styles]: (
-					& {
-						/** The **@import** CSS at-rule imports style rules from other style sheets. */
-						'@import'?: unknown
+		<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'?: unknown
-					}
-					& {
-						[K in keyof Styles[Index]]: K extends '@import'
+					/** 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 | CSSUtil.Native.AtRule.FontFace[]
+							? 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/test/Issue-803-core.ts b/packages/test/Issue-803-core.ts
@@ -0,0 +1,79 @@
+import { globalCss } from '@stitches/core'
+
+void globalCss({
+	"@font-face": {
+		fontFamily: "Roboto",
+		fontStyle: "normal",
+		fontWeight: "100",
+		src: "url('/Roboto-Thin.ttf') format('truetype')"
+	},
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@font-face": [
+		{
+			fontFamily: "Roboto",
+			fontStyle: "normal",
+			fontWeight: "100",
+			src: "url('/Roboto-Thin.ttf') format('truetype')",
+		},
+	],
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@font-face": {
+		fontFamily: "Roboto",
+		fontStyle: "normal",
+		fontWeight: "100",
+		src: "url('/Roboto-Thin.ttf') format('truetype')",
+	},
+	body: {
+		color: 'ActiveText',
+	},
+}, {
+	"@font-face": [
+		{
+			fontFamily: "Roboto",
+			fontStyle: "normal",
+			fontWeight: "100",
+			src: "url('/Roboto-Thin.ttf') format('truetype')",
+		},
+		{
+			fontFamily: "Roboto",
+			fontStyle: "normal",
+			fontWeight: "400",
+			src: "url('/Roboto-Regular.ttf') format('truetype')",
+		},
+	],
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@import": "some.css",
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@import": "some.css",
+	body: {
+		color: 'ActiveText',
+	},
+}, {
+	"@import": [
+		"some.css",
+		"someother.css",
+	],
+	body: {
+		color: 'ActiveText',
+	},
+})
diff --git a/packages/test/Issue-803-react.ts b/packages/test/Issue-803-react.ts
@@ -0,0 +1,79 @@
+import { globalCss } from '@stitches/react'
+
+void globalCss({
+	"@font-face": {
+		fontFamily: "Roboto",
+		fontStyle: "normal",
+		fontWeight: "100",
+		src: "url('/Roboto-Thin.ttf') format('truetype')"
+	},
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@font-face": [
+		{
+			fontFamily: "Roboto",
+			fontStyle: "normal",
+			fontWeight: "100",
+			src: "url('/Roboto-Thin.ttf') format('truetype')",
+		},
+	],
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@font-face": {
+		fontFamily: "Roboto",
+		fontStyle: "normal",
+		fontWeight: "100",
+		src: "url('/Roboto-Thin.ttf') format('truetype')",
+	},
+	body: {
+		color: 'ActiveText',
+	},
+}, {
+	"@font-face": [
+		{
+			fontFamily: "Roboto",
+			fontStyle: "normal",
+			fontWeight: "100",
+			src: "url('/Roboto-Thin.ttf') format('truetype')",
+		},
+		{
+			fontFamily: "Roboto",
+			fontStyle: "normal",
+			fontWeight: "400",
+			src: "url('/Roboto-Regular.ttf') format('truetype')",
+		},
+	],
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@import": "some.css",
+	body: {
+		color: 'ActiveText',
+	},
+})
+
+void globalCss({
+	"@import": "some.css",
+	body: {
+		color: 'ActiveText',
+	},
+}, {
+	"@import": [
+		"some.css",
+		"someother.css",
+	],
+	body: {
+		color: 'ActiveText',
+	},
+})