repository·canary·Indexed 11 days ago
https://github.com/stitchesjs/stitchesA high-performance CSS-in-JS library featuring near-zero runtime, SSR support, and multi-variant component styling. It provides a framework-agnostic core (@stitches/core), a React integration (@stitches/react) with a styled API, and a stringify utility (@stitches/stringify) for converting JavaScript objects to CSS strings.
You can use @stitches/core directly in the browser using ES modules via Skypack or by including the global script from unpkg.
<script type="module">
import { css } from 'https://cdn.skypack.dev/@stitches/core'
</script><script src="https://unpkg.com/@stitches/core/dist/index.global.js"></script>
<script>
const { css } = stitches
</script>Use @stitches/core for a framework-agnostic implementation of Stitches. This provides the base CSS-in-JS engine without specific framework bindings.
npm install @stitches/coreTo use the framework-agnostic version of Stitches, install the @stitches/core package using your preferred package manager.
# with npm
npm install @stitches/core
# with yarn
yarn add @stitches/coreTo use the stringify utility in your project, install the @stitches/stringify package from NPM.
npm install @stitches/stringifyIf you are working in a browser environment without a bundler, you can import styled directly from a CDN like Skypack or use the global stitches object from unpkg.
<!-- Using Skypack ESM -->
<script type="module">
import { styled } from 'https://cdn.skypack.dev/@stitches/react'
</script>
<!-- Using unpkg Global Script -->
<script src="https://unpkg.com/@stitches/react/dist/index.global.js"></script>
<script>
const { styled } = stitches
</script>Use @stitches/react to use Stitches within a React application. This package includes the styled API wrapper for creating styled components.
npm install @stitches/reactStitches supports standard CSS shorthand properties to set multiple related properties at once. Common shorthand properties include:
animation: Shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.background: Sets all background style properties (color, image, origin, size, repeat, etc.).border: Sets border-width, border-style, and border-color.flex: Sets how a flex item grows or shrinks.font: Sets font-related properties like size, weight, and family.gap: Shorthand for row-gap and column-gap.grid: Shorthand for defining grid templates and tracks.margin: Shorthand for margin-top, margin-right, margin-bottom, and margin-left.padding: Shorthand for all four sides of an element's padding.text-decoration: Shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness.transition: Shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.In Stitches, a Token represents a design system value (like a color or spacing value) that can be serialized into a CSS custom property (variable).
Each token contains:
token: The name of the token.value: The raw value (number or string).scale: The category/scale the token belongs to (e.g., 'colors', 'space').prefix: An optional prefix for the CSS variable.variable: The fully serialized CSS custom property name (e.g., --prefix-scale-token).computedValue: The CSS var() representation of the token.Tokens can be converted to their CSS variable string representation using .toString().
// Conceptual representation of a Token object
const myToken: Token = {
token: 'primary',
value: '#000',
scale: 'colors',
prefix: 'app',
variable: '--app-colors-primary',
computedValue: 'var(--app-colors-primary)',
toString: () => 'var(--app-colors-primary)'
};The CSS type is the core interface used to define styles in Stitches. It is a highly flexible type that allows for several different ways to specify values for CSS properties, utilities, and theme scales:
color, margin) with their corresponding values.$ (e.g., $colors$blue500).utils configuration, you can use those utility names as keys. The type system will validate the arguments passed to these utilities.@ (e.g., @media (min-width: 400px)).number, string, or nested objects.Stitches tokens are automatically serialized into CSS custom properties using a specific naming convention. The variable property follows this pattern:
--${prefix}-${scale}-${token}
If prefix or scale are empty strings, they are omitted from the resulting variable name. The computedValue property provides the ready-to-use CSS var() string, and calling .toString() on a token instance will return this same var() string.
The CSS type is the core interface used to define styles in Stitches. It is a highly sophisticated type that intelligently merges several different styling capabilities into a single object. When you define a style object, the CSS type allows you to use:
color, margin).$colors$blue500 or $space$2).@ (e.g., @media screen or @mobile).The type is generic, allowing it to adapt based on your specific Media, Theme, ThemeMap, and Utils configurations.
The theme configuration object defines the design tokens available in your application. Stitches provides several default scales that you can override or extend:
colorsfontsfontSizesfontWeightslineHeightsletterSpacingsradii (mapped to borderRadius)shadows (mapped to boxShadow)sizes (mapped to width, height, etc.)space (mapped to margin, padding, etc.)transitionszIndicesborderWidthsborderStylesEach scale is a collection of tokens where the key is the token name and the value is a boolean | number | string.
theme: {
colors: {
brand: '#007bff',
},
space: {
small: '4px',
medium: '8px',
},
radii: {
round: '9999px',
}
}