tessl/npm-stitches--react

React implementation of Stitches CSS-in-JS library with type-safe styling and variants

—

Pending

Overview

Eval results

Files

Global Styles

Name: tessl/npm-stitches--react
Author: tessl

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.

Capabilities

Global CSS Function

Creates a function that applies global CSS styles when called.

/**
 * Creates a function that applies global CSS styles
 * @param styles - Global style objects with selectors, at-rules, and imports
 * @returns Function that applies global styles and returns generated CSS string
 */
function globalCss(...styles: GlobalStyleObject[]): () => string;

interface GlobalStyleObject {
  /** CSS @import rules for external stylesheets */
  '@import'?: string | string[];
  /** CSS @font-face rules for custom fonts */
  '@font-face'?: FontFaceRule | FontFaceRule[];
  /** CSS @keyframes for animations */
  [keyframes: `@keyframes ${string}`]: KeyframesObject;
  /** CSS @property for custom properties */
  [property: `@property ${string}`]: PropertyRule;
  /** Any CSS selector with style rules */
  [selector: string]: StyleObject | string | string[] | FontFaceRule | FontFaceRule[];
}

interface FontFaceRule {
  fontFamily: string;
  src: string;
  fontWeight?: string | number;
  fontStyle?: string;
  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
}

interface PropertyRule {
  syntax: string;
  inherits: boolean;
  initialValue?: string;
}

Usage Examples:

import { globalCss } from "@stitches/react";

// Basic global styles
const globalStyles = globalCss({
  '*': {
    boxSizing: 'border-box',
    margin: 0,
    padding: 0
  },
  
  'html, body': {
    fontFamily: 'system-ui, sans-serif',
    lineHeight: 1.5
  },
  
  'h1, h2, h3': {
    marginBottom: '1rem'
  },
  
  'a': {
    color: 'inherit',
    textDecoration: 'none',
    
    '&:hover': {
      textDecoration: 'underline'
    }
  }
});

// Apply global styles (usually in app root)
function App() {
  globalStyles(); // Apply the styles
  
  return <div>Your app content</div>;
}

CSS Imports

Import external stylesheets and fonts.

Usage Examples:

const globalStyles = globalCss({
  // Import external fonts
  '@import': [
    'url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap")',
    'url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap")'
  ],
  
  // Or single import
  // '@import': 'url("https://fonts.googleapis.com/css2?family=Inter&display=swap")',
  
  body: {
    fontFamily: 'Inter, system-ui, sans-serif'
  },
  
  code: {
    fontFamily: 'JetBrains Mono, monospace'
  }
});

Font Face Declarations

Define custom fonts with @font-face rules.

Usage Examples:

const globalStyles = globalCss({
  '@font-face': [
    {
      fontFamily: 'MyCustomFont',
      src: 'url("/fonts/custom-font.woff2") format("woff2")',
      fontWeight: '400',
      fontStyle: 'normal',
      fontDisplay: 'swap'
    },
    {
      fontFamily: 'MyCustomFont',
      src: 'url("/fonts/custom-font-bold.woff2") format("woff2")',
      fontWeight: '700',
      fontStyle: 'normal',
      fontDisplay: 'swap'
    }
  ],
  
  body: {
    fontFamily: 'MyCustomFont, system-ui, sans-serif'
  }
});

// Or single font face
const singleFontGlobal = globalCss({
  '@font-face': {
    fontFamily: 'Brand Font',
    src: 'url("/fonts/brand.woff2") format("woff2")',
    fontDisplay: 'swap'
  }
});

Keyframe Animations

Define global keyframe animations.

Usage Examples:

const globalStyles = globalCss({
  '@keyframes fadeIn': {
    '0%': { opacity: 0, transform: 'translateY(10px)' },
    '100%': { opacity: 1, transform: 'translateY(0)' }
  },
  
  '@keyframes slideIn': {
    from: { transform: 'translateX(-100%)' },
    to: { transform: 'translateX(0)' }
  },
  
  '@keyframes pulse': {
    '0%, 100%': { opacity: 1 },
    '50%': { opacity: 0.5 }
  },
  
  // Apply animations to classes
  '.fade-in': {
    animation: 'fadeIn 0.3s ease-out'
  },
  
  '.slide-in': {
    animation: 'slideIn 0.5s ease-out'
  },
  
  '.pulse': {
    animation: 'pulse 2s infinite'
  }
});

CSS Custom Properties

Define global CSS custom properties.

Usage Examples:

