0
# Global Styles
1

2
Apply global CSS styles including imports, font faces, and keyframes. The `globalCss` function allows you to define styles that affect the entire document or large sections of your application.
3

4
## Capabilities
5

6
### Global CSS Function
7

8
Creates a function that applies global CSS styles when called.
9

10
```typescript { .api }
11
/**
12
 * Creates a function that applies global CSS styles
13
 * @param styles - Global style objects with selectors, at-rules, and imports
14
 * @returns Function that applies global styles and returns generated CSS string
15
 */
16
function globalCss(...styles: GlobalStyleObject[]): () => string;
17

18
interface GlobalStyleObject {
19
  /** CSS @import rules for external stylesheets */
20
  '@import'?: string | string[];
21
  /** CSS @font-face rules for custom fonts */
22
  '@font-face'?: FontFaceRule | FontFaceRule[];
23
  /** CSS @keyframes for animations */
24
  [keyframes: `@keyframes ${string}`]: KeyframesObject;
25
  /** CSS @property for custom properties */
26
  [property: `@property ${string}`]: PropertyRule;
27
  /** Any CSS selector with style rules */
28
  [selector: string]: StyleObject | string | string[] | FontFaceRule | FontFaceRule[];
29
}
30

31
interface FontFaceRule {
32
  fontFamily: string;
33
  src: string;
34
  fontWeight?: string | number;
35
  fontStyle?: string;
36
  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
37
}
38

39
interface PropertyRule {
40
  syntax: string;
41
  inherits: boolean;
42
  initialValue?: string;
43
}
44
```
45

46
**Usage Examples:**
47

48
```typescript
49
import { globalCss } from "@stitches/react";
50

51
// Basic global styles
52
const globalStyles = globalCss({
53
  '*': {
54
    boxSizing: 'border-box',
55
    margin: 0,
56
    padding: 0
57
  },
58
  
59
  'html, body': {
60
    fontFamily: 'system-ui, sans-serif',
61
    lineHeight: 1.5
62
  },
63
  
64
  'h1, h2, h3': {
65
    marginBottom: '1rem'
66
  },
67
  
68
  'a': {
69
    color: 'inherit',
70
    textDecoration: 'none',
71
    
72
    '&:hover': {
73
      textDecoration: 'underline'
74
    }
75
  }
76
});
77

78
// Apply global styles (usually in app root)
79
function App() {
80
  globalStyles(); // Apply the styles
81
  
82
  return <div>Your app content</div>;
83
}
84
```
85

86
### CSS Imports
87

88
Import external stylesheets and fonts.
89

90
**Usage Examples:**
91

92
```typescript
93
const globalStyles = globalCss({
94
  // Import external fonts
95
  '@import': [
96
    'url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap")',
97
    'url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap")'
98
  ],
99
  
100
  // Or single import
101
  // '@import': 'url("https://fonts.googleapis.com/css2?family=Inter&display=swap")',
102
  
103
  body: {
104
    fontFamily: 'Inter, system-ui, sans-serif'
105
  },
106
  
107
  code: {
108
    fontFamily: 'JetBrains Mono, monospace'
109
  }
110
});
111
```
112

113
### Font Face Declarations
114

115
Define custom fonts with @font-face rules.
116

117
**Usage Examples:**
118

119
```typescript
120
const globalStyles = globalCss({
121
  '@font-face': [
122
    {
123
      fontFamily: 'MyCustomFont',
124
      src: 'url("/fonts/custom-font.woff2") format("woff2")',
125
      fontWeight: '400',
126
      fontStyle: 'normal',
127
      fontDisplay: 'swap'
128
    },
129
    {
130
      fontFamily: 'MyCustomFont',
131
      src: 'url("/fonts/custom-font-bold.woff2") format("woff2")',
132
      fontWeight: '700',
133
      fontStyle: 'normal',
134
      fontDisplay: 'swap'
135
    }
136
  ],
137
  
138
  body: {
139
    fontFamily: 'MyCustomFont, system-ui, sans-serif'
140
  }
141
});
142

143
// Or single font face
144
const singleFontGlobal = globalCss({
145
  '@font-face': {
146
    fontFamily: 'Brand Font',
147
    src: 'url("/fonts/brand.woff2") format("woff2")',
148
    fontDisplay: 'swap'
149
  }
150
});
151
```
152

