@menapo/vicss 1.0.0 → 1.1.0

package/README.md

@@ -2,16 +2,18 @@
 
 Typed, design-system-first atomic CSS for Vite.
 
-vicss is a Vite 8 plugin and a runtime of under half a kilobyte (about 0.8 KB with recipes). You describe your design system once, in a typed config: tokens, semantic tokens, modes, conditions. You write styles as typed objects that use that system, next to your components. At build time the plugin checks every value, compiles the styles to atomic CSS in one order-proof stylesheet, and replaces each style with a constant that names its classes, short hashes in production. Overrides merge by property and condition, so `sx(component, props.style)` does what you expect without tailwind-merge, `!important` or load-order tricks. Recipes give you tailwind-variants' API (variants, compound variants, slots, `extends`) over style objects, with responsive variants.
+vicss is a Vite 8 plugin and a runtime of about half a kilobyte (about 0.8 KB with recipes). You describe your design system once, in a typed config: tokens, semantic tokens, modes, conditions. You write styles as typed objects that use that system, next to your components. At build time the plugin checks every value, compiles the styles to atomic CSS in one order-proof stylesheet, and replaces each style with a constant that names its classes, short hashes in production. One style is an element's class (`class={card}`) or its inline style (`style={card}`), in every framework. Overrides merge by property and condition, so `sx(component, props.style)` does what you expect without tailwind-merge, `!important` or load-order tricks. Recipes give you tailwind-variants' API (variants, compound variants, slots, `extends`) over style objects, with responsive variants.
 
 ```tsx
 import { css, sx } from "@menapo/vicss";
 
 const card = css({ padding: { base: 4, _md: 6 }, borderRadius: "lg", background: "surface" });
 
-<section {...sx(card, props.style)}>…</section>;
+<section className={card}>…</section>; // class={card} outside React and Preact
 // dev: <section class="bg_surface md:p_6 p_4 r_lg">
 // build: <section class="v1x7m v8q1z vk2f9 v0c3d">
+
+<section {...sx(card, props.style)}>…</section>; // several styles, or a caller's override
 ```
 
 Requires Vite 8.3 or newer and Node 22.18 or newer.
