# Salty CSS

> Build-time CSS-in-TS for React, Next.js and Astro. Compiles `styled(...)` calls
> in `*.css.ts` files to plain CSS at build time — zero runtime cost, with full
> TypeScript autocomplete on design tokens, themes, variants and media queries.
> Works with React Server Components.

Salty CSS is currently in public alpha (`@salty-css/* ^0.1.0-alpha.0`); expect
minor breaking changes between releases. It is not a fork of vanilla-extract,
stitches or Linaria — it has its own compiler and API.

The documentation set is mirrored across the React, Next.js and Astro sections
below. The three are translations of the same content with framework-specific
install steps and code snippets — pick the section that matches your stack.

## Overview
- [Salty CSS](https://salty-css.dev/): Build time CSS-in-JS library compatible with React, Next.js, Vite and React Server Components built with TypeScript.
- [Salty CSS for React](https://salty-css.dev/react/): Sprinkle Salty CSS on your React app — build-time CSS-in-TS that ships zero runtime.
- [Salty CSS for Next.js](https://salty-css.dev/next/): Salty CSS served fresh from the App Router — zero-runtime styles that work with React Server Components.
- [Salty CSS for Astro](https://salty-css.dev/astro/): Astro plus a pinch of salt — the same styled API in .astro files and React islands, extracted to plain CSS at build time.

## Documentation (React)
- [Documentation](https://salty-css.dev/docs/react/): Salty CSS is a TypeScript-first, build-time CSS-in-TS library for React, Next.js, and Astro — typed styles, design tokens, theming, and zero runtime.
- [Quick Start](https://salty-css.dev/docs/react/quick-start/): Set up Salty CSS in ~15 minutes — install with the CLI, write your first typed component, add variants, ship dark mode, and register a custom font.
- [Installation](https://salty-css.dev/docs/react/installation/): Install Salty CSS and wire up the build-time plugin for your framework.
- [Usage](https://salty-css.dev/docs/react/usage/): Build and consume Salty CSS components inside your application code.
- [Troubleshooting](https://salty-css.dev/docs/react/troubleshooting/): Diagnose common Salty CSS issues — missing styles, build errors, framework-detection mistakes, and SSR caveats.
- [Frequently Asked Questions](https://salty-css.dev/docs/react/faq/): Short answers about Salty CSS — what it is, how the build works, theming without a provider, React Server Components, fonts, TypeScript, and incremental adoption.
- [CLI](https://salty-css.dev/docs/react/cli/): Use the salty-css command-line interface to scaffold, generate, and build your project.
- [Styling Basics](https://salty-css.dev/docs/react/basics/): Understand styled components, className, tokens, and global styles in Salty CSS.
- [Variables](https://salty-css.dev/docs/react/variables/): Define design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- [Theming](https://salty-css.dev/docs/react/theming/): Add dark mode and multi-theme support to your app with conditional CSS variables — no React provider, no context, no flash on hydration. Just flip an attribute.
- [Fonts](https://salty-css.dev/docs/react/fonts/): Register web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- [Variants](https://salty-css.dev/docs/react/variants/): Compose variant, compound, and default styles to build adaptable components in Salty CSS.
- [Classnames](https://salty-css.dev/docs/react/classnames/): Generate reusable Salty CSS class strings with the className function for any element.
- [Overrides](https://salty-css.dev/docs/react/overrides/): Extend styled components, swap elements, and override styles with props in Salty CSS.
- [Animations](https://salty-css.dev/docs/react/animations/): Define typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- [Templates](https://salty-css.dev/docs/react/templates/): Build reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.
- [Media Queries](https://salty-css.dev/docs/react/media-queries/): Use defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- [Viewport Clamp](https://salty-css.dev/docs/react/viewport-clamp/): Generate fluid responsive sizes with defineViewportClamp in Salty CSS — no media-query stair-steps.
- [Styled Function API](https://salty-css.dev/docs/react/api/styled/): API reference for styled() in Salty CSS — typed components with base styles, variants, anyOfVariants, defaultVariants, passProps, element override, and priority.
- [Classname Function API](https://salty-css.dev/docs/react/api/classname/): Full API reference for the className() function in Salty CSS — signature, options, and variants.
- [defineConfig API](https://salty-css.dev/docs/react/api/config/): Full reference for defineConfig — variables, global, reset, templates, modifiers, importStrategy, externalModules, strict, and defaultUnit.

## Documentation (Next.js)
- [Documentation](https://salty-css.dev/docs/next/): Salty CSS is a TypeScript-first, build-time CSS-in-TS library for React, Next.js, and Astro — typed styles, design tokens, theming, and zero runtime.
- [Quick Start](https://salty-css.dev/docs/next/quick-start/): Set up Salty CSS in ~15 minutes — install with the CLI, write your first typed component, add variants, ship dark mode, and register a custom font.
- [Installation](https://salty-css.dev/docs/next/installation/): Install Salty CSS and wire up the build-time plugin for your framework.
- [Usage](https://salty-css.dev/docs/next/usage/): Build and consume Salty CSS components inside your application code.
- [Troubleshooting](https://salty-css.dev/docs/next/troubleshooting/): Diagnose common Salty CSS issues — missing styles, build errors, framework-detection mistakes, and SSR caveats.
- [Frequently Asked Questions](https://salty-css.dev/docs/next/faq/): Short answers about Salty CSS — what it is, how the build works, theming without a provider, React Server Components, fonts, TypeScript, and incremental adoption.
- [CLI](https://salty-css.dev/docs/next/cli/): Use the salty-css command-line interface to scaffold, generate, and build your project.
- [Styling Basics](https://salty-css.dev/docs/next/basics/): Understand styled components, className, tokens, and global styles in Salty CSS.
- [Variables](https://salty-css.dev/docs/next/variables/): Define design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- [Theming](https://salty-css.dev/docs/next/theming/): Add dark mode and multi-theme support to your app with conditional CSS variables — no React provider, no context, no flash on hydration. Just flip an attribute.
- [Fonts](https://salty-css.dev/docs/next/fonts/): Register web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- [Variants](https://salty-css.dev/docs/next/variants/): Compose variant, compound, and default styles to build adaptable components in Salty CSS.
- [Classnames](https://salty-css.dev/docs/next/classnames/): Generate reusable Salty CSS class strings with the className function for any element.
- [Overrides](https://salty-css.dev/docs/next/overrides/): Extend styled components, swap elements, and override styles with props in Salty CSS.
- [Animations](https://salty-css.dev/docs/next/animations/): Define typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- [Templates](https://salty-css.dev/docs/next/templates/): Build reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.
- [Media Queries](https://salty-css.dev/docs/next/media-queries/): Use defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- [Viewport Clamp](https://salty-css.dev/docs/next/viewport-clamp/): Generate fluid responsive sizes with defineViewportClamp in Salty CSS — no media-query stair-steps.
- [Styled Function API](https://salty-css.dev/docs/next/api/styled/): API reference for styled() in Salty CSS — typed components with base styles, variants, anyOfVariants, defaultVariants, passProps, element override, and priority.
- [Classname Function API](https://salty-css.dev/docs/next/api/classname/): Full API reference for the className() function in Salty CSS — signature, options, and variants.
- [defineConfig API](https://salty-css.dev/docs/next/api/config/): Full reference for defineConfig — variables, global, reset, templates, modifiers, importStrategy, externalModules, strict, and defaultUnit.

## Documentation (Astro)
- [Documentation](https://salty-css.dev/docs/astro/): Salty CSS is a TypeScript-first, build-time CSS-in-TS library for React, Next.js, and Astro — typed styles, design tokens, theming, and zero runtime.
- [Quick Start](https://salty-css.dev/docs/astro/quick-start/): Set up Salty CSS in ~15 minutes — install with the CLI, write your first typed component, add variants, ship dark mode, and register a custom font.
- [Installation](https://salty-css.dev/docs/astro/installation/): Install Salty CSS and wire up the build-time plugin for your framework.
- [Usage](https://salty-css.dev/docs/astro/usage/): Build and consume Salty CSS components inside your application code.
- [Troubleshooting](https://salty-css.dev/docs/astro/troubleshooting/): Diagnose common Salty CSS issues — missing styles, build errors, framework-detection mistakes, and SSR caveats.
- [Frequently Asked Questions](https://salty-css.dev/docs/astro/faq/): Short answers about Salty CSS — what it is, how the build works, theming without a provider, React Server Components, fonts, TypeScript, and incremental adoption.
- [CLI](https://salty-css.dev/docs/astro/cli/): Use the salty-css command-line interface to scaffold, generate, and build your project.
- [Styling Basics](https://salty-css.dev/docs/astro/basics/): Understand styled components, className, tokens, and global styles in Salty CSS.
- [Variables](https://salty-css.dev/docs/astro/variables/): Define design tokens with defineVariables — static, responsive, and conditional scopes for theming and responsive design.
- [Theming](https://salty-css.dev/docs/astro/theming/): Add dark mode and multi-theme support to your app with conditional CSS variables — no React provider, no context, no flash on hydration. Just flip an attribute.
- [Fonts](https://salty-css.dev/docs/astro/fonts/): Register web fonts with defineFont — local files, remote stylesheets, and CSS-variable exports for Salty CSS styles.
- [Variants](https://salty-css.dev/docs/astro/variants/): Compose variant, compound, and default styles to build adaptable components in Salty CSS.
- [Classnames](https://salty-css.dev/docs/astro/classnames/): Generate reusable Salty CSS class strings with the className function for any element.
- [Overrides](https://salty-css.dev/docs/astro/overrides/): Extend styled components, swap elements, and override styles with props in Salty CSS.
- [Animations](https://salty-css.dev/docs/astro/animations/): Define typed @keyframes and stagger sequences with the keyframes() function in Salty CSS.
- [Templates](https://salty-css.dev/docs/astro/templates/): Build reusable style patterns with defineTemplates for cross-component consistency in Salty CSS.
- [Media Queries](https://salty-css.dev/docs/astro/media-queries/): Use defineMediaQuery to author responsive styles and breakpoints in Salty CSS.
- [Viewport Clamp](https://salty-css.dev/docs/astro/viewport-clamp/): Generate fluid responsive sizes with defineViewportClamp in Salty CSS — no media-query stair-steps.
- [Styled Function API](https://salty-css.dev/docs/astro/api/styled/): API reference for styled() in Salty CSS — typed components with base styles, variants, anyOfVariants, defaultVariants, passProps, element override, and priority.
- [Classname Function API](https://salty-css.dev/docs/astro/api/classname/): Full API reference for the className() function in Salty CSS — signature, options, and variants.
- [defineConfig API](https://salty-css.dev/docs/astro/api/config/): Full reference for defineConfig — variables, global, reset, templates, modifiers, importStrategy, externalModules, strict, and defaultUnit.

## Optional
- [Imports (React)](https://salty-css.dev/docs/react/imports/): Pull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- [Color Function (React)](https://salty-css.dev/docs/react/color-function/): Chain color transforms — lighten, darken, alpha, mix — with the Salty CSS color helper.
- [Modifiers (React)](https://salty-css.dev/docs/react/modifiers/): Define custom value transformers with the modifiers config — pattern + transform function for shorthand syntaxes.
- [define* factories index (React)](https://salty-css.dev/docs/react/api/define-factories/): One-page index of every define* helper in Salty CSS — signature, role, and links to the deep-dive.
- [Imports (Next.js)](https://salty-css.dev/docs/next/imports/): Pull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- [Color Function (Next.js)](https://salty-css.dev/docs/next/color-function/): Chain color transforms — lighten, darken, alpha, mix — with the Salty CSS color helper.
- [Modifiers (Next.js)](https://salty-css.dev/docs/next/modifiers/): Define custom value transformers with the modifiers config — pattern + transform function for shorthand syntaxes.
- [define* factories index (Next.js)](https://salty-css.dev/docs/next/api/define-factories/): One-page index of every define* helper in Salty CSS — signature, role, and links to the deep-dive.
- [Imports (Astro)](https://salty-css.dev/docs/astro/imports/): Pull external CSS into your Salty CSS build with defineImport — relative paths, npm packages, public assets, and URLs.
- [Color Function (Astro)](https://salty-css.dev/docs/astro/color-function/): Chain color transforms — lighten, darken, alpha, mix — with the Salty CSS color helper.
- [Modifiers (Astro)](https://salty-css.dev/docs/astro/modifiers/): Define custom value transformers with the modifiers config — pattern + transform function for shorthand syntaxes.
- [define* factories index (Astro)](https://salty-css.dev/docs/astro/api/define-factories/): One-page index of every define* helper in Salty CSS — signature, role, and links to the deep-dive.
- [Source on GitHub](https://github.com/margarita-form/salty-css): Monorepo for @salty-css/* packages — file issues, browse source, follow the alpha changelog.
- [Community Discord](https://discord.gg/R6kr4KxMhP): Chat with maintainers and other Salty CSS users.
- [@salty-css/core on npm](https://www.npmjs.com/package/@salty-css/core): The compiler package — published as alpha (^0.1.0-alpha.0).