const globalStyles = globalCss({
  ':root': {
    '--border-radius': '4px',
    '--transition-duration': '0.2s',
    '--font-size-base': '16px',
    '--line-height-base': '1.5',
    '--color-text': '#333',
    '--color-background': '#fff'
  },
  
  // Use custom properties in global styles
  '*': {
    borderRadius: 'var(--border-radius)',
    transition: `all var(--transition-duration) ease`
  },
  
  body: {
    fontSize: 'var(--font-size-base)',
    lineHeight: 'var(--line-height-base)',
    color: 'var(--color-text)',
    backgroundColor: 'var(--color-background)'
  }
});

// Register custom properties (CSS Houdini)
const advancedGlobalStyles = globalCss({
  '@property --my-color': {
    syntax: '<color>',
    inherits: false,
    initialValue: 'blue'
  },
  
  '@property --my-angle': {
    syntax: '<angle>',
    inherits: true,
    initialValue: '0deg'
  }
});

Theme Integration

Use theme tokens in global styles.

Usage Examples:

import { createTheme, globalCss } from "@stitches/react";

const theme = createTheme({
  colors: {
    primary: 'blue',
    background: 'white',
    text: 'black'
  },
  fonts: {
    sans: 'system-ui, sans-serif',
    mono: 'Monaco, monospace'
  }
});

const globalStyles = globalCss({
  body: {
    fontFamily: '$fonts$sans',
    backgroundColor: '$colors$background',
    color: '$colors$text'
  },
  
  'h1, h2, h3': {
    color: '$colors$primary'
  },
  
  code: {
    fontFamily: '$fonts$mono',
    backgroundColor: '$colors$gray100',
    padding: '$space$1'
  }
});

function App() {
  globalStyles();
  
  return (
    <div className={theme}>
      Your app content
    </div>
  );
}

Responsive Global Styles

Apply global styles conditionally based on media queries.

Usage Examples:

const globalStyles = globalCss({
  body: {
    fontSize: '16px',
    padding: '16px',
    
    '@media (min-width: 768px)': {
      fontSize: '18px',
      padding: '24px'
    },
    
    '@media (min-width: 1024px)': {
      fontSize: '20px',
      padding: '32px'
    }
  },
  
  // Hide elements on mobile
  '.desktop-only': {
    display: 'none',
    
    '@media (min-width: 768px)': {
      display: 'block'
    }
  },
  
  // Show only on mobile
  '.mobile-only': {
    display: 'block',
    
    '@media (min-width: 768px)': {
      display: 'none'
    }
  }
});

CSS Reset and Normalize

Create comprehensive CSS resets or normalize styles.

Usage Examples:

const resetStyles = globalCss({
  // Modern CSS reset
  '*, *::before, *::after': {
    boxSizing: 'border-box'
  },
  
  '*': {
    margin: 0
  },
  
  'html, body': {
    height: '100%'
  },
  
  body: {
    lineHeight: 1.5,
    WebkitFontSmoothing: 'antialiased'
  },
  
  'img, picture, video, canvas, svg': {
    display: 'block',
    maxWidth: '100%'
  },
  
  'input, button, textarea, select': {
    font: 'inherit'
  },
  
  'p, h1, h2, h3, h4, h5, h6': {
    overflowWrap: 'break-word'
  },
  
  '#root, #__next': {
    isolation: 'isolate'
  }
});

// Apply reset before other styles
function App() {
  resetStyles();
  // other global styles...
  
  return <div>Your app</div>;
}

Print Styles

Define styles specifically for print media.

Usage Examples:

const globalStyles = globalCss({
  '@media print': {
    '*': {
      color: 'black !important',
      backgroundColor: 'white !important'
    },
    
    '.no-print': {
      display: 'none !important'
    },
    
    'a[href]:after': {
      content: ' (' attr(href) ')'
    },
    
    'h1, h2, h3': {
      pageBreakAfter: 'avoid'
    },
    
    'img': {
      maxWidth: '100% !important'
    }
  }
});

Server-Side Rendering

/**
 * Get all generated CSS text for server-side rendering
 * @returns Complete CSS string including global styles
 */
function getCssText(): string;

Usage Examples:

import { getCssText, globalCss } from "@stitches/react";

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

// On server
function renderPage() {
  // Apply global styles
  globalStyles();
  
  // Get all CSS for SSR
  const cssText = getCssText();
  
  return `
    <html>
      <head>
        <style>${cssText}</style>
      </head>
      <body>
        ${renderToString(<App />)}
      </body>
    </html>
  `;
}

Install with Tessl CLI