@tenphi/tasty 3.10.0 → 3.11.1

package/docs/styles.md

@@ -10,6 +10,8 @@ The properties documented below have **custom handlers** with enhanced syntax. T
 
 Other CSS properties (e.g. `opacity`, `transform`, `cursor`, `position`, `zIndex`) are passed through with standard Tasty value parsing but no special handler logic.
 
+[`@tenphi/eslint-plugin-tasty`](getting-started.md#eslint-plugin) reports raw CSS properties that have a handler here (`prefer-shorthand-property`) and modifiers a property does not accept (`valid-directional-modifier`, `valid-radius-shape`).
+
 ---
 
 ## Recommended Props
@@ -64,7 +66,7 @@ Standard CSS display values. Handled together with `hide`, `textOverflow`, `over
 | `display` | Any CSS display value | Overridden by `hide` or multi-line `textOverflow` |
 | `hide` | `true` / `false` | Shortcut for `display: none`. Highest priority |
 | `overflow` | Any CSS overflow value | Overridden when `textOverflow` sets `hidden` |
-| `whiteSpace` | Any CSS white-space value | Overridden when `textOverflow` sets `nowrap` or `initial` |
+| `whiteSpace` | Any CSS white-space value | Explicit value wins over the `nowrap` / `initial` that `textOverflow` sets |
 
 ### `textOverflow`
 
@@ -78,7 +80,7 @@ Text truncation with optional multi-line clamping.
 | `"ellipsis / 3"` | Multi-line clamp (3 lines) with ellipsis, sets `overflow: hidden` and `white-space: initial` |
 | `"clip"` | Single-line truncation without ellipsis, sets `overflow: hidden` and `white-space: nowrap` |
 | `"clip / 2"` | Multi-line clip (2 lines), sets `overflow: hidden` and `white-space: initial` |
-| `true` or `"initial"` | Reset text-overflow to initial |
+| `"initial"` | Reset text-overflow to initial |
 
 Explicit `whiteSpace` overrides the default white-space set by `textOverflow`.
 
@@ -144,6 +146,8 @@ A group that names *no* direction keeps plain CSS shorthand order, which is unam
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
+A group with directions but no value (`padding: 'top'`) uses `1x`, the same as `padding: true`, so it follows `configure({ units })`.
+
 Individual physical props `paddingTop`, `paddingRight`, `paddingBottom`, and `paddingLeft` are supported, but `padding` with modifiers is recommended. Use `blockPadding` or `inlinePadding` for an enhanced logical-axis shorthand; native declarations such as `paddingInlineStart` remain ordinary CSS properties. See [Logical properties](#logical-properties).
 
 ### `margin`
@@ -193,12 +197,15 @@ Element width with min/max control. One, two, or three values set `min-width`, `
 | `"min 2x"` | `2x` | auto | initial |
 | `"max 100%"` | initial | auto | `100%` |
 | `"fixed 200px"` | `200px` | `200px` | `200px` |
+| `"min"` | `1x` | auto | initial |
+| `"max"` | initial | auto | `100%` |
+| `"fixed"` | `max-content` | `max-content` | `max-content` |
 
 **Keywords:** `stretch`, `max-content`, `min-content`, `fit-content`
 
 | Value | Effect |
 |-------|--------|
-| `"stretch"` | Fill available space (cross-browser) |
+| `"stretch"` | Fill the available space, margins included. Emitted with `-webkit-fill-available` and `-moz-available` fallbacks for engines without the standard keyword |
 | `true` | Reset to `auto` / `initial` / `initial` |
 | Number | Converted to `px` |
 
@@ -206,7 +213,7 @@ Separate `minWidth` and `maxWidth` props are supported and override values from
 
 ### `height`
 
-Element height. Same syntax, modifiers, and positional patterns as `width`.
+Element height. Same syntax, modifiers, keywords, and positional patterns as `width`, including `stretch`.
 
 Separate `minHeight` and `maxHeight` props are supported and override values from the `height` syntax.
 
@@ -305,9 +312,10 @@ Background color with design token support. Preferred over `backgroundColor` and
 | `"#surface #primary.10"` | Background `#surface` with `#primary.10` overlay (two colors enable smooth transitions between both) |
 | `"rgb(255 128 0)"` | CSS color value |
 | `"color-mix(in oklab, #primary 50%, #surface)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
-| `true` | Default fill color |
 
-When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. The overlay is only applied when no explicit `image` or `backgroundImage` is set.
+When two colors are provided, the first sets the background color and the second is applied as an overlay gradient layer. This enables independent CSS transitions on each color. With `image` or `backgroundImage` on the same element, the image is layered over the overlay color in one `background-image`.
+
+There is no default fill color, so `fill: true` is ignored with a development warning. Use `false` for no fill.
 
 **Related deprecated props:** `backgroundColor` (use `fill`), `background` (overrides all background props when set — avoid).
 
@@ -338,6 +346,7 @@ Text color with design token support.
 | `"#current.5"` | Current inherited color at 50% opacity |
 | `"(#primary, #secondary)"` | Fallback: use `#primary`, fall back to `#secondary` |
 | `"light-dark(#dark, #light)"` | CSS color function — see [CSS Color Functions](dsl.md#css-color-functions) |
+| `"#ddd"` | Hex literal, read as the `#ddd` token with the literal as fallback: `var(--ddd-color, #ddd)`, as in every color style |
 | `true` | `currentColor` |
 
 Also sets `$current-color` to the same color, for anything that needs the
@@ -368,7 +377,7 @@ Border shorthand with directional and multi-group support. Use **comma-separated
 
 **Syntax:** `[width] [style] [color] [directions...]` — comma-separated for multiple groups
 
-**Defaults:** width = `1bw`, style = `solid`, color = `#border`
+**Defaults:** width = `1bw`, style = `solid`, color = `#border`, which is the text color (`currentColor`) until your tokens define `#border`
 
 **Styles:** `none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`
 
@@ -388,6 +397,8 @@ Border shorthand with directional and multi-group support. Use **comma-separated
 
 Later comma-separated groups override earlier groups for conflicting directions.
 
+A directional group without a width (`'dotted left'`) uses `1bw`, the same as `border: true`, so it follows `configure({ units })`.
+
 ### `radius`
 
 Border radius with shape presets and directional modifiers.
@@ -427,13 +438,15 @@ Use these when an edge modifier would round one corner too many. Edge and corner
 | `"4px top-left"` | Top-left corner `4px`, every other corner `0` |
 | `"top bottom-right"` | Both top corners and bottom-right `1r`, bottom-left `0` |
 
+A value-less corner group (`'top-right'`, `'top bottom-right'`) uses `1r`, the same as `radius: true`, so it follows `configure({ units })`.
+
 ### `outline`
 
 Outline with inline offset support.
 
 **Syntax:** `[width] [style] [color] / [offset]`
 
-**Defaults:** width = `1ow`, style = `solid`, color = `#outline`
+**Defaults:** width = `1ow`, style = `solid`, color = `#outline`, which is the text color (`currentColor`) until your tokens define `#outline`
 
 **Styles:** Same as `border` (`none`, `dotted`, `dashed`, `solid`, etc.)
 
@@ -468,7 +481,7 @@ Multiple shadows: `shadow="1x 1x 2x #dark.20, inset 0 0 4x #dark.10"`
 
 ### `preset`
 
-Typography preset that sets font-size, line-height, letter-spacing, font-weight, font-style, and text-transform from named design tokens.
+Typography preset that sets font-size, line-height, letter-spacing, font-weight, font-style, text-transform, and font-family (unless `font` or `fontFamily` is set) from named design tokens. It also sets the `--bold-font-weight` and `--icon-size` variables that `strong` and `icon` read.
 
 **Syntax:** `name`, `name / modifier...`, or `modifier...` (shorthand)
 
@@ -480,10 +493,11 @@ Use `/` to separate the preset name from one or more space-separated modifiers.
 
 | Modifier | Effect |
 |----------|--------|
-| `strong` (or `bold`) | Sets `font-weight` to bold (from `$bold-font-weight` token) |
+| `strong` (or `bold`) | Sets `font-weight` to bold (from `$bold-font-weight` token, `700` until your tokens define it) |
 | `italic` | Sets `font-style: italic` |
 | `icon` | Sets font-size and line-height to icon size |
 | `tight` | Sets line-height equal to font-size |
+| `normal` | Sets `line-height: normal` |
 
 ```jsx
 preset="h1"                    // heading 1
@@ -503,9 +517,9 @@ Font family with design-system fallback. Preferred over `fontFamily`.
 
 | Value | Effect |
 |-------|--------|
-| `"monospace"` | Monospace font stack (from `$monospace-font` token) |
-| `true` | Default system font (from `$font` token) |
-| `"CustomFont"` | Custom font with system font fallback |
+| `"monospace"` | Monospace stack from `$font-mono`, falling back to the built-in `$font-mono-fallback` |
+| `true` | Default sans stack from `$font-sans`, falling back to `$font-sans-fallback` |
+| `"CustomFont"` | Custom font followed by the `$font-sans` stack |
 
 `fontFamily` is supported as a direct pass-through without fallback logic.
 
@@ -581,12 +595,14 @@ When easing is provided without a duration, the default timing variable is used
 | `width` | `width`, `min-width`, `max-width` |
 | `height` | `height`, `min-height`, `max-height` |
 | `gap` | `gap`, `margin` |
-| `zIndex` | `z-index` |
+| `zIndex` | `z-index` (same as writing `z-index`) |
 | `inset` | `inset`, `top`, `right`, `bottom`, `left` |
 
+Any other name passes through as a CSS property.
+
 When two entries cover the same property, an entry that names that one property wins over a group such as `theme`, in either order: `opacity 120ms ease-in-out, theme` keeps the opacity timing. Otherwise the later entry wins, as in CSS.
 
-Default timing: `$transition` (or `${name}-transition` with `$transition` fallback per semantic name). Prefer omitting the duration or using a duration token instead of repeating raw time values across components. Explicit zero can disable motion.
+Default timing: `$transition` (or `${name}-transition` with `$transition` fallback per semantic name). `$transition` is `80ms` until your tokens define it. Prefer omitting the duration or using a duration token instead of repeating raw time values across components. Explicit zero can disable motion.
 
 ```jsx
 transition="theme"
@@ -674,11 +690,11 @@ plain CSS shorthand order, like `padding`. See the [`padding` rule](#padding).
 
 | Value | Effect |
 |-------|--------|
-| `"top"` | Fade top edge, default width (`2x`), all other edges unfaded |
+| `"top"` | Fade top edge, default width `2x`, all other edges unfaded |
 | `"2x left right"` | Fade left and right edges with `2x` width, top/bottom unfaded |
 | `"3x 1x"` | All edges faded — top/bottom `3x`, left/right `1x` (CSS shorthand order) |
 | `"3x top, 1x bottom"` | Fade top with `3x` width, bottom with `1x` width |
-| `"2x #transparent #dark"` | All edges faded with `2x` width, from `#transparent` to `#dark` |
+| `"2x #clear #dark"` | All edges faded with `2x` width, from `#clear` to `#dark` |
 | `"top #a #b, bottom #c #d"` | Top fades from `#a` to `#b`, bottom fades from `#c` to `#d` |
 
 Colors are optional: first = transparent mask start, second = opaque mask end.

package/docs/tasty-static.md

@@ -8,30 +8,36 @@ Choose `tastyStatic` specifically when styles must be generated during the build
 
 ## When to Use
 
-- **Static site generation (SSG)** — Pre-render all styles at build time
-- **No-JavaScript websites** — CSS works without any JS runtime
-- **Performance-critical pages** — CSS extracted before the application renders
-- **Landing pages** — Minimal bundle size with pre-generated CSS
+- **CSS that must exist before anything renders** — static sites, landing pages, and HTML served from a CDN get one stylesheet generated at build time
+- **No React at runtime** — `tastyStatic` returns class names, so plain DOM code or any templating that sets `class` can use them; the [Programmatic API](#programmatic-api) covers frameworks Babel does not process
+- **Class-name objects instead of components** — extend them with `tastyStatic(base, styles)` and pass them wherever a `className` goes
+- **Self-contained packages** — [inject mode](#inject-mode) embeds the CSS in the JavaScript, so consumers have no stylesheet to wire up
+
+If the styles depend on props, keep `tasty()`: rendered only on the server, it also ships no styling runtime (see [Server-Side Rendering](ssr.md)).
 
 ## Requirements
 
 Build-time extraction is part of the main `@tenphi/tasty` package but requires additional peer dependencies depending on your setup:
 
-| Dependency                   | Version | Required for                                                               |
-| ---------------------------- | ------- | -------------------------------------------------------------------------- |
-| `@babel/core`                | >= 7.24 | Babel plugin (`@tenphi/tasty/babel-plugin`)                                |
-| `@babel/helper-plugin-utils` | >= 7.24 | Babel plugin                                                               |
-| `@babel/types`               | >= 7.24 | Babel plugin                                                               |
-| `jiti`                       | >= 2.6  | Next.js wrapper (`@tenphi/tasty/zero/next`) when using `configFile` option |
+| Dependency                   | Version | Required for                                         |
+| ---------------------------- | ------- | ---------------------------------------------------- |
+| `@babel/core`                | >= 7.24 | Babel plugin (`@tenphi/tasty/babel-plugin`)          |
+| `@babel/helper-plugin-utils` | >= 7.24 | Babel plugin                                         |
+| `@babel/types`               | >= 7.24 | Babel plugin                                         |
+| `jiti`                       | >= 2.6  | `configFile` only (Babel plugin and Next.js wrapper) |
+| `babel-loader`               | any     | Next.js wrapper (`@tenphi/tasty/zero/next`)          |
 
-All of these are declared as optional peer dependencies of `@tenphi/tasty`. Install only what your setup requires:
+The Babel packages and `jiti` are optional peer dependencies of `@tenphi/tasty`; `babel-loader` is resolved from your project. `jiti` is loaded only to read a `configFile`, so a setup that passes `config` directly does not need it; without it, `configFile` fails with an error that says to install it. Install what your setup requires:
 
 ```bash
-# For any Babel-based setup (Vite, custom Babel config, etc.)
+# Any Babel-based setup (Vite, custom Babel config, etc.)
 pnpm add -D @babel/core @babel/helper-plugin-utils @babel/types
 
-# For Next.js with TypeScript config file
-pnpm add -D @babel/core @babel/helper-plugin-utils @babel/types jiti
+# Next.js
+pnpm add -D @babel/core @babel/helper-plugin-utils @babel/types babel-loader
+
+# Either, with configFile
+pnpm add -D jiti
 ```
 
 ---
@@ -52,13 +58,15 @@ const button = tastyStatic({
   radius: '1r',
 });
 
-// Use in JSX - works via toString() coercion
-<button className={button}>Click me</button>
+// Use in JSX
+<button className={button.className}>Click me</button>;
 
-// Or access className explicitly
-<button className={button.className}>Click me</button>
+// toString() returns the class name, for template strings and plain JS
+element.className = `${button} is-active`;
 ```
 
+In TSX, pass `button.className`: React types `className` as `string`, so passing the `StaticStyle` object fails type-checking even though it works at runtime.
+
 ---
 
 ## API Reference
@@ -168,7 +176,7 @@ module.exports = {
 | -------------------------- | ------------------------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `output`                   | `string`                                         | `'tasty.css'` | Path for generated CSS file                                                                                                                                                                      |
 | `mode`                     | `'file' \| 'inject'`                             | `'file'`      | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS (see [Inject Mode](#inject-mode))                                                                                                |
-| `configFile`               | `string`                                         | —             | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack.                                             |
+| `configFile`               | `string`                                         | —             | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack. Loaded with the optional `jiti` peer.       |
 | `config`                   | `TastyZeroConfig \| () => TastyZeroConfig`       | `{}`          | Inline config object or factory function. Takes precedence over `configFile`.                                                                                                                    |
 | `configDeps`               | `string[]`                                       | `[]`          | Absolute file paths that affect config (for cache invalidation)                                                                                                                                  |
 | `injectImport`             | `boolean`                                        | `true`        | Replace `@tenphi/tasty/static` imports with an import of the generated CSS file. Set to `false` to manage CSS imports manually.                                                                  |
@@ -180,7 +188,8 @@ module.exports = {
 | `config.keyframes`         | `Record<string, KeyframesSteps>`                 | —             | Global `@keyframes` definitions available to all `tastyStatic` calls                                                                                                                             |
 | `config.fontFaces`         | `Record<string, FontFaceInput>`                  | —             | Global `@font-face` definitions                                                                                                                                                                  |
 | `config.counterStyles`     | `Record<string, CounterStyleDescriptors>`        | —             | Global `@counter-style` definitions                                                                                                                                                              |
-| `config.units`             | `Record<string, string \| UnitHandler>`          | —             | Custom units for the style parser (merged with built-ins). E.g. `{ em: 'em', vw: 'vw' }`                                                                                                         |
+| `config.properties`        | `Record<string, PropertyDefinition>`             | —             | Global `@property` definitions, written with Tasty's [default properties](dsl.md#default-properties)                                                                                             |
+| `config.units`             | `Record<string, string \| UnitHandler>`          | —             | Custom units for the style parser (merged with built-ins). E.g. `{ u: 'var(--u)' }` makes `2u` compile to `calc(2 * var(--u))`. Native CSS units need no entry                                   |
 | `config.functions`         | `Record<string, FunctionDefinition \| Function>` | —             | Custom functions (merged). Bare keys → parse functions; `$$name` keys → declarative CSS `@function` definitions                                                                                  |
 | `config.polyfills`         | `{ functions?: boolean }`                        | `{}`          | Opt-in polyfills. `functions: true` inlines `@function` calls into plain CSS at build time                                                                                                       |
 | `config.plugins`           | `TastyPlugin[]`                                  | —             | Plugins that extend tasty with custom functions, units, states, and handlers                                                                                                                     |
@@ -244,7 +253,7 @@ const card = tastyStatic({
   color: '#text',
 });
 
-<div className={card}>Styled card</div>;
+<div className={card.className}>Styled card</div>;
 ```
 
 ---
@@ -281,12 +290,12 @@ export default withTastyZero({
 
 Starting with Next.js 16, Turbopack is the default bundler. `withTastyZero` supports it out of the box by injecting `turbopack.rules` with `babel-loader` and JSON-serializable options.
 
-The `configFile` option is key for Turbopack — it passes a file path (JSON-serializable) instead of a function, and the Babel plugin loads the config internally via jiti.
+The `configFile` option is key for Turbopack — it passes a file path (JSON-serializable) instead of a function, and the Babel plugin loads the config internally via `jiti`, which must be installed.
 
-**Requirements**: `babel-loader` must be installed in your project:
+**Requirements**: `babel-loader` must be installed in your project (see [Requirements](#requirements)):
 
 ```bash
-pnpm add babel-loader
+pnpm add -D babel-loader
 ```
 
 ### CSS Injection
@@ -324,42 +333,72 @@ extractStylesWithChunks({ display: 'flex', gap: '1u' });
 // → [{ className: 'ts…', css: '.ts….ts… { … }' }]
 ```
 
-`configure()` takes the same options as the Babel plugin's `config` (see [Plugin Options](#plugin-options)) and replaces the previous configuration on each call; `resetConfig()` returns to the defaults. Options that shape the extracted rules apply — `states`, `units`, parse `functions`, `handlers`, `replaceTokens`, `recipes`, `plugins`, `namePrefix`. Definitions that become at-rules or global CSS of their own are not emitted: `tokens`, `globalStyles`, `fontFaces`, `counterStyles`, `properties` and `$$` `@function` definitions. Render tokens and global styles with `extractStylesForSelector(':root', tokens)` and `extractStylesForSelector(selector, styles)`.
+`configure()` takes the same options as the Babel plugin's `config` (see [Plugin Options](#plugin-options)) and replaces the previous configuration on each call; `resetConfig()` returns to the defaults. Options that shape the extracted rules apply — `states`, `units`, parse `functions`, `handlers`, `replaceTokens`, `recipes`, `plugins`, `namePrefix`. Definitions that become at-rules or global CSS of their own are not emitted with the rules: `tokens`, `globalStyles`, `fontFaces`, `counterStyles`, `properties` and `$$` `@function` definitions. Render tokens and global styles with `extractStylesForSelector(':root', tokens)` and `extractStylesForSelector(selector, styles)`.
+
+`extractConfigProperties()` returns the `@property` rules the Babel plugin writes at the top of its output: Tasty's [default set](dsl.md#default-properties) (`#border`, `#outline`, `$gap`, `$radius`, `$transition`, …) overlaid with the configured `properties`, or with the `properties` map you pass it. Emit them once per stylesheet. Style handlers read several of these tokens with no fallback of their own (`border: true` reads `#border`, `transition` reads `$transition`), so without them those declarations resolve to nothing.
 
 The configuration is process-wide and shared with the Babel plugin and the runtime `configure()` from `@tenphi/tasty`. The extractors re-apply their own configuration when the Babel plugin replaced it, but not after a runtime `configure()` — don't mix the runtime and build-time configuration in one process.
 
 `extractStylesForSelector()` output starts with the `@keyframes` its rules animate — local `@keyframes` and configured `keyframes` — under hashed names the `animation` declarations are rewritten to. `extractStylesWithChunks()` returns class rules only.
 
+To write the results to a file the way the Babel plugin does, use `createCSSWriter()`. It deduplicates blocks by key and prepends the generated-file header:
+
+```ts
+import {
+  createCSSWriter,
+  extractConfigProperties,
+  extractStylesWithChunks,
+} from '@tenphi/tasty/zero';
+
+const writer = createCSSWriter('dist/tasty.css', { devMode: true });
+
+for (const prop of extractConfigProperties()) {
+  writer.add(`@property:${prop.name}`, prop.css);
+}
+
+for (const chunk of extractStylesWithChunks({ display: 'flex', gap: '1u' })) {
+  writer.add(chunk.className, chunk.css, 'src/card.ts'); // source is a devMode comment
+}
+
+writer.write(); // also: has(key), getCSS(), clear(), getOutputPath()
+```
+
 ---
 
 ## Vite Integration
 
+`@vitejs/plugin-react` 6 no longer runs Babel; add it with `@rolldown/plugin-babel` (`pnpm add -D @rolldown/plugin-babel`):
+
 ```typescript
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: [
-          [
-            '@tenphi/tasty/babel-plugin',
-            {
-              output: 'public/tasty.css',
-              config: {
-                states: { '@mobile': '@media(w < 768px)' },
-              },
+    react(),
+    babel({
+      plugins: [
+        [
+          '@tenphi/tasty/babel-plugin',
+          {
+            output: 'src/tasty.css',
+            config: {
+              states: { '@mobile': '@media(w < 768px)' },
             },
-          ],
+          },
         ],
-      },
+      ],
     }),
   ],
 });
 ```
 
+With `@vitejs/plugin-react` 5 or older, pass the same `plugins` array to `react({ babel: { plugins } })` instead.
+
+Keep `output` outside `public/`: the plugin replaces each `@tenphi/tasty/static` import with an import of the generated file, and Vite does not let JavaScript import files from `public/`. Vite then bundles the CSS like any other stylesheet.
+
 ---
 
 ## Build Transformation
@@ -377,44 +416,67 @@ const button = tastyStatic({
 
 tastyStatic('.heading', { preset: 'h1' });
 
-export const Button = () => <button className={button}>Click</button>;
+export const Button = () => <button className={button.className}>Click</button>;
 ```
 
 ### After (Production Build)
 
 ```tsx
+import './tasty.css';
+
 const button = {
-  className: 'ts3f2a1b ts8c4d2e',
+  className: 'ts3f783b ts070801',
   styles: { padding: '2x 4x', fill: '#purple', color: '#white' },
   toString() {
     return this.className;
   },
 };
 
-export const Button = () => <button className={button}>Click</button>;
+export const Button = () => <button className={button.className}>Click</button>;
 ```
 
+The `@tenphi/tasty/static` import becomes an import of the generated file (relative to the source file), and the selector-mode call is removed.
+
 ### Generated CSS (tasty.css)
 
 ```css
 /* Generated by @tenphi/tasty/zero - DO NOT EDIT */
 
-.ts3f2a1b.ts3f2a1b {
-  padding: 16px 32px;
+@property --tasty-second-fill-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
+}
+
+@property --current-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: currentcolor;
 }
 
-.ts8c4d2e.ts8c4d2e {
-  background: #9370db;
-  color: #fff;
+/* …the rest of Tasty's default @property rules (--white-color, --border-color, --gap, --transition, …), then config.properties */
+
+.ts3f783b.ts3f783b {
+  color: var(--white-color);
+  --current-color: var(--white-color);
 }
 
-.heading.heading {
-  font-size: 2.5rem;
-  font-weight: 700;
-  line-height: 1.2;
+.ts3f783b.ts3f783b {
+  background-color: var(--purple-color);
+}
+
+.ts070801.ts070801 {
+  padding: 16px 32px;
+}
+
+.heading {
+  font-size: var(--h1-font-size, var(--default-font-size));
+  /* …line-height, letter-spacing, font-weight, and the rest of the h1 preset */
 }
 ```
 
+The file starts with Tasty's [default `@property` rules](dsl.md#default-properties) and your `config.properties`, written once. Styles are split into chunks (here appearance and spacing), each with its own class. Color tokens compile to custom properties: `#purple` becomes `var(--purple-color)`. Define it in `config.tokens` and the plugin writes it to `:root` at the top of the same file. Units are literal (`2x` is `16px`). Selector-mode rules use the selector as written, without the doubled specificity of class rules.
+
 ---
 
 ## Inject Mode
@@ -485,22 +547,29 @@ tastyStatic('.heading', { preset: 'h1' });
 ```tsx
 import { injectCSS as _$i } from '@tenphi/tasty/static/inject';
 
+_$i(
+  '@property',
+  '@property --tasty-second-fill-color { … }\n@property --current-color { … }\n…',
+);
+
 const button =
   (_$i(
-    'ts3f2a1b ts8c4d2e',
-    '.ts3f2a1b.ts3f2a1b{padding:16px 32px}\n.ts8c4d2e.ts8c4d2e{background:#9370db}',
+    'tsa903d6 ts070801',
+    '.tsa903d6.tsa903d6 { background-color: var(--purple-color); }\n.ts070801.ts070801 { padding: 16px 32px; }',
   ),
   {
-    className: 'ts3f2a1b ts8c4d2e',
+    className: 'tsa903d6 ts070801',
     styles: { padding: '2x 4x', fill: '#purple' },
     toString() {
       return this.className;
     },
   });
 
-_$i('.heading', '.heading{font-size:2.5rem;font-weight:700;line-height:1.2}');
+_$i('.heading', '.heading { font-size: var(--h1-font-size, …); … }');
 ```
 
+Each file that calls `tastyStatic()` starts by injecting Tasty's default `@property` rules and your `config.properties` under the `@property` id. `injectCSS()` skips an id it has already injected, so the page gets them once.
+
 ### Dev Mode / HMR
 
 Class names are content-hashed (`ts` + MD5). When styles change, a new hash produces a new `_$i` call that injects fresh CSS. The injector deduplicates by id, so unchanged styles are skipped. Old CSS stays in the DOM but is harmless since no elements reference those class names.
@@ -558,7 +627,7 @@ const card = tastyStatic({
 
 ## Extending Style Types (TypeScript)
 
-If you add custom style properties, use module augmentation so `tastyStatic` recognizes them too. See [Extending Style Types](configuration.md#extending-style-types-typescript) in the configuration docs.
+If you add custom style properties, use module augmentation so `tastyStatic` recognizes them too. See [TypeScript](configuration.md#typescript) in the configuration docs.
 
 ---
 
@@ -580,10 +649,12 @@ const card = tastyStatic({
 });
 
 <div
-  className={card}
-  style={{
-    '--card-bg': isActive ? 'var(--purple-color)' : 'var(--white-color)',
-  }}
+  className={card.className}
+  style={
+    {
+      '--card-bg': isActive ? 'var(--purple-color)' : 'var(--white-color)',
+    } as React.CSSProperties
+  }
 />;
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/tasty",
-  "version": "3.10.0",
+  "version": "3.11.1",
   "description": "A design-system-integrated styling system and DSL for concise, state-aware UI styling",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,6 +62,11 @@
       "import": "./dist/ssr/astro.js",
       "default": "./dist/ssr/astro.js"
     },
+    "./ssr/client": {
+      "types": "./dist/ssr/client.d.ts",
+      "import": "./dist/ssr/client.js",
+      "default": "./dist/ssr/client.js"
+    },
     "./ssr/astro-client": {
       "types": "./dist/ssr/astro-client.d.ts",
       "import": "./dist/ssr/astro-client.js",
@@ -169,7 +174,7 @@
     "@eslint/js": "^10.0.1",
     "@size-limit/esbuild": "^14.0.0",
     "@size-limit/file": "^14.0.0",
-    "@tenphi/eslint-plugin-tasty": "^1.1.0",
+    "@tenphi/eslint-plugin-tasty": "^1.5.1",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/babel__core": "^7.20.5",
@@ -200,13 +205,13 @@
       "name": "main (import *)",
       "path": "dist/index.js",
       "import": "*",
-      "limit": "58.54 kB"
+      "limit": "59.65 kB"
     },
     {
       "name": "main (tasty)",
       "path": "dist/index.js",
       "import": "{ tasty }",
-      "limit": "51.51 kB"
+      "limit": "52.67 kB"
     },
     {
       "name": "main (StyleParser)",
@@ -224,7 +229,7 @@
       "name": "main (useRawCSS)",
       "path": "dist/index.js",
       "import": "{ useRawCSS }",
-      "limit": "31.2 kB"
+      "limit": "32.48 kB"
     },
     {
       "name": "core (import *)",
@@ -247,7 +252,7 @@
         "path",
         "crypto"
       ],
-      "limit": "37.98 kB"
+      "limit": "39.13 kB"
     },
     {
       "name": "babel-plugin",
@@ -256,9 +261,11 @@
       "ignore": [
         "fs",
         "path",
-        "crypto"
+        "crypto",
+        "node:module",
+        "node:path"
       ],
-      "limit": "42.44 kB"
+      "limit": "43.55 kB"
     },
     {
       "name": "astro client",
@@ -266,6 +273,12 @@
       "import": "*",
       "limit": "0.5 kB"
     },
+    {
+      "name": "ssr client",
+      "path": "dist/ssr/client.js",
+      "import": "{ hydrateTastyClasses }",
+      "limit": "0.5 kB"
+    },
     {
       "name": "Next.js config",
       "path": "dist/ssr/next-config.js",
@@ -276,7 +289,7 @@
         "node:module",
         "node:path"
       ],
-      "limit": "39.13 kB"
+      "limit": "40.18 kB"
     }
   ],
   "scripts": {
@@ -298,6 +311,7 @@
     "bench:overhead": "vitest bench --config vitest.production-browser-bench.config.ts src/tasty-overhead.bench.tsx",
     "bench:injection": "vitest bench --config vitest.production-browser-bench.config.ts src/tasty-injection.bench.ts",
     "bench:interaction": "vitest bench --config vitest.production-browser-bench.config.ts src/tasty-interaction.bench.tsx",
+    "bench:tree": "vitest bench --config vitest.production-browser-bench.config.ts src/tasty-tree.bench.tsx",
     "bench:cold-start": "node scripts/cold-start/index.mjs",
     "changeset": "changeset",
     "version": "changeset version",

package/dist/chunks/async-storage-CG5HnUT5.js

@@ -1,20 +0,0 @@
-import { AsyncLocalStorage } from "node:async_hooks";
-//#region src/ssr/async-storage.ts
-const ALS_KEY = "__tasty_ssr_als__";
-function getSharedStorage() {
-	const g = globalThis;
-	if (!g[ALS_KEY]) g[ALS_KEY] = new AsyncLocalStorage();
-	return g[ALS_KEY];
-}
-function runWithCollector(collector, fn) {
-	return getSharedStorage().run(collector, fn);
-}
-function getSSRCollector() {
-	const storage = getSharedStorage();
-	if (typeof storage?.getStore !== "function") return null;
-	return storage.getStore() ?? null;
-}
-//#endregion
-export { runWithCollector as n, getSSRCollector as t };
-
-//# sourceMappingURL=async-storage-CG5HnUT5.js.map