From c8615f77cbc886cbfac072ddc4d3fbdb40b6918b Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Thu, 23 Sep 2021 08:20:01 -0400 Subject: [PATCH] Fix issue typing import and font-face rules (#809) --- packages/core/types/stitches.d.ts | 30 ++++++------ packages/react/types/stitches.d.ts | 30 ++++++------ packages/test/Issue-803-core.ts | 79 ++++++++++++++++++++++++++++++ packages/test/Issue-803-react.ts | 79 ++++++++++++++++++++++++++++++ 4 files changed, 188 insertions(+), 30 deletions(-) create mode 100644 packages/test/Issue-803-core.ts create mode 100644 packages/test/Issue-803-react.ts diff --git a/packages/core/types/stitches.d.ts b/packages/core/types/stitches.d.ts index a4ddeef3..3b5737b7 100644 --- a/packages/core/types/stitches.d.ts +++ b/packages/core/types/stitches.d.ts @@ -27,21 +27,21 @@ export default interface Stitches< * [Read Documentation](https://stitches.dev/docs/variants) */ globalCss: { - ( - ...styles: { - [Index in keyof Styles]: ( - & { - /** The **@import** CSS at-rule imports style rules from other style sheets. */ - '@import'?: unknown + ( + ...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 : K extends `@keyframes ${string}` ? { [KeyFrame in string]: CSSUtil.CSS @@ -49,9 +49,9 @@ export default interface Stitches< : K extends `@property ${string}` ? CSSUtil.Native.AtRule.Property : CSSUtil.CSS - } - ) - } + ) + } + )[] ): { (): string } diff --git a/packages/react/types/stitches.d.ts b/packages/react/types/stitches.d.ts index 6cf55322..382d3276 100644 --- a/packages/react/types/stitches.d.ts +++ b/packages/react/types/stitches.d.ts @@ -27,21 +27,21 @@ export default interface Stitches< * [Read Documentation](https://stitches.dev/docs/variants) */ globalCss: { - ( - ...styles: { - [Index in keyof Styles]: ( - & { - /** The **@import** CSS at-rule imports style rules from other style sheets. */ - '@import'?: unknown + ( + ...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 : K extends `@keyframes ${string}` ? { [KeyFrame in string]: CSSUtil.CSS @@ -49,9 +49,9 @@ export default interface Stitches< : K extends `@property ${string}` ? CSSUtil.Native.AtRule.Property : CSSUtil.CSS - } - ) - } + ) + } + )[] ): { (): string } diff --git a/packages/test/Issue-803-core.ts b/packages/test/Issue-803-core.ts new file mode 100644 index 00000000..4927d3bb --- /dev/null +++ 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 new file mode 100644 index 00000000..19f1715d --- /dev/null +++ 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', + }, +})