Skip to content

Commit

Permalink
Fix globalCss types to support multiple arguments (stitchesjs#1012)
Browse files Browse the repository at this point in the history
* Fix globalCss types to support multiple arguments

* Add endline

* Remove unaccessible types

* Fix indentation
  • Loading branch information
csantos1113 authored May 2, 2022
1 parent 397222f commit 4938d6d
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 56 deletions.
76 changes: 75 additions & 1 deletion packages/core/tests/types.test.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createStitches } from '../types/index'
import { createStitches, FontFace } from '../types/index'

const { css, globalCss, keyframes } = createStitches({
utils: {
Expand Down Expand Up @@ -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"
}
}
}
)
}
43 changes: 18 additions & 25 deletions packages/core/types/stitches.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 extends { [K: string]: any }>(
...styles: (
{
/** The **@import** CSS at-rule imports style rules from other style sheets. */
'@import'?: unknown
<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[]

/** 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>
)
}
)[]
/** 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
}
Expand Down
53 changes: 53 additions & 0 deletions packages/react/tests/types.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
)
}
53 changes: 23 additions & 30 deletions packages/react/types/stitches.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 extends { [K: string]: any }>(
...styles: (
{
/** The **@import** CSS at-rule imports style rules from other style sheets. */
'@import'?: unknown
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[]

/** 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
}
},
/** 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
}
},
keyframes: {
(style: {
[offset: string]: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>
Expand Down

0 comments on commit 4938d6d

Please sign in to comment.