@@ -20,6 +22,7 @@ Requires Vite 8.3 or newer and Node 22.18 or newer.
 
 - [Install](#install)
 - [A two-minute tour](#a-two-minute-tour)
+- [One style: `class=` and `style=`](#one-style-class-and-style)
 - [Principles](#principles)
 - [Frameworks](#frameworks)
 - [Critical CSS for prerendered pages](#critical-css-for-prerendered-pages)
@@ -135,10 +138,38 @@ const title = css({ textStyle: "heading", color: "text" });
 
 Property names are CSS, in camelCase. Each value is checked against the scale of its property: `background` takes a color, `gap` a spacing step, `borderRadius` a radius. CSS keywords (`auto`, `100%`, `fit-content`) and `0` always work. A typo is a build error with a code frame, which the `vicss/valid-styles` lint rule reports in the editor; under `strict: "tokens"` it is a TypeScript error too.
 
-`css()` compiles to a constant, an object from each property and condition the style sets to its class (`{ p: "p_4", "md:p": "md:p_6" }`), so you can write it anywhere, including inside a component. It is not a class string: an element takes it through `sx()`. Its argument must be known at build time; a value only known at runtime goes through a function style (below). The build fails, and says why, rather than drop a style.
+`css()` compiles to a constant, an object from each property and condition the style sets to its class (`{ p: "p_4", "md:p": "md:p_6" }`), so you can write it anywhere, including inside a component. Read as a string, it is its class attribute, so one style is an element's class as it is, `className={title}` (`class={title}` elsewhere), and `style={…}` takes one too ([below](#one-style-class-and-style)); several styles go through `sx()`. Its argument must be known at build time; a value only known at runtime goes through a function style (below). The build fails, and says why, rather than drop a style.
 
 `css(style, { name: "card" })` adds the class `card` to the style, as it is, for tests, theming hooks and devtools.
 
+### One style: `class=` and `style=`
+
+One style → `class={card}`; several styles or overrides → `sx(a, b)`.
+
+```tsx
+import { css } from "@menapo/vicss";
+
+const card = css({ padding: 4, background: "surface" });
+
+<div className={card} />; // class={card} outside React and Preact
+<div style={css({ padding: 4, color: "text" })} />; // style="padding: calc(var(--spacing) * 4); color: var(--color-text)"
+<div style={css({ color: "text", background: { base: "surface", _hover: "accent" } })} />;
+// style="color: var(--color-text)" class="bg_surface hover:bg_accent"
+```
+
+- **As a class**, a compiled style reads as its class attribute wherever a string is read: `class={card}`, `className={card}`, `` `<p class="${card}">` ``, `element.className = card`, `String(card)`. A recipe's result and a marker are styles too. Vue's `:class` and Svelte's `class` read an object as a map of classes, so the plugin points every compiled component's class calls at a version that takes a style.
+- **As a style**, the plugin writes `style={css({ … })}`, and `style={card}` where `card` is a style it can see (a constant in the module, or imported from one it compiles), as a literal inline style: tokens as their `var(--…)`, an object in React, Preact and Solid, a string in Vue, Svelte, Astro and templates. An inline declaration beats every class, so it cannot carry conditions: a property with one (`_hover`, `_md`, `_dark`, a marker's state) goes to classes whole, its base value included, with the shorthands and longhands around it, since an inline `padding` would beat a hovered `paddingTop`. Those classes join the element's own `class` (`className`), static or dynamic, exactly as `sx(own, style)` merges them, or become its class when it has none. A palette, a theme and a `name` stay classes.
+- **A `style=` value the plugin cannot see**, such as a prop, is the framework's own; in dev, a compiled style there fails where it renders, with the fix: `class={style}`, or `sx()`.
+- A function style (runtime values) and several styles go through `sx()`, whose `style` sets the custom properties.
+
+| Framework     | One style as a class                             | As a style                                     |
+| ------------- | ------------------------------------------------ | ---------------------------------------------- |
+| React, Preact | `className={card}`                               | `style={card}`: `{ paddingTop: "…" }`          |
+| Solid         | `class={card}`                                   | `style={card}`: `{ "padding-top": "…" }`       |
+| Vue           | `:class="card"`                                  | `:style="card"`: `"padding-top:…"`             |
+| Svelte, Astro | `class={card}`                                   | `style={card}`: `"padding-top:…"`              |
+| Plain JS      | `` `<p class="${card}">` ``, `.className = card` | `` `<p style="${card}">` ``: `"padding-top:…"` |
+
 ### Applying and merging: `sx()`
 
 ```tsx
@@ -309,13 +340,13 @@ import { css, group, peer, sx, theme, type Token } from "@menapo/vicss";
 // A subtree with other token values: one class, no re-render, no provider.
 // Its token names and values are checked by the build (the editor completes the scales).
 const marketing = theme({ colors: { accent: "{colors.red.600}" }, radii: { md: "0.75rem" } });
-<section {...sx(marketing)}>…</section>;
+<section className={marketing}>…</section>;
 
 // Relations to an ancestor or a sibling, typed: a misspelt marker is an error.
 const row = group();
 const icon = css({ opacity: { base: 0, [row.hover]: 1 } });
-<li {...sx(row)}>
-  <svg {...sx(icon)} />
+<li className={row}>
+  <svg className={icon} />
 </li>;
 
 const toggle = peer();
@@ -342,16 +373,16 @@ export default defineConfig({ presets: [tailwind], palettes: { default: "gray" }
 ```
 
 ```tsx
-import { css, recipe, sx } from "@menapo/vicss";
+import { css, recipe } from "@menapo/vicss";
 
 const button = recipe({
   base: { background: { base: "palette.600", _hover: "palette.700" }, color: "white" },
   variants: { tone: { danger: { colorPalette: "red" } } },
 });
 
-<section {...sx(css({ colorPalette: "blue" }))}>
-  <button {...sx(button())}>Blue, from the section</button>
-  <button {...sx(button({ tone: "danger" }))}>Red</button>
+<section className={css({ colorPalette: "blue" })}>
+  <button className={button()}>Blue, from the section</button>
+  <button className={button({ tone: "danger" })}>Red</button>
 </section>;
 ```
 
@@ -411,7 +442,7 @@ The plugin knows each file's framework from its extension and, for JSX, from its
 
 `vicss.d.ts` registers the project's framework, so `sx()`'s result is typed with that shape (`SxAttributes<"vue">` names any one of them). `.vue`, `.svelte` and `.astro` files are compiled after their framework's compiler; write styles in the component's script (or Astro's frontmatter) and use them in the template, since a style written in the template fails the build with a hint to move it. In dev, `sx()` adds `data-vx-src="src/Card.vue:12"`, the component's own line, in every framework's shape.
 
-`style` is present only when a runtime value sets a custom property. Spread the result (`{...sx(a)}` in JSX, `v-bind="sx(a)"` in Vue, `{...sx(a)}` in Svelte and Astro), or read the class where you need a string:
+One style needs no `sx()`: `class={card}`, `style={card}` ([One style](#one-style-class-and-style)). `sx()`'s `style` is present only when a runtime value sets a custom property. Spread the result (`{...sx(a)}` in JSX, `v-bind="sx(a)"` in Vue, `{...sx(a)}` in Svelte and Astro), or read the class where you need a string:
 
 ```ts
 element.className = sx(card, isActive && active).class; // .className in React and Preact
@@ -506,28 +537,28 @@ vicss({
 
 ## Runtime API
 
-Everything below comes from `@menapo/vicss`. In an app, the plugin replaces every function except `sx` and recipe calls with constants; only those ship to the browser. In React and Preact that is 443 B gzip for `sx`, 782 B with the recipe resolver and 1,017 B with responsive recipes (Solid and Vue: the same). Svelte, Astro and vanilla JS get `style` as a string, which costs more: 486, 822 and 1,054 B. Figures as the size tests measure them; see [the benchmarks](./docs/benchmarks.md#2-runtime-bytes).
-
-| Function                | Returns                                                                           | Notes                                                                                                                                                                                                                  |
-| ----------------------- | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `css(style)`            | `Style`: an object from merge id to class (`{ p: "p_4" }`)                        | The argument must be static; apply it with `sx()`                                                                                                                                                                      |
-| `css(style, { name })`  | `Style`, with the class `name` as it is                                           | A stable class for tests, theming hooks and devtools                                                                                                                                                                   |
-| `css((…args) => style)` | `(…args) => DynamicStyle`                                                         | A runtime value becomes a custom property the class reads                                                                                                                                                              |
-| `sx(...styles)`         | The attributes of your framework (see [Frameworks](#frameworks))                  | Takes styles, recipe results, class names of your own (kept as they are, first), `false`/`null`/`undefined` and arrays; later wins per property and condition, and one theme and one flattened recipe base per element |
-| `recipe(definition)`    | `Recipe`: `(props?) => Style`, or an object of styles with slots                  | Plus `variantKeys`, `splitProps(props)`, `schema`; `flatten: true` compiles the base to one class ([Flattened bases](#flattened-bases))                                                                                |
-| `theme(overrides)`      | `Style`: a class that overrides token values for a subtree                        | Token names and values are checked by the build, with a suggestion; `sx()` keeps the last theme on an element, and warns when it drops one                                                                             |
-| `group(name?)`          | `Marker`: a style whose states are condition keys for descendants (`[row.hover]`) | Apply it with `sx(row)`                                                                                                                                                                                                |
-| `peer(name?)`           | `Marker`: the same, for following siblings (`[toggle.checked]`)                   |                                                                                                                                                                                                                        |
-| `keyframes(frames)`     | `string`: the generated animation name                                            | `css({ animationName: fadeIn })`                                                                                                                                                                                       |
-| `token(path)`           | `string`: `var(--…)`                                                              | `token("colors.accent")` is `"var(--color-accent)"`, for inline styles and third-party APIs                                                                                                                            |
-
-| Type                      | Is                                                                                                                                                                                                                             |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Style<Props?>`           | A compiled style, not a class string (`className={css(…)}` is a type error: spread `{...sx(style)}`). `Style<"margin" \| "width">` limits what a caller may pass: `type CardProps = { style?: Style<"margin" \| "maxWidth"> }` |
-| `Token<Scale>`            | A token path of one scale: `Token<"colors">` is `"accent" \| "blue.600" \| …`                                                                                                                                                  |
-| `Palette`                 | A palette name, for a runtime `colorPalette`: `css((tone: Palette) => ({ colorPalette: tone }))`                                                                                                                               |
-| `Variants<typeof recipe>` | A recipe's props: `{ intent?: "primary" \| "ghost"; size?: "sm" \| "md" \| { base?, _md?, … }; block?: boolean }`                                                                                                              |
-| `SxAttributes<F?>`        | What `sx()` returns: in the framework `vicss.d.ts` registers, or in framework `F` (`SxAttributes<"svelte">`)                                                                                                                   |
+Everything below comes from `@menapo/vicss`. In an app, the plugin replaces every function except `sx` and recipe calls with constants; only those ship to the browser. In React and Preact that is 496 B gzip for `sx` and the prototype every compiled style shares (its `toString`), 835 B with the recipe resolver and 1,071 B with responsive recipes (Solid and Vue: the same). Svelte, Astro and vanilla JS get `style` as a string, which costs more: 536, 876 and 1,109 B. Figures as the size tests measure them; see [the benchmarks](./docs/benchmarks.md#2-runtime-bytes).
+
+| Function                | Returns                                                                                     | Notes                                                                                                                                                                                                                  |
+| ----------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `css(style)`            | `Style`: an object from merge id to class (`{ p: "p_4" }`), its class attribute as a string | The argument must be static; one style is `class={style}` or `style={style}`, several go through `sx()`                                                                                                                |
+| `css(style, { name })`  | `Style`, with the class `name` as it is                                                     | A stable class for tests, theming hooks and devtools                                                                                                                                                                   |
+| `css((…args) => style)` | `(…args) => DynamicStyle`                                                                   | A runtime value becomes a custom property the class reads                                                                                                                                                              |
+| `sx(...styles)`         | The attributes of your framework (see [Frameworks](#frameworks))                            | Takes styles, recipe results, class names of your own (kept as they are, first), `false`/`null`/`undefined` and arrays; later wins per property and condition, and one theme and one flattened recipe base per element |
+| `recipe(definition)`    | `Recipe`: `(props?) => Style`, or an object of styles with slots                            | Plus `variantKeys`, `splitProps(props)`, `schema`; `flatten: true` compiles the base to one class ([Flattened bases](#flattened-bases))                                                                                |
+| `theme(overrides)`      | `Style`: a class that overrides token values for a subtree                                  | Token names and values are checked by the build, with a suggestion; `sx()` keeps the last theme on an element, and warns when it drops one                                                                             |
+| `group(name?)`          | `Marker`: a style whose states are condition keys for descendants (`[row.hover]`)           | Apply it with `sx(row)`                                                                                                                                                                                                |
+| `peer(name?)`           | `Marker`: the same, for following siblings (`[toggle.checked]`)                             |                                                                                                                                                                                                                        |
+| `keyframes(frames)`     | `string`: the generated animation name                                                      | `css({ animationName: fadeIn })`                                                                                                                                                                                       |
+| `token(path)`           | `string`: `var(--…)`                                                                        | `token("colors.accent")` is `"var(--color-accent)"`, for inline styles and third-party APIs                                                                                                                            |
+
+| Type                      | Is                                                                                                                                                                                                                                                                                                            |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Style<Props?>`           | A compiled style, typed as a string that records what it sets, so `className={css(…)}` and `style={css(…)}` type-check (at runtime it is an object whose `toString` is its classes). `Style<"margin" \| "width">` limits what a caller may pass: `type CardProps = { style?: Style<"margin" \| "maxWidth"> }` |
+| `Token<Scale>`            | A token path of one scale: `Token<"colors">` is `"accent" \| "blue.600" \| …`                                                                                                                                                                                                                                 |
+| `Palette`                 | A palette name, for a runtime `colorPalette`: `css((tone: Palette) => ({ colorPalette: tone }))`                                                                                                                                                                                                              |
+| `Variants<typeof recipe>` | A recipe's props: `{ intent?: "primary" \| "ghost"; size?: "sm" \| "md" \| { base?, _md?, … }; block?: boolean }`                                                                                                                                                                                             |
+| `SxAttributes<F?>`        | What `sx()` returns: in the framework `vicss.d.ts` registers, or in framework `F` (`SxAttributes<"svelte">`)                                                                                                                                                                                                  |
 
 The precise types come from `vicss.d.ts`, which the plugin and `vicss types` write from your config; commit it or generate it in CI. It leaves private tokens out of `Token<Scale>` and the style types.
 
@@ -586,6 +617,10 @@ The entry's default export is the plugin (`meta`, `rules`, `configs.recommended`
 
 - **A nested theme cannot re-point an outer theme's alias.** A custom property inherits its resolved value, so a nested `theme()` that overrides `colors.blue.600` updates the config's aliases of it, not an alias the outer theme set (a CSS limit; [Design tokens](./docs/guides/design-tokens.md)).
 - **One theme and one palette per element.** `sx()` keeps the last theme it is given (and warns); a palette is chosen per element, so one declaration cannot mix two.
+- **`style=` is rewritten where the plugin reads it.** JSX attributes, Vue's vnode props and server template, Svelte's setters and server template, Astro's template and plain template literals (`` `<p style="${card}">` ``). A style set another way (a spread, `v-bind="attrs"`, `element.style.cssText`) is the framework's, and kit's own templates (`@menapo/markup`, `@menapo/og`) take a style object of literal CSS, so they are left alone. In a plain HTML string, quote the attribute: an inline style holds spaces.
+- **A class list that holds a style is `sx()`'s job.** Vue's `:class="[card, extra]"`, Svelte's `class={[card, extra]}` and Astro's `class:list` read the objects inside as maps of classes; one style goes in as it is (`:class="card"`), several through `sx()`.
+- **An element's own class beside a split `style=` is what `sx()` takes:** a string, a style or an array of them. Vue's and Svelte's object form (`{ active: isOpen }`) there reads as a style; write `sx()` or a string.
+- **A library compiled by vicss 1.0** ships plain objects: `sx()` takes them as before, and `class={…}` needs the library built with 1.1.
 - **Folding happens only in modules the plugin compiles.** An `sx()` call anywhere else runs at runtime, and `css()` and `recipe()` work only in compiled modules.
 - **A library's recipe calls are not folded in the app.** The library ships its compiled table, which the resolver runs at runtime.
 - **Templates are invisible to the CLI.** `vicss check` and the lint rules read the scripts of `.vue`, `.svelte` and `.astro` files; a style written in a template is checked by the build alone.

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
-import { D as layerName, E as flatLayerName, Q as isPaletteAtom, St as isArbitrary, _t as VicssError, c as printAtoms, d as printTokens, g as normalizeStyle, s as paletteProblem, t as baseTokens, y as resolveSystem, yt as compareStrings } from "./print-Ds6fkgio.js";
-import { u as baseAtoms } from "./theme-C-0LpsJx.js";
-import { _ as isSfc, c as moduleLoader, g as frameworkOf, h as extractScripts, l as resolveFile, m as detectFramework, p as configuredJsxSource, v as compileModule, y as createModuleCache } from "./pool-BGXMhLfL.js";
-import { C as CompileCache, D as generateTypes, _ as critical, c as scan, f as loadLibraries, h as withLibraries, i as writeIfChanged, k as codeFrame, n as snapshotRoot, p as ownPackageName, r as typesFile, t as snapshotFile, x as hashesProblem } from "./types-file-R_knFzME.js";
-import { r as snapshotText } from "./snapshot-BQb8ZmSV.js";
-import { n as loadSystem, t as CONFIG_FILES } from "./config-loader-DzP68Snn.js";
+import { $ as isPaletteAtom, Ct as isArbitrary, D as flatLayerName, O as layerName, _ as normalizeStyle, _t as VicssError, b as resolveSystem, bt as compareStrings, c as paletteProblem, f as printTokens, l as printAtoms, t as baseTokens } from "./print-B_mn7wBu.js";
+import { _ as isSfc, c as moduleLoader, g as frameworkOf, h as extractScripts, l as resolveFile, m as detectFramework, p as configuredJsxSource, v as compileModule, y as createModuleCache } from "./pool-F3qb30Fy.js";
+import { u as baseAtoms } from "./theme-zBcr5DHi.js";
+import { C as CompileCache, D as generateTypes, _ as critical, c as scan, f as loadLibraries, h as withLibraries, i as writeIfChanged, k as codeFrame, n as snapshotRoot, p as ownPackageName, r as typesFile, t as snapshotFile, x as hashesProblem } from "./types-file-D6Iu4kzv.js";
+import { r as snapshotText } from "./snapshot-DAJ8FLU4.js";
+import { n as loadSystem, t as CONFIG_FILES } from "./config-loader-1kWS0cRU.js";
 import { createRequire } from "node:module";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import path from "node:path";

package/dist/{config-loader-DzP68Snn.js → config-loader-1kWS0cRU.js}

@@ -1,4 +1,4 @@
-import { l as printBase, st as configError, ut as isPlainObject, y as resolveSystem } from "./print-Ds6fkgio.js";
+import { b as resolveSystem, ct as configError, dt as isPlainObject, u as printBase } from "./print-B_mn7wBu.js";
 import { existsSync } from "node:fs";
 import path from "node:path";
 import { AsyncLocalStorage } from "node:async_hooks";

package/dist/config-loader-CG76KA50.js

@@ -0,0 +1 @@
+export { n as loadSystem } from "./config-loader-1kWS0cRU.js";

package/dist/index.d.ts

@@ -819,13 +819,23 @@ declare const PROPERTIES: unique symbol;
  * that records the keys it sets. `Style<"margin" | "width">` accepts
  * `css({ margin: 4 })` and rejects `css({ color: "accent" })`, so a
  * component decides what a caller may override. A utility or `textStyle`
- * counts as the properties it sets. It is not a class string: an element
- * takes it through `sx()` (`<div {...sx(card)} />`), and a plain class
- * string is `sx(card).className` (`.class` outside React and Preact).
+ * counts as the properties it sets.
+ *
+ * One style is an element's class and its style (PLAN §5.16): its
+ * `toString()` is its class attribute, so it goes where a class string
+ * goes (`class={card}`, `className={card}`, `${card}`), and the plugin
+ * writes it as an inline style where it is `style=`. The type says so: a
+ * string that records its keys, which `className` and `class` take, and
+ * which React's `style` takes too through one property it shares with
+ * React's style object (always `undefined`: the value is no style object).
+ * At runtime it is an object, not a string: `String(card)` is its classes,
+ * and string methods are not there.
  */
-interface Style<K extends string = string> {
+type Style<K extends string = string> = string & {
   readonly [PROPERTIES]: K;
-}
+  /** Never set: what lets React's `style` prop take a compiled style, which the plugin writes inline. */
+  readonly WebkitBoxOrient?: undefined;
+};
 /**
  * A compiled style with runtime values (PLAN §5.8): its constant style and
  * the custom properties its classes read, which `sx()` sets inline.
@@ -1377,6 +1387,39 @@ export declare function keyframes(frames: {
 /** A token reference as a CSS value: `token("colors.accent")` is `var(--color-accent)`. */
 export declare function token(path: string): string;
 //#endregion
+//#region src/runtime/style.d.ts
+declare class Styled {
+  /**
+   * The class attribute `sx(style)` sets, by `sx()`'s own merge and cache:
+   * the same string by construction, a cache hit after the first render,
+   * and 31 B less than a merge of its own beside `sx()`, which nearly every
+   * app ships (PLAN §6).
+   */
+  toString(this: StyleRecord): string;
+}
+/** What the compiler wraps a compiled style literal in (`__vxStyled({…})`). */
+declare const styled: <T extends object>(record: T) => T & Styled;
+/**
+ * The classes of `sx(...args)`, as a string: what a `style=` value's
+ * conditional properties add to the element's own class (core/attributes.ts).
+ */
+declare const classList: (...args: StyleArg$1[]) => string;
+/**
+ * A framework's class normaliser that reads an object as a map from class
+ * to condition (Vue's `normalizeClass`, Svelte's `clsx`), made to take a
+ * compiled style as its classes: the plugin points the compiled
+ * components' calls at it (vite/attributes.ts).
+ */
+declare const classWith: <A extends unknown[], R>(normalize: (value: unknown, ...rest: A) => R) => (value: unknown, ...rest: A) => R;
+/**
+ * A framework function that normalises the `class` of the props objects
+ * it takes (Vue's `mergeProps`, `normalizeProps` and `ssrRenderAttrs`,
+ * Svelte's server `attributes`), made to take a compiled style there too.
+ */
+declare const propsWith: <A extends unknown[], R>(merge: (...args: A) => R) => (...args: A) => R;
+/** Svelte's `attribute_effect(element, fn, …)`: the props `fn` returns, as `propsWith` takes them. */
+declare const effectWith: <A extends unknown[], R>(effect: (element: unknown, fn: (...values: never[]) => unknown, ...rest: A) => R) => (element: unknown, fn: (...values: never[]) => unknown, ...rest: A) => R;
+//#endregion
 //#region src/runtime/dev.d.ts
 /** What every dev variant adds. A `data-*` name, which each framework passes through as it is. */
 interface Source {
@@ -1408,6 +1451,20 @@ declare const sxDevString: (src: string, ...args: StyleArg$1[]) => {
   class: string;
   style?: string;
 } & Source;
+/**
+ * Dev only (PLAN §5.16): a `style=` value the compiler could not write as
+ * an inline style. A compiled style there would set nothing a browser
+ * reads (its keys are merge ids), so it fails where the element is
+ * rendered, naming the fix; any other value passes through.
+ */
+declare const styleCheck: <T>(value: T, src: string) => T;
+/**
+ * A framework's style setter that checks its value at `at` first: what the
+ * plugin points a compiled component's calls at in dev
+ * (vite/attributes.ts). With `key`, only when the call sets that attribute
+ * (Astro's `addAttribute(value, "style")`).
+ */
+declare const styleWith: <A extends unknown[], R>(set: (...args: A) => R, at: number, src: string, key?: string) => (...args: A) => R;
 //#endregion
 //#region src/runtime/recipe.d.ts
 /** One table cell: a style, or a style per slot. */
@@ -1468,4 +1525,4 @@ export declare const __vxResponsive: Responsive;
  */
 export declare const sx: Sx;
 //#endregion
-export { type CompoundSlot, type CompoundVariant, type ConditionalObject, type ConditionalValue, type Conditions, type CssOptions, type CssProperties, type CssResult, type DynamicStyle, type Marker, type MarkerKey, type MarkerState, type NumberKind, type Palette, type Recipe, type RecipeDefinition, type RecipeProps, type RecipeResult, type RecipeShape, type Register, type RegisteredFramework, type ResponsiveValue, type ScaleName, type ScaleValue, type Strict, type Style, type StyleArg, type StyleAttributes, type StyleFunction, type StyleInput, type StyleInputValue, type StyleObject, type SxAttributes, type SxShapes, type TextStyles, type Token, type Tokens, type Unscaled, type Utilities, type VariantValue, type Variants, devToken as __vxDevToken, devValue as __vxDevValue, flatBases as __vxFlatBases, sxClass as __vxSxClass, sxDev as __vxSxDev, sxDevClass as __vxSxDevClass, sxDevString as __vxSxDevString, sxString as __vxSxString };
+export { type CompoundSlot, type CompoundVariant, type ConditionalObject, type ConditionalValue, type Conditions, type CssOptions, type CssProperties, type CssResult, type DynamicStyle, type Marker, type MarkerKey, type MarkerState, type NumberKind, type Palette, type Recipe, type RecipeDefinition, type RecipeProps, type RecipeResult, type RecipeShape, type Register, type RegisteredFramework, type ResponsiveValue, type ScaleName, type ScaleValue, type Strict, type Style, type StyleArg, type StyleAttributes, type StyleFunction, type StyleInput, type StyleInputValue, type StyleObject, type SxAttributes, type SxShapes, type TextStyles, type Token, type Tokens, type Unscaled, type Utilities, type VariantValue, type Variants, classList as __vxClassList, classWith as __vxClassWith, devToken as __vxDevToken, devValue as __vxDevValue, effectWith as __vxEffectWith, flatBases as __vxFlatBases, propsWith as __vxPropsWith, styleCheck as __vxStyleCheck, styleWith as __vxStyleWith, styled as __vxStyled, sxClass as __vxSxClass, sxDev as __vxSxDev, sxDevClass as __vxSxDevClass, sxDevString as __vxSxDevString, sxString as __vxSxString };

package/dist/index.js

@@ -113,6 +113,59 @@ function token() {
 	return notCompiled("token");
 }
 //#endregion
+//#region src/runtime/style.ts
+/**
+* One compiled style as a class (PLAN §5.6, §5.16): `class={card}`,
+* `className={card}` and `${card}` read it as its class attribute. A
+* compiled style keeps its shape, merge id → class, so `sx()` still merges
+* it; the string comes from the prototype every compiled style shares. A
+* class method is not enumerable, so the merge's `for…in`, `Object.keys`
+* and a spread never see it, and a constant carries no function of its own.
+*/
+var Styled = class {
+	/**
+	* The class attribute `sx(style)` sets, by `sx()`'s own merge and cache:
+	* the same string by construction, a cache hit after the first render,
+	* and 31 B less than a merge of its own beside `sx()`, which nearly every
+	* app ships (PLAN §6).
+	*/
+	toString() {
+		return classes([this], {});
+	}
+};
+/** What the compiler wraps a compiled style literal in (`__vxStyled({…})`). */
+const styled = (record) => Object.setPrototypeOf(record, Styled.prototype);
+/** Whether `value` is a compiled style: one the compiler wrote, or a recipe's result. */
+const isStyled = (value) => value instanceof Styled;
+/**
+* The classes of `sx(...args)`, as a string: what a `style=` value's
+* conditional properties add to the element's own class (core/attributes.ts).
+*/
+const classList = (...args) => classes(args, {});
+/**
+* A framework's class normaliser that reads an object as a map from class
+* to condition (Vue's `normalizeClass`, Svelte's `clsx`), made to take a
+* compiled style as its classes: the plugin points the compiled
+* components' calls at it (vite/attributes.ts).
+*/
+const classWith = (normalize) => (value, ...rest) => normalize(value instanceof Styled ? "" + value : value, ...rest);
+/** Props whose `class` is a compiled style, with its classes there instead. */
+const plain = (props) => {
+	const own = props;
+	return own && own.class instanceof Styled ? {
+		...own,
+		class: "" + own.class
+	} : props;
+};
+/**
+* A framework function that normalises the `class` of the props objects
+* it takes (Vue's `mergeProps`, `normalizeProps` and `ssrRenderAttrs`,
+* Svelte's server `attributes`), made to take a compiled style there too.
+*/
+const propsWith = (merge) => (...args) => merge(...args.map(plain));
+/** Svelte's `attribute_effect(element, fn, …)`: the props `fn` returns, as `propsWith` takes them. */
+const effectWith = (effect) => (element, fn, ...rest) => effect(element, (...values) => plain(fn(...values)), ...rest);
+//#endregion
 //#region src/runtime/recipe.ts
 /**
 * The recipe resolver (PLAN §4.4, §5.7): what a compiled `recipe()` becomes,
@@ -175,7 +228,7 @@ const __vxRecipe = (t, x) => {
 			const add = x?.(t, props, values, cells);
 			for (const compound of t.c) if (add) add(compound);
 			else if (Object.keys(compound[0]).every((key) => compound[0][key].includes(values[key]))) cells.push(compound[1]);
-			const slot = (name) => Object.fromEntries(merge(cells.map((cell) => typeof cell == "object" && (name ? cell[name] : cell)))[1]);
+			const slot = (name) => styled(Object.fromEntries(merge(cells.map((cell) => typeof cell == "object" && (name ? cell[name] : cell)))[1]));
 			result = t.s ? Object.fromEntries(t.s.map((name) => [name, slot(name)])) : slot();
 			if (process.env.NODE_ENV != "production") Object.freeze(result);
 			if (memo.size >> 10) memo.clear();
@@ -351,6 +404,26 @@ const sxDev = /*#__PURE__*/ withSource(sx$1);
 const sxDevClass = /*#__PURE__*/ withSource(sxClass);
 /** Svelte, Astro and vanilla JS: `{ class, style, "data-vx-src" }`, `style` a string. */
 const sxDevString = /*#__PURE__*/ withSource(sxString);
+/**
+* Dev only (PLAN §5.16): a `style=` value the compiler could not write as
+* an inline style. A compiled style there would set nothing a browser
+* reads (its keys are merge ids), so it fails where the element is
+* rendered, naming the fix; any other value passes through.
+*/
+const styleCheck = (value, src) => {
+	if (isStyled(value) || isStyled(value?.$c)) throw new Error(`vicss: ${src}: style= got a css() style the plugin cannot see, so it is not an inline style. Write it in this module (style={css({ … })}, or style={card} with const card = css({ … }) in the same file), or apply it as a class: class={card} (className= in React and Preact), or {...sx(card)} for several styles or a function style.`);
+	return value;
+};
+/**
+* A framework's style setter that checks its value at `at` first: what the
+* plugin points a compiled component's calls at in dev
+* (vite/attributes.ts). With `key`, only when the call sets that attribute
+* (Astro's `addAttribute(value, "style")`).
+*/
+const styleWith = (set, at, src, key) => (...args) => {
+	if (key === void 0 || args[1] === key) styleCheck(args[at], src);
+	return set(...args);
+};
 //#endregion
 //#region src/index.ts
 /**
@@ -366,4 +439,4 @@ const sxDevString = /*#__PURE__*/ withSource(sxString);
 */
 const sx = sx$1;
 //#endregion
-export { devToken as __vxDevToken, devValue as __vxDevValue, flatBases as __vxFlatBases, __vxRecipe, __vxResponsive, sxClass as __vxSxClass, sxDev as __vxSxDev, sxDevClass as __vxSxDevClass, sxDevString as __vxSxDevString, sxString as __vxSxString, css, group, keyframes, peer, recipe, sx, theme, token };
+export { classList as __vxClassList, classWith as __vxClassWith, devToken as __vxDevToken, devValue as __vxDevValue, effectWith as __vxEffectWith, flatBases as __vxFlatBases, propsWith as __vxPropsWith, __vxRecipe, __vxResponsive, styleCheck as __vxStyleCheck, styleWith as __vxStyleWith, styled as __vxStyled, sxClass as __vxSxClass, sxDev as __vxSxDev, sxDevClass as __vxSxDevClass, sxDevString as __vxSxDevString, sxString as __vxSxString, css, group, keyframes, peer, recipe, sx, theme, token };