From 74c3b96e5cadd7d1434a3c4bc5d7cb2089cc783a Mon Sep 17 00:00:00 2001 From: Abdul Date: Mon, 2 May 2022 04:47:16 +0300 Subject: [PATCH] Revert "Fix globalCss types to support multiple arguments (#1012)" (#1017) This reverts commit 4938d6d1ecc37590ecdeb92308f3e988b8fbcc91. --- 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, 56 insertions(+), 169 deletions(-) diff --git a/packages/core/tests/types.test.ts b/packages/core/tests/types.test.ts index 5fde25a6..50dce3e7 100644 --- 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 index 6445b89c..42a72008 100644 --- 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: { - [K in keyof Styles]: - CSS - & { - /** The **@import** CSS at-rule imports style rules from other style sheets. */ - '@import'?: string | string[] + ( + ...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 - } & { - [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 + : K extends `@keyframes ${string}` + ? { + [KeyFrame in string]: CSSUtil.CSS + } + : K extends `@property ${string}` + ? CSSUtil.Native.AtRule.Property + : CSSUtil.CSS + ) + } + )[] ): { (): string } diff --git a/packages/react/tests/types.test.tsx b/packages/react/tests/types.test.tsx index 96ffef7c..4efcf255 100644 --- 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 index 3cf39f49..846f281a 100644 --- 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: { - [K in keyof Styles]: - CSS - & { - /** The **@import** CSS at-rule imports style rules from other style sheets. */ - '@import'?: string | string[] + globalCss: { + ( + ...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 - } & { - [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 + : K extends `@keyframes ${string}` + ? { + [KeyFrame in string]: CSSUtil.CSS + } + : K extends `@property ${string}` + ? CSSUtil.Native.AtRule.Property + : CSSUtil.CSS + ) + } + )[] + ): { + (): string + } + }, keyframes: { (style: { [offset: string]: CSSUtil.CSS