153
### Keyframe Animations
154

155
Define global keyframe animations.
156

157
**Usage Examples:**
158

159
```typescript
160
const globalStyles = globalCss({
161
  '@keyframes fadeIn': {
162
    '0%': { opacity: 0, transform: 'translateY(10px)' },
163
    '100%': { opacity: 1, transform: 'translateY(0)' }
164
  },
165
  
166
  '@keyframes slideIn': {
167
    from: { transform: 'translateX(-100%)' },
168
    to: { transform: 'translateX(0)' }
169
  },
170
  
171
  '@keyframes pulse': {
172
    '0%, 100%': { opacity: 1 },
173
    '50%': { opacity: 0.5 }
174
  },
175
  
176
  // Apply animations to classes
177
  '.fade-in': {
178
    animation: 'fadeIn 0.3s ease-out'
179
  },
180
  
181
  '.slide-in': {
182
    animation: 'slideIn 0.5s ease-out'
183
  },
184
  
185
  '.pulse': {
186
    animation: 'pulse 2s infinite'
187
  }
188
});
189
```
190

191
### CSS Custom Properties
192

193
Define global CSS custom properties.
194

195
**Usage Examples:**
196

197
```typescript
198
const globalStyles = globalCss({
199
  ':root': {
200
    '--border-radius': '4px',
201
    '--transition-duration': '0.2s',
202
    '--font-size-base': '16px',
203
    '--line-height-base': '1.5',
204
    '--color-text': '#333',
205
    '--color-background': '#fff'
206
  },
207
  
208
  // Use custom properties in global styles
209
  '*': {
210
    borderRadius: 'var(--border-radius)',
211
    transition: `all var(--transition-duration) ease`
212
  },
213
  
214
  body: {
215
    fontSize: 'var(--font-size-base)',
216
    lineHeight: 'var(--line-height-base)',
217
    color: 'var(--color-text)',
218
    backgroundColor: 'var(--color-background)'
219
  }
220
});
221

222
// Register custom properties (CSS Houdini)
223
const advancedGlobalStyles = globalCss({
224
  '@property --my-color': {
225
    syntax: '<color>',
226
    inherits: false,
227
    initialValue: 'blue'
228
  },
229
  
230
  '@property --my-angle': {
231
    syntax: '<angle>',
232
    inherits: true,
233
    initialValue: '0deg'
234
  }
235
});
236
```
237

238
### Theme Integration
239

240
Use theme tokens in global styles.
241

242
**Usage Examples:**
243

244
```typescript
245
import { createTheme, globalCss } from "@stitches/react";
246

247
const theme = createTheme({
248
  colors: {
249
    primary: 'blue',
250
    background: 'white',
251
    text: 'black'
252
  },
253
  fonts: {
254
    sans: 'system-ui, sans-serif',
255
    mono: 'Monaco, monospace'
256
  }
257
});
258

259
const globalStyles = globalCss({
260
  body: {
261
    fontFamily: '$fonts$sans',
262
    backgroundColor: '$colors$background',
263
    color: '$colors$text'
264
  },
265
  
266
  'h1, h2, h3': {
267
    color: '$colors$primary'
268
  },
269
  
270
  code: {
271
    fontFamily: '$fonts$mono',
272
    backgroundColor: '$colors$gray100',
273
    padding: '$space$1'
274
  }
275
});
276

277
function App() {
278
  globalStyles();
279
  
280
  return (
281
    <div className={theme}>
282
      Your app content
283
    </div>
284
  );
285
}
286
```
287

