@tenphi/tasty 0.0.0-snapshot.27b6708 → 0.0.0-snapshot.28eb83c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -54
- package/dist/{babel-BUQGeOXA.d.ts → babel-D6lOuSwk.d.ts} +2 -2
- package/dist/chunks/async-storage-DKK-wTD4.js.map +1 -0
- package/dist/chunks/build-config-BBThSdlo.js +45 -0
- package/dist/chunks/build-config-BBThSdlo.js.map +1 -0
- package/dist/{collector-DTahQUiV.js → chunks/collector-DcViW2ZQ.js} +28 -14
- package/dist/chunks/collector-DcViW2ZQ.js.map +1 -0
- package/dist/chunks/config-engine-DQVQK4NU.js +403 -0
- package/dist/chunks/config-engine-DQVQK4NU.js.map +1 -0
- package/dist/chunks/css-definitions-BZ9vm0ci.js +1284 -0
- package/dist/chunks/css-definitions-BZ9vm0ci.js.map +1 -0
- package/dist/chunks/css-resources-Cyl_axbI.js +149 -0
- package/dist/chunks/css-resources-Cyl_axbI.js.map +1 -0
- package/dist/chunks/debug-Vyauml7U.js +583 -0
- package/dist/chunks/debug-Vyauml7U.js.map +1 -0
- package/dist/chunks/dsl-CXvoaLnj.js +2097 -0
- package/dist/chunks/dsl-CXvoaLnj.js.map +1 -0
- package/dist/chunks/hydration-CLdVKcH2.js +59 -0
- package/dist/chunks/hydration-CLdVKcH2.js.map +1 -0
- package/dist/chunks/react-runtime-so_X_yMo.js +1526 -0
- package/dist/chunks/react-runtime-so_X_yMo.js.map +1 -0
- package/dist/chunks/runtime-engine-DQ5laRou.js +3056 -0
- package/dist/chunks/runtime-engine-DQ5laRou.js.map +1 -0
- package/dist/{merge-styles-oklji0KB.js → chunks/shared-utils-OIg0N_dp.js} +42 -3
- package/dist/chunks/shared-utils-OIg0N_dp.js.map +1 -0
- package/dist/{config-B5kHzuNz.js → chunks/style-engine-CBuOt1e4.js} +2387 -7442
- package/dist/chunks/style-engine-CBuOt1e4.js.map +1 -0
- package/dist/{css-writer-B-J87ncv.js → chunks/zero-engine-BFh7gKbK.js} +3 -3
- package/dist/chunks/zero-engine-BFh7gKbK.js.map +1 -0
- package/dist/{collector-DUaHCcTS.d.ts → collector-CAmndLXe.d.ts} +23 -3
- package/dist/{config-YsxGv4tq.d.ts → config-BWYrv_Aa.d.ts} +141 -37
- package/dist/core/index.d.ts +5 -5
- package/dist/core/index.js +9 -6
- package/dist/{index-Cd45t5NM.d.ts → index-BzAC3p06.d.ts} +118 -23
- package/dist/{index-PqN-DIpn.d.ts → index-D4kRLj2o.d.ts} +128 -68
- package/dist/index.d.ts +5 -5
- package/dist/index.js +10 -922
- package/dist/{merge-styles-CU7JbEwg.d.ts → merge-styles-BFktNP8J.d.ts} +2 -2
- package/dist/ssr/astro-client.js +1 -1
- package/dist/ssr/astro-middleware-extract-static.d.ts +11 -0
- package/dist/ssr/astro-middleware-extract-static.js +9 -0
- package/dist/ssr/astro-middleware-extract-static.js.map +1 -0
- package/dist/ssr/astro-middleware-extract.d.ts +11 -0
- package/dist/ssr/astro-middleware-extract.js +9 -0
- package/dist/ssr/astro-middleware-extract.js.map +1 -0
- package/dist/ssr/astro-middleware-static.d.ts +3 -1
- package/dist/ssr/astro-middleware.d.ts +3 -1
- package/dist/ssr/astro.d.ts +45 -3
- package/dist/ssr/astro.js +157 -14
- package/dist/ssr/astro.js.map +1 -1
- package/dist/ssr/index.d.ts +7 -7
- package/dist/ssr/index.js +4 -4
- package/dist/ssr/index.js.map +1 -1
- package/dist/ssr/next-config.d.ts +66 -0
- package/dist/ssr/next-config.js +135 -0
- package/dist/ssr/next-config.js.map +1 -0
- package/dist/ssr/next.d.ts +9 -2
- package/dist/ssr/next.js +26 -10
- package/dist/ssr/next.js.map +1 -1
- package/dist/static/index.d.ts +2 -2
- package/dist/static/index.js +1 -1
- package/dist/zero/babel.d.ts +1 -1
- package/dist/zero/babel.js +25 -24
- package/dist/zero/babel.js.map +1 -1
- package/dist/zero/index.d.ts +1 -1
- package/dist/zero/index.js +1 -1
- package/dist/zero/next.d.ts +1 -1
- package/docs/README.md +5 -3
- package/docs/adoption.md +3 -3
- package/docs/ai-agents.md +83 -78
- package/docs/comparison.md +12 -12
- package/docs/configuration.md +47 -47
- package/docs/debug.md +19 -7
- package/docs/dsl.md +3 -3
- package/docs/getting-started.md +10 -10
- package/docs/injector.md +62 -25
- package/docs/methodology.md +3 -3
- package/docs/migration-v3.md +49 -49
- package/docs/plugins.md +37 -33
- package/docs/react-api.md +2 -2
- package/docs/runtime-benchmarks.md +351 -0
- package/docs/ssr.md +219 -61
- package/docs/styles.md +43 -11
- package/docs/tasty-static.md +136 -103
- package/package.json +80 -11
- package/dist/async-storage-DKK-wTD4.js.map +0 -1
- package/dist/collector-DTahQUiV.js.map +0 -1
- package/dist/config-B5kHzuNz.js.map +0 -1
- package/dist/context-CA8YKeMn.js +0 -24
- package/dist/context-CA8YKeMn.js.map +0 -1
- package/dist/core-Dr4u1NVD.js +0 -1566
- package/dist/core-Dr4u1NVD.js.map +0 -1
- package/dist/css-writer-B-J87ncv.js.map +0 -1
- package/dist/format-global-rules-DklyaXv-.js +0 -22
- package/dist/format-global-rules-DklyaXv-.js.map +0 -1
- package/dist/format-rules-DKOA-6qu.js +0 -130
- package/dist/format-rules-DKOA-6qu.js.map +0 -1
- package/dist/hydrate-OeMX99We.js +0 -37
- package/dist/hydrate-OeMX99We.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/keyframes-CV8azJf3.js +0 -493
- package/dist/keyframes-CV8azJf3.js.map +0 -1
- package/dist/merge-styles-oklji0KB.js.map +0 -1
- package/dist/resolve-recipes-DTG81rzl.js +0 -144
- package/dist/resolve-recipes-DTG81rzl.js.map +0 -1
- /package/dist/{async-storage-DKK-wTD4.js → chunks/async-storage-DKK-wTD4.js} +0 -0
package/docs/migration-v3.md
CHANGED
|
@@ -21,30 +21,30 @@ Most of the work is mechanical renames — see the [search-and-replace cheat she
|
|
|
21
21
|
|
|
22
22
|
## At a glance
|
|
23
23
|
|
|
24
|
-
| v2.11
|
|
25
|
-
|
|
26
|
-
| `'@properties': { … }`
|
|
27
|
-
| `'@fontFace': { … }`
|
|
28
|
-
| `'@counterStyle': { … }`
|
|
29
|
-
| `padding: '2x 4x top right'`
|
|
30
|
-
| `fade: '3x 1x top bottom'`
|
|
31
|
-
| `configure({ funcs })`
|
|
32
|
-
| `configure({ fontFace })`
|
|
33
|
-
| `configure({ counterStyle })`
|
|
34
|
-
| `getCssText()`
|
|
35
|
-
| `getCssTextForNode()`
|
|
36
|
-
| `getCssTextForClasses()`
|
|
37
|
-
| `getGlobalFontFace()`
|
|
38
|
-
| `getGlobalCounterStyle()`
|
|
39
|
-
| `getGlobalFunction()`
|
|
40
|
-
| `okhslFunc` / `okhstFunc`
|
|
41
|
-
| `CssOptions`
|
|
42
|
-
| `ParserOptions.funcs`
|
|
43
|
-
| `StyleParser#setFuncs()`
|
|
44
|
-
| `ChunkInfo` (from `tastyDebug`) | `DebugChunkInfo`
|
|
45
|
-
| `@tenphi/tasty/next`
|
|
46
|
-
| `getIsTestEnvironment()`
|
|
47
|
-
| `hydrateTastyCache()`
|
|
24
|
+
| v2.11 | v3.0 | Find it with |
|
|
25
|
+
| ------------------------------- | --------------------------------- | ------------------------------ |
|
|
26
|
+
| `'@properties': { … }` | `'@property': { … }` | `rg "'@properties'"` |
|
|
27
|
+
| `'@fontFace': { … }` | `'@font-face': { … }` | `rg "'@fontFace'"` |
|
|
28
|
+
| `'@counterStyle': { … }` | `'@counter-style': { … }` | `rg "'@counterStyle'"` |
|
|
29
|
+
| `padding: '2x 4x top right'` | `padding: '2x top, 4x right'` | dev-mode console warning |
|
|
30
|
+
| `fade: '3x 1x top bottom'` | `fade: '3x top, 1x bottom'` | dev-mode console warning |
|
|
31
|
+
| `configure({ funcs })` | `configure({ functions })` | `rg "funcs"` |
|
|
32
|
+
| `configure({ fontFace })` | `configure({ fontFaces })` | `rg "fontFace:"` |
|
|
33
|
+
| `configure({ counterStyle })` | `configure({ counterStyles })` | `rg "counterStyle:"` |
|
|
34
|
+
| `getCssText()` | `getCSSText()` | `rg "getCssText"` |
|
|
35
|
+
| `getCssTextForNode()` | `getCSSTextForNode()` | `rg "getCssTextForNode"` |
|
|
36
|
+
| `getCssTextForClasses()` | `getCSSTextForClasses()` | `rg "getCssTextForClasses"` |
|
|
37
|
+
| `getGlobalFontFace()` | `getGlobalFontFaces()` | `rg "getGlobalFontFace\b"` |
|
|
38
|
+
| `getGlobalCounterStyle()` | `getGlobalCounterStyles()` | `rg "getGlobalCounterStyle\b"` |
|
|
39
|
+
| `getGlobalFunction()` | `getGlobalFunctions()` | `rg "getGlobalFunction\b"` |
|
|
40
|
+
| `okhslFunc` / `okhstFunc` | `okhslFunction` / `okhstFunction` | `rg "okhs[lt]Func\b"` |
|
|
41
|
+
| `CssOptions` | `CSSOptions` | `rg "CssOptions"` |
|
|
42
|
+
| `ParserOptions.funcs` | `ParserOptions.functions` | `rg "funcs:"` |
|
|
43
|
+
| `StyleParser#setFuncs()` | `StyleParser#setFunctions()` | `rg "setFuncs"` |
|
|
44
|
+
| `ChunkInfo` (from `tastyDebug`) | `DebugChunkInfo` | `rg "ChunkInfo"` |
|
|
45
|
+
| `@tenphi/tasty/next` | `@tenphi/tasty/zero/next` | `rg "tasty/next"` |
|
|
46
|
+
| `getIsTestEnvironment()` | `isTestEnvironment()` | `rg "getIsTestEnvironment"` |
|
|
47
|
+
| `hydrateTastyCache()` | `hydrateTastyClasses()` | `rg "hydrateTastyCache"` |
|
|
48
48
|
|
|
49
49
|
---
|
|
50
50
|
|
|
@@ -73,7 +73,7 @@ At-rule keys now match the real CSS at-rule names Tasty already emits, so they a
|
|
|
73
73
|
|
|
74
74
|
**This is the one change that can alter rendered CSS without a rename.** A style group that names direction modifiers now takes a **single** value, applied to every direction it names.
|
|
75
75
|
|
|
76
|
-
The old form looked positional but never was: the parser buckets values and modifiers into separate arrays per comma group, so `'2x 4x top right'`, `'2x top 4x right'`, and `'top 2x right 4x'` were all the same input, and the pairing was decided by the order the
|
|
76
|
+
The old form looked positional but never was: the parser buckets values and modifiers into separate arrays per comma group, so `'2x 4x top right'`, `'2x top 4x right'`, and `'top 2x right 4x'` were all the same input, and the pairing was decided by the order the _modifiers_ happened to appear in. `'1x 2x right top'` and `'1x 2x top right'` produced different CSS, and `'1x 2x top top'` silently assigned `top` twice.
|
|
77
77
|
|
|
78
78
|
Per-side values now come from comma-separated groups:
|
|
79
79
|
|
|
@@ -155,25 +155,25 @@ A key whose prefix doesn't match its value type is ignored with a development wa
|
|
|
155
155
|
|
|
156
156
|
## 5. Removed exports
|
|
157
157
|
|
|
158
|
-
| Removed
|
|
159
|
-
|
|
160
|
-
| `getIsTestEnvironment()`
|
|
161
|
-
| `hydrateTastyCache()`
|
|
162
|
-
| `customFunc()`
|
|
163
|
-
| `getGlobalFuncs()`
|
|
164
|
-
| `resetGlobalFuncs()`
|
|
165
|
-
| `setGlobalPredefinedTokens()`
|
|
166
|
-
| `resetGlobalPredefinedTokens()`
|
|
167
|
-
| `setMiddlewareTransferCache()` / `getMiddlewareTransferCache()` | internal; no replacement needed
|
|
168
|
-
| `clearWriterCache()`
|
|
169
|
-
| `DEFAULT_PLUGINS`
|
|
170
|
-
| `registerDefaultFunctions()`
|
|
171
|
-
| `warn()` / `deprecationWarning()`
|
|
172
|
-
| `Bucket` enum
|
|
173
|
-
| `Props` type
|
|
174
|
-
| `UseStylesOptions`
|
|
175
|
-
| `GlobalStyledProps`
|
|
176
|
-
| duplicate `PropertyOptions`
|
|
158
|
+
| Removed | Use instead |
|
|
159
|
+
| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
160
|
+
| `getIsTestEnvironment()` | `isTestEnvironment()` |
|
|
161
|
+
| `hydrateTastyCache()` | `hydrateTastyClasses()` |
|
|
162
|
+
| `customFunc()` | `configure({ functions })` |
|
|
163
|
+
| `getGlobalFuncs()` | `getGlobalFunctions()` for `@function` definitions; the parse-function registry is internal |
|
|
164
|
+
| `resetGlobalFuncs()` | `resetConfig()` |
|
|
165
|
+
| `setGlobalPredefinedTokens()` | `configure({ replaceTokens })` |
|
|
166
|
+
| `resetGlobalPredefinedTokens()` | `resetConfig()` |
|
|
167
|
+
| `setMiddlewareTransferCache()` / `getMiddlewareTransferCache()` | internal; no replacement needed |
|
|
168
|
+
| `clearWriterCache()` | internal test utility |
|
|
169
|
+
| `DEFAULT_PLUGINS` | nothing — it was never consumed, and passing it to `configure({ plugins })` was a no-op. The default `okhsl`/`okhst` functions are registered automatically. |
|
|
170
|
+
| `registerDefaultFunctions()` | internal bootstrap helper |
|
|
171
|
+
| `warn()` / `deprecationWarning()` | internal helpers with no callers |
|
|
172
|
+
| `Bucket` enum | parser-internal |
|
|
173
|
+
| `Props` type | inline `Record<string, any>` |
|
|
174
|
+
| `UseStylesOptions` | `useStyles()` takes `Styles \| undefined` directly |
|
|
175
|
+
| `GlobalStyledProps` | its only member was the already-dead `breakpoints` prop |
|
|
176
|
+
| duplicate `PropertyOptions` | the single `PropertyOptions` from `injector/types` |
|
|
177
177
|
|
|
178
178
|
`getGlobalFuncs()` deserves a note: it returned the **live mutable internal registry**, and writing to it bypassed the parser's cache invalidation, so the write silently never took effect. If you were mutating it, move to `configure({ functions })`.
|
|
179
179
|
|
|
@@ -192,13 +192,13 @@ A key whose prefix doesn't match its value type is ignored with a development wa
|
|
|
192
192
|
+ import { withTasty } from '@tenphi/tasty/zero/next';
|
|
193
193
|
```
|
|
194
194
|
|
|
195
|
-
The
|
|
195
|
+
The build-time extraction Next.js wrapper already lived under the `zero` namespace internally; the top-level `/next` path collided confusingly with `@tenphi/tasty/ssr/next`, which is a different integration.
|
|
196
196
|
|
|
197
197
|
---
|
|
198
198
|
|
|
199
199
|
## 8. Behavior changes that are not renames
|
|
200
200
|
|
|
201
|
-
**Repeated `configure()` calls now merge.** `recipes`, `keyframes`, `properties`, `fontFaces`, `counterStyles`, and CSS `@function` definitions used to replace wholesale, so a design-system `configure()` followed by an application `configure()` silently dropped the design system's values. All of them now merge, with the later call winning on a key conflict — matching `tokens` and `globalStyles`, which already merged. If you were relying on a second call to
|
|
201
|
+
**Repeated `configure()` calls now merge.** `recipes`, `keyframes`, `properties`, `fontFaces`, `counterStyles`, and CSS `@function` definitions used to replace wholesale, so a design-system `configure()` followed by an application `configure()` silently dropped the design system's values. All of them now merge, with the later call winning on a key conflict — matching `tokens` and `globalStyles`, which already merged. If you were relying on a second call to _clear_ a collection, use `resetConfig()`.
|
|
202
202
|
|
|
203
203
|
`configure({ polyfills })` is now correctly rejected after the first render, like every sibling option, and shallow-merges so an unrelated later call cannot switch a polyfill off.
|
|
204
204
|
|
|
@@ -208,7 +208,7 @@ The zero-runtime Next.js wrapper already lived under the `zero` namespace intern
|
|
|
208
208
|
|
|
209
209
|
**Replacing a built-in style handler now warns.** Built-in handlers are shared across style names, so `configure({ handlers: { fill } })` also takes over `image` and the whole `background-*` family, and `configure({ handlers: { display } })` takes down `flow`, `gap`, `hide`, `overflow`, `whiteSpace`, and `textOverflow`. This was always true; what's new is that a development-mode warning now names exactly what was displaced. If you see it, either declare the whole group and delegate the rest to `styleHandlers.*`, or pick a narrower name. See [Plugins](plugins.md#custom-style-handlers).
|
|
210
210
|
|
|
211
|
-
**Multi-dependency custom handlers are fixed.** A handler whose dependencies mixed known and unknown style names was invoked once per chunk with only
|
|
211
|
+
**Multi-dependency custom handlers are fixed.** A handler whose dependencies mixed known and unknown style names was invoked once per chunk with only _part_ of its dependencies, and could emit stale CSS. Unknown names now join their handler's chunk, so it is invoked once with all of them. No built-in style moved, so no existing class name changes.
|
|
212
212
|
|
|
213
213
|
**`isChecked` added to the root prop types.** It already worked at runtime; it was just missing from `BaseProps` / `AllBaseProps`.
|
|
214
214
|
|
|
@@ -220,7 +220,7 @@ The zero-runtime Next.js wrapper already lived under the `zero` namespace intern
|
|
|
220
220
|
|
|
221
221
|
Nothing here is required to upgrade.
|
|
222
222
|
|
|
223
|
-
- **CSS `@function` support** — reusable, parameterized functions via the `'@function'` styles key, the `useFunction` style function, or `configure({ functions })`. Works across client, SSR/RSC, and
|
|
223
|
+
- **CSS `@function` support** — reusable, parameterized functions via the `'@function'` styles key, the `useFunction` style function, or `configure({ functions })`. Works across client rendering, SSR/RSC, and build-time extraction. `configure({ polyfills: { functions: true } })` inlines every call into plain CSS for browsers that don't ship the at-rule yet. See [Style DSL](dsl.md#functions-function).
|
|
224
224
|
- **Custom color plugins with no core special-casing** — `okhsl`/`okhst` are now ordinary one-line plugins, and a third-party color space can achieve identical integration. New `createColorFunc` and `resolveFunctionColor` helpers.
|
|
225
225
|
- **`configure({ propHandlers })`** — props middleware for every component: props in, props out. The extension point for props that aren't style values.
|
|
226
226
|
- **`configure({ baseStyleProps })`** — expose style properties as props on every component without listing them in each `styleProps`.
|
|
@@ -279,7 +279,7 @@ Worth stating explicitly, because it's easy to assume otherwise:
|
|
|
279
279
|
|
|
280
280
|
- **At-rule styles-object keys are CSS-spec-faithful, not JS-conventional.** `@keyframes`, `@property`, `@font-face`, `@counter-style`, `@function`, `@starting` — kebab-case, matching what Tasty emits.
|
|
281
281
|
- **The `func()` injector method stays abbreviated.** `function` is a reserved word.
|
|
282
|
-
- `injector.fontFace()` and `injector.counterStyle()` keep their singular names — only the
|
|
282
|
+
- `injector.fontFace()` and `injector.counterStyle()` keep their singular names — only the _config keys_ and _getters_ were pluralized.
|
|
283
283
|
- `useFontFace` and `useCounterStyle` are unchanged.
|
|
284
284
|
- `configure({ properties })` and `autoPropertyTypes` are unchanged; only the styles-object `@property` key was renamed.
|
|
285
285
|
- **The deprecated style aliases are retained deliberately.** `backgroundColor`, `background`, `backgroundImage`, `flex`, `grid`, and `flexDirection` still carry `@deprecated` tags and still work. They are the guardrail that discourages their use in projects that have not enabled `@tenphi/eslint-plugin-tasty` yet — read the tags as guidance, not as a removal notice.
|
package/docs/plugins.md
CHANGED
|
@@ -43,23 +43,23 @@ configure({ plugins: [spacingPlugin()] });
|
|
|
43
43
|
|
|
44
44
|
## Choosing an extension point
|
|
45
45
|
|
|
46
|
-
| You want to add
|
|
47
|
-
|
|
48
|
-
| New value syntax — `okhsl(…)`, `double(2x)` | `functions` (bare key)
|
|
49
|
-
| A reusable CSS `@function`
|
|
50
|
-
| A new unit — `2gu`
|
|
51
|
-
| A new state alias — `@mobile`
|
|
52
|
-
| A style property → **CSS declarations**
|
|
53
|
-
| A style property on every component
|
|
54
|
-
| A **component prop** → anything
|
|
55
|
-
| A named bundle of styles
|
|
56
|
-
| Typography scale tokens
|
|
57
|
-
| `:root` variables
|
|
58
|
-
| Global selector styles
|
|
46
|
+
| You want to add | Use | Runs | Build-time extraction |
|
|
47
|
+
| ------------------------------------------- | -------------------------- | ---------------------------- | ----------------------- |
|
|
48
|
+
| New value syntax — `okhsl(…)`, `double(2x)` | `functions` (bare key) | parse time, per value | ✅ |
|
|
49
|
+
| A reusable CSS `@function` | `functions` (`$$name` key) | injected once, globally | ✅ |
|
|
50
|
+
| A new unit — `2gu` | `units` | parse time, per value | ✅ |
|
|
51
|
+
| A new state alias — `@mobile` | `states` | state-key parse | ✅ |
|
|
52
|
+
| A style property → **CSS declarations** | `handlers` | pipeline, per state snapshot | ✅ |
|
|
53
|
+
| A style property on every component | `baseStyleProps` | prop harvest | ✅ (styles only) |
|
|
54
|
+
| A **component prop** → anything | `propHandlers` | render, per component | ❌ (no props to run on) |
|
|
55
|
+
| A named bundle of styles | `recipes` | before chunking | ✅ |
|
|
56
|
+
| Typography scale tokens | `presets` | inject time | ✅ |
|
|
57
|
+
| `:root` variables | `tokens`, `replaceTokens` | inject time | ✅ |
|
|
58
|
+
| Global selector styles | `globalStyles` | inject time | ✅ |
|
|
59
59
|
|
|
60
60
|
Two distinctions do most of the work:
|
|
61
61
|
|
|
62
|
-
- **`handlers` vs `propHandlers`.** A handler turns a
|
|
62
|
+
- **`handlers` vs `propHandlers`.** A handler turns a _style property_ into CSS declarations and knows nothing about components. A prop handler turns a _component prop_ into other props — including `styles`, which then flow through the normal handlers. Reach for `propHandlers` when the input isn't a style value (an options object, a domain concept) or when it should affect more than styles.
|
|
63
63
|
- **`recipes` vs `propHandlers`.** A recipe is a static named bundle. A prop handler computes its styles from a value.
|
|
64
64
|
|
|
65
65
|
---
|
|
@@ -123,12 +123,12 @@ configure({
|
|
|
123
123
|
|
|
124
124
|
**The key is the trigger.** By default a handler runs only when a prop matching its key is present, so an absent prop costs one property check rather than a call. Override that with a tuple:
|
|
125
125
|
|
|
126
|
-
| Definition
|
|
127
|
-
|
|
128
|
-
| `fn`
|
|
129
|
-
| `['glaze', fn]`
|
|
130
|
-
| `[['glaze', 'tint'], fn]` | either is present
|
|
131
|
-
| `['*', fn]`
|
|
126
|
+
| Definition | Runs when |
|
|
127
|
+
| ------------------------- | ------------------------------------- |
|
|
128
|
+
| `fn` | a prop named after the key is present |
|
|
129
|
+
| `['glaze', fn]` | `glaze` is present |
|
|
130
|
+
| `[['glaze', 'tint'], fn]` | either is present |
|
|
131
|
+
| `['*', fn]` | always |
|
|
132
132
|
|
|
133
133
|
**Chaining.** Handlers run in registration order — plugins first, then direct `configure()` — and each receives the previous one's output. Registering the same key twice replaces the handler in place, keeping its position.
|
|
134
134
|
|
|
@@ -136,16 +136,16 @@ configure({
|
|
|
136
136
|
|
|
137
137
|
### Rules
|
|
138
138
|
|
|
139
|
-
- **Be pure. Never mutate the input.** Style values are cached by object identity, so mutating a value object in place yields a stale class name
|
|
139
|
+
- **Be pure. Never mutate the input.** Style values are cached by object identity, so mutating a value object in place yields a stale class name _and_ stale CSS. Return fresh objects.
|
|
140
140
|
- **Memoize the styles you build, per input value.** A reference-stable (ideally frozen) styles object lets the cache key reuse its serialization instead of recomputing it on every render. This is the single highest-leverage thing you can do for performance.
|
|
141
141
|
- **Precedence is fixed** and not adjustable from a handler. Styles are merged as `factory defaults → styles → harvested style props`, and injected styles occupy the `styles` slot: they beat a component's own default styles and lose to a style prop passed at the call site. This matches how `recipe` already behaves.
|
|
142
|
-
- **Prefer returning `styles` over bare style props.** Returning `{ fill: '#red' }` only works if `fill` is harvestable on
|
|
142
|
+
- **Prefer returning `styles` over bare style props.** Returning `{ fill: '#red' }` only works if `fill` is harvestable on _that_ component (in its `styleProps`, or promoted via `baseStyleProps`); otherwise it leaks to the DOM.
|
|
143
143
|
|
|
144
144
|
### What it cannot do
|
|
145
145
|
|
|
146
146
|
- **`ref`** — `forwardRef` separates it from props, so it is out of reach.
|
|
147
147
|
- **Sub-elements** (`Card.Title`) — they have no `styles` prop and no style-prop harvest, so middleware does not run on them.
|
|
148
|
-
- **
|
|
148
|
+
- **Build-time extraction** — see [Rendering modes](#rendering-modes-and-caveats).
|
|
149
149
|
|
|
150
150
|
---
|
|
151
151
|
|
|
@@ -161,7 +161,7 @@ configure({ baseStyleProps: ['radius', 'shadow'] });
|
|
|
161
161
|
|
|
162
162
|
Names must be real style properties, must start with a lowercase letter, and must not collide with a prop `tasty()` consumes itself (`as`, `styles`, `variant`, `mods`, `tokens`, …); invalid entries are dropped with a development warning.
|
|
163
163
|
|
|
164
|
-
`configure()` may run
|
|
164
|
+
`configure()` may run _after_ your components are defined — each factory resolves its prop list lazily and refreshes when the registry changes.
|
|
165
165
|
|
|
166
166
|
**Costs and caveats.** Each name adds one property check per render of every component, forever, so keep the list short. The effect is app-global and cannot be scoped to a subtree — use a factory's own `styleProps` for that. Be wary of names that collide with real DOM or component props (`width`, `size`, `color`): promoting one means every component swallows it as a style, including when rendering `as={SomeThirdPartyComponent}`.
|
|
167
167
|
|
|
@@ -211,7 +211,7 @@ export default {
|
|
|
211
211
|
};
|
|
212
212
|
```
|
|
213
213
|
|
|
214
|
-
`propHandlers` keys are JSX props rather than style keys, so they need no entry — but any
|
|
214
|
+
`propHandlers` keys are JSX props rather than style keys, so they need no entry — but any _style_ name or token a handler expands into does.
|
|
215
215
|
|
|
216
216
|
---
|
|
217
217
|
|
|
@@ -274,7 +274,11 @@ export const glazePlugin: TastyPluginFactory = () => ({
|
|
|
274
274
|
|
|
275
275
|
// Typed so `#glaze-bg` animates smoothly instead of snapping.
|
|
276
276
|
properties: {
|
|
277
|
-
'#glaze-bg': {
|
|
277
|
+
'#glaze-bg': {
|
|
278
|
+
syntax: '<color>',
|
|
279
|
+
inherits: false,
|
|
280
|
+
initialValue: 'transparent',
|
|
281
|
+
},
|
|
278
282
|
},
|
|
279
283
|
});
|
|
280
284
|
```
|
|
@@ -302,19 +306,19 @@ declare module '@tenphi/tasty' {
|
|
|
302
306
|
}
|
|
303
307
|
```
|
|
304
308
|
|
|
305
|
-
The object value is unambiguous here precisely because `glaze` is a **prop**. A style
|
|
309
|
+
The object value is unambiguous here precisely because `glaze` is a **prop**. A style _value_ of the same shape would be indistinguishable from a state map (`{ tone: … }` looks exactly like `{ hovered: … }`), which is why this belongs in `propHandlers` rather than `handlers`.
|
|
306
310
|
|
|
307
311
|
---
|
|
308
312
|
|
|
309
313
|
## Rendering modes and caveats
|
|
310
314
|
|
|
311
|
-
| Mode
|
|
312
|
-
|
|
313
|
-
| Client
|
|
314
|
-
| SSR / RSC
|
|
315
|
-
|
|
|
315
|
+
| Mode | `functions` / `units` / `states` / `handlers` / `recipes` / `tokens` | `propHandlers` |
|
|
316
|
+
| -------------------------- | -------------------------------------------------------------------- | -------------- |
|
|
317
|
+
| Client | ✅ | ✅ |
|
|
318
|
+
| SSR / RSC | ✅ | ✅ |
|
|
319
|
+
| Build-time (`tastyStatic`) | ✅ at build time | not applicable |
|
|
316
320
|
|
|
317
|
-
**
|
|
321
|
+
**Build-time extraction.** The Babel plugin transforms `tastyStatic()` calls, which take styles objects — there are no props in that pipeline, so there is nothing for props middleware to run on. Components rendered through `tasty()` are untouched by the plugin; `propHandlers` work whether those components render on the server or in the browser. Everything in the `tastyStatic()` path runs at build time, which is why handlers, functions, and units must be pure functions of their input.
|
|
318
322
|
|
|
319
323
|
**Server and client must configure identically.** Class names are derived from resolved styles, so a handler or promoted prop registered on one side and not the other produces a hydration mismatch. This is the same requirement as `namePrefix` — see [SSR → Hydration mismatch warnings](ssr.md#hydration-mismatch-warnings).
|
|
320
324
|
|
package/docs/react-api.md
CHANGED
|
@@ -407,7 +407,7 @@ On the client, CSS is injected synchronously into the DOM (idempotent via the in
|
|
|
407
407
|
|
|
408
408
|
All style functions below are plain functions (not React hooks) and can be used in any environment: client components, SSR with a `ServerStyleCollector`, and React Server Components. They retain their `use` prefix for backward compatibility, but do not use any React hooks internally.
|
|
409
409
|
|
|
410
|
-
In server-only contexts
|
|
410
|
+
In server-only contexts, components that use only Tasty style functions ship no Tasty styling runtime. Astro without `client:*` directives produces no client JavaScript; server-only Next.js RSC follows the same Tasty architecture, while final output depends on the application deployment. Tasty never forces the `'use client'` boundary — that decision belongs to your component when it needs React interactivity (state, effects, event handlers).
|
|
411
411
|
|
|
412
412
|
### useStyles
|
|
413
413
|
|
|
@@ -676,6 +676,6 @@ See the [Functions section of the DSL reference](dsl.md#functions-function) for
|
|
|
676
676
|
- **[Methodology](methodology.md)** — Recommended patterns: root + sub-elements, styleProps, tokens, wrapping
|
|
677
677
|
- **[Configuration](configuration.md)** — Tokens, recipes, custom units, style handlers, TypeScript extensions
|
|
678
678
|
- **[Style Properties](styles.md)** — Complete reference for all enhanced style properties
|
|
679
|
-
- **[
|
|
679
|
+
- **[Build-Time Extraction (`tastyStatic`)](tasty-static.md)** — Static styling with the Babel plugin
|
|
680
680
|
- **[Server-Side Rendering](ssr.md)** — SSR setup for Next.js, Astro, and generic frameworks
|
|
681
681
|
- **[Debug Utilities](debug.md)** — Inspect injected CSS, cache state, and active styles at runtime
|