Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix globalCss types to support multiple arguments #1012

Merged
merged 4 commits into from
May 2, 2022
Merged

Fix globalCss types to support multiple arguments #1012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ef11c6
Fix globalCss types to support multiple arguments
csantos1113 Apr 25, 2022
5852e09
Add endline
csantos1113 Apr 25, 2022
44a42c4
Remove unaccessible types
csantos1113 Apr 25, 2022
1121b66
Fix indentation
csantos1113 Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 75 additions & 1 deletion packages/core/tests/types.test.ts
View file
Open in desktop
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
csantos1113 marked this conversation as resolved.
Show resolved Hide resolved
* -----------------------------------------------------------------------------------------------*/
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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