288
### Responsive Global Styles
289

290
Apply global styles conditionally based on media queries.
291

292
**Usage Examples:**
293

294
```typescript
295
const globalStyles = globalCss({
296
  body: {
297
    fontSize: '16px',
298
    padding: '16px',
299
    
300
    '@media (min-width: 768px)': {
301
      fontSize: '18px',
302
      padding: '24px'
303
    },
304
    
305
    '@media (min-width: 1024px)': {
306
      fontSize: '20px',
307
      padding: '32px'
308
    }
309
  },
310
  
311
  // Hide elements on mobile
312
  '.desktop-only': {
313
    display: 'none',
314
    
315
    '@media (min-width: 768px)': {
316
      display: 'block'
317
    }
318
  },
319
  
320
  // Show only on mobile
321
  '.mobile-only': {
322
    display: 'block',
323
    
324
    '@media (min-width: 768px)': {
325
      display: 'none'
326
    }
327
  }
328
});
329
```
330

331
### CSS Reset and Normalize
332

333
Create comprehensive CSS resets or normalize styles.
334

335
**Usage Examples:**
336

337
```typescript
338
const resetStyles = globalCss({
339
  // Modern CSS reset
340
  '*, *::before, *::after': {
341
    boxSizing: 'border-box'
342
  },
343
  
344
  '*': {
345
    margin: 0
346
  },
347
  
348
  'html, body': {
349
    height: '100%'
350
  },
351
  
352
  body: {
353
    lineHeight: 1.5,
354
    WebkitFontSmoothing: 'antialiased'
355
  },
356
  
357
  'img, picture, video, canvas, svg': {
358
    display: 'block',
359
    maxWidth: '100%'
360
  },
361
  
362
  'input, button, textarea, select': {
363
    font: 'inherit'
364
  },
365
  
366
  'p, h1, h2, h3, h4, h5, h6': {
367
    overflowWrap: 'break-word'
368
  },
369
  
370
  '#root, #__next': {
371
    isolation: 'isolate'
372
  }
373
});
374

375
// Apply reset before other styles
376
function App() {
377
  resetStyles();
378
  // other global styles...
379
  
380
  return <div>Your app</div>;
381
}
382
```
383

384
### Print Styles
385

386
Define styles specifically for print media.
387

388
**Usage Examples:**
389

390
```typescript
391
const globalStyles = globalCss({
392
  '@media print': {
393
    '*': {
394
      color: 'black !important',
395
      backgroundColor: 'white !important'
396
    },
397
    
398
    '.no-print': {
399
      display: 'none !important'
400
    },
401
    
402
    'a[href]:after': {
403
      content: ' (' attr(href) ')'
404
    },
405
    
406
    'h1, h2, h3': {
407
      pageBreakAfter: 'avoid'
408
    },
409
    
410
    'img': {
411
      maxWidth: '100% !important'
412
    }
413
  }
414
});
415
```
416

417
## Server-Side Rendering
418

419
```typescript { .api }
420
/**
421
 * Get all generated CSS text for server-side rendering
422
 * @returns Complete CSS string including global styles
423
 */
424
function getCssText(): string;
425
```
426

427
**Usage Examples:**
428

429
```typescript
430
import { getCssText, globalCss } from "@stitches/react";
431

432
const globalStyles = globalCss({
433
  body: { fontFamily: 'system-ui' }
434
});
435

436
// On server
437
function renderPage() {
438
  // Apply global styles
439
  globalStyles();
440
  
441
  // Get all CSS for SSR
442
  const cssText = getCssText();
443
  
444
  return `
445
    <html>
446
      <head>
447
        <style>${cssText}</style>
448
      </head>
449
      <body>
450
        ${renderToString(<App />)}
451
      </body>
452
    </html>
453
  `;
454
}
455
```