define* factories — index

Salty CSS's public surface is a handful of small factories. Each one returns a typed configuration object that the build picks up automatically when it's exported (or passed to defineConfig).

This page is the at-a-glance index. Click through for the deep-dive.

Configuration factory

defineConfig(config)

import { defineConfig } from "@salty-css/react/config";

defineConfig({
  variables?: SaltyVariables,
  global?: GlobalStyles,
  reset?: 'default' | 'none' | GlobalStyles,
  templates?: CssTemplates,
  modifiers?: CssModifiers,
  importStrategy?: 'root' | 'component',
  externalModules?: string[],
  strict?: boolean | 'warn',
  defaultUnit?: string,
});

Top-level project configuration. → defineConfig reference.

Variable factories

defineVariables(variables)

import { defineVariables } from "@salty-css/core/factories";

defineVariables({
  colors: { brand: { main: "#0070f3" } },
  responsive: { base: { spacing: { gutter: "32px" } } },
  conditional: { theme: { dark: { ... }, light: { ... } } },
});

Design tokens — static, responsive, and conditional. → Variables · Theming.

Style-system factories

defineGlobalStyles(styles)

import { defineGlobalStyles } from "@salty-css/core/factories";

defineGlobalStyles({
  html: { scrollBehavior: "smooth" },
  body: { margin: 0 },
});

Bare-selector global styles (resets, base typography, etc.). Same shape as defineConfig({ global }). → Basics: global styles.

defineTemplates(templates)

import { defineTemplates } from "@salty-css/core/factories";

defineTemplates({
  textStyle: {
    body: { fontSize: "16px", lineHeight: "1.5" },
    heading: { fontSize: "32px", fontWeight: 700 },
  },
  card: (padding: string) => ({ padding, borderRadius: "8px" }),
});

Reusable style bundles — static or function-based. Supports base / variants / compoundVariants / anyOfVariants per node. → Templates.

Loading & registration factories

defineFont(options)

import { defineFont } from "@salty-css/core/factories";

defineFont({
  name: "Inter",
  fallback: "system-ui, sans-serif",
  variants: [{ src: "/fonts/Inter-Regular.woff2", weight: 400 }],
});

Registers a font as @font-face (or via @import for remote stylesheets) and returns { variable, fontFamily, className, style }. → Fonts.

defineImport(...specs)

import { defineImport } from "@salty-css/core/factories";

defineImport(
  "modern-normalize/modern-normalize.css",
  { url: "./print.css", media: "print" },
);

Pulls external CSS into your build. Specs can be strings (relative, npm, public, URL) or { url, media?, supports? } objects. → Imports.

Responsive & animation factories

defineMediaQuery(callback)

import { defineMediaQuery } from "@salty-css/react/config";

export const tabletDown = defineMediaQuery((media) => media.maxWidth(900));

Named, reusable media queries. Use the export name with an @ prefix in styles: '@tabletDown': { ... }. → Media queries.

defineViewportClamp(options)

import { defineViewportClamp } from "@salty-css/core/helpers";

export const fhdClamp = defineViewportClamp({
  screenSize: 1920,
  minMultiplier: 1,
  maxMultiplier: 1.25,
});

Returns a function that generates clamp(min, vw, max) expressions tuned to a reference screen size. → Viewport clamp.

keyframes(options)

import { keyframes } from "@salty-css/react/keyframes";

export const fadeIn = keyframes({
  animationName: "fadeIn",
  appendInitialStyles: true,
  params: { duration: "500ms", easing: "ease-out" },
  from: { opacity: 0 },
  to: { opacity: 1 },
});

Typed @keyframes rules with overridable defaults. The return value drops into the animation shorthand. → Animations.

Where the imports live

See also

• defineConfig reference — the project-wide config object.
• styled API · className API — the component factories.