From 4938d6d1ecc37590ecdeb92308f3e988b8fbcc91 Mon Sep 17 00:00:00 2001 From: Cesar S Date: Sun, 1 May 2022 20:14:11 -0500 Subject: [PATCH] Fix globalCss types to support multiple arguments (#1012) * Fix globalCss types to support multiple arguments * Add endline * Remove unaccessible types * Fix indentation --- packages/core/tests/types.test.ts | 76 ++++++++++++++++++++++++++++- packages/core/types/stitches.d.ts | 43 +++++++--------- packages/react/tests/types.test.tsx | 53 ++++++++++++++++++++ packages/react/types/stitches.d.ts | 53 +++++++++----------- 4 files changed, 169 insertions(+), 56 deletions(-) diff --git a/packages/core/tests/types.test.ts b/packages/core/tests/types.test.ts index 50dce3e7..5fde25a6 100644 --- 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 index 42a72008..6445b89c 100644 --- 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: ( - { - /** The **@import** CSS at-rule imports style rules from other style sheets. */ - '@import'?: unknown + >( + ...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 - : K extends `@keyframes ${string}` - ? { - [KeyFrame in string]: CSSUtil.CSS - } - : K extends `@property ${string}` - ? CSSUtil.Native.AtRule.Property - : CSSUtil.CSS - ) - } - )[] + /** The **@font-face** CSS at-rule specifies a custom font with which to display text. */ + '@font-face'?: CSSUtil.Native.AtRule.FontFace | Array + } & { + [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 index 4efcf255..96ffef7c 100644 --- 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 index 846f281a..3cf39f49 100644 --- 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: ( - { - /** The **@import** CSS at-rule imports style rules from other style sheets. */ - '@import'?: unknown + prefix: Prefix, + globalCss: { + >( + ...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 - : K extends `@keyframes ${string}` - ? { - [KeyFrame in string]: CSSUtil.CSS - } - : K extends `@property ${string}` - ? CSSUtil.Native.AtRule.Property - : CSSUtil.CSS - ) - } - )[] - ): { - (): string - } - }, + /** The **@font-face** CSS at-rule specifies a custom font with which to display text. */ + '@font-face'?: CSSUtil.Native.AtRule.FontFace | Array + } & { + [KA in `@property ${string}`]: CSSUtil.Native.AtRule.Property + } & { + [KS in `@keyframes ${string}`]: { + [KeyFrame in string]: CSS + } + } + } + ): { + (): string + } + }, keyframes: { (style: { [offset: string]: CSSUtil.CSS