Skip to content

Commit

Permalink
Fix issue typing import and font-face rules (stitchesjs#809)
Browse files Browse the repository at this point in the history
  • Loading branch information
jonathantneal authored Sep 23, 2021
1 parent bfe80ee commit c8615f7
Show file tree
Hide file tree
Showing 4 changed files with 188 additions and 30 deletions.
30 changes: 15 additions & 15 deletions packages/core/types/stitches.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
30 changes: 15 additions & 15 deletions packages/react/types/stitches.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
79 changes: 79 additions & 0 deletions packages/test/Issue-803-core.ts
Original file line number Diff line number Diff line change
@@ -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',
},
})
79 changes: 79 additions & 0 deletions packages/test/Issue-803-react.ts
Original file line number Diff line number Diff line change
@@ -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',
},
})

0 comments on commit c8615f7

Please sign in to comment.