@tenphi/tasty 0.0.0-snapshot.05c1c22

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.
Files changed (314) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +629 -0
  3. package/dist/_virtual/_rolldown/runtime.js +7 -0
  4. package/dist/chunks/cacheKey.d.ts +1 -0
  5. package/dist/chunks/cacheKey.js +77 -0
  6. package/dist/chunks/cacheKey.js.map +1 -0
  7. package/dist/chunks/definitions.d.ts +37 -0
  8. package/dist/chunks/definitions.js +258 -0
  9. package/dist/chunks/definitions.js.map +1 -0
  10. package/dist/chunks/index.d.ts +1 -0
  11. package/dist/chunks/renderChunk.d.ts +1 -0
  12. package/dist/chunks/renderChunk.js +59 -0
  13. package/dist/chunks/renderChunk.js.map +1 -0
  14. package/dist/config.d.ts +366 -0
  15. package/dist/config.js +503 -0
  16. package/dist/config.js.map +1 -0
  17. package/dist/core/index.d.ts +33 -0
  18. package/dist/core/index.js +26 -0
  19. package/dist/counter-style/index.js +51 -0
  20. package/dist/counter-style/index.js.map +1 -0
  21. package/dist/debug.d.ts +89 -0
  22. package/dist/debug.js +453 -0
  23. package/dist/debug.js.map +1 -0
  24. package/dist/font-face/index.js +63 -0
  25. package/dist/font-face/index.js.map +1 -0
  26. package/dist/hooks/index.d.ts +7 -0
  27. package/dist/hooks/resolve-ssr-collector.js +14 -0
  28. package/dist/hooks/resolve-ssr-collector.js.map +1 -0
  29. package/dist/hooks/useCounterStyle.d.ts +50 -0
  30. package/dist/hooks/useCounterStyle.js +46 -0
  31. package/dist/hooks/useCounterStyle.js.map +1 -0
  32. package/dist/hooks/useFontFace.d.ts +43 -0
  33. package/dist/hooks/useFontFace.js +70 -0
  34. package/dist/hooks/useFontFace.js.map +1 -0
  35. package/dist/hooks/useGlobalStyles.d.ts +30 -0
  36. package/dist/hooks/useGlobalStyles.js +78 -0
  37. package/dist/hooks/useGlobalStyles.js.map +1 -0
  38. package/dist/hooks/useKeyframes.d.ts +56 -0
  39. package/dist/hooks/useKeyframes.js +64 -0
  40. package/dist/hooks/useKeyframes.js.map +1 -0
  41. package/dist/hooks/useProperty.d.ts +79 -0
  42. package/dist/hooks/useProperty.js +109 -0
  43. package/dist/hooks/useProperty.js.map +1 -0
  44. package/dist/hooks/useRawCSS.d.ts +53 -0
  45. package/dist/hooks/useRawCSS.js +35 -0
  46. package/dist/hooks/useRawCSS.js.map +1 -0
  47. package/dist/hooks/useStyles.d.ts +45 -0
  48. package/dist/hooks/useStyles.js +237 -0
  49. package/dist/hooks/useStyles.js.map +1 -0
  50. package/dist/index.d.ts +50 -0
  51. package/dist/index.js +35 -0
  52. package/dist/injector/index.d.ts +183 -0
  53. package/dist/injector/index.js +179 -0
  54. package/dist/injector/index.js.map +1 -0
  55. package/dist/injector/injector.d.ts +166 -0
  56. package/dist/injector/injector.js +464 -0
  57. package/dist/injector/injector.js.map +1 -0
  58. package/dist/injector/sheet-manager.d.ts +136 -0
  59. package/dist/injector/sheet-manager.js +733 -0
  60. package/dist/injector/sheet-manager.js.map +1 -0
  61. package/dist/injector/types.d.ts +204 -0
  62. package/dist/keyframes/index.js +206 -0
  63. package/dist/keyframes/index.js.map +1 -0
  64. package/dist/parser/classify.js +319 -0
  65. package/dist/parser/classify.js.map +1 -0
  66. package/dist/parser/const.js +49 -0
  67. package/dist/parser/const.js.map +1 -0
  68. package/dist/parser/lru.js +109 -0
  69. package/dist/parser/lru.js.map +1 -0
  70. package/dist/parser/parser.d.ts +25 -0
  71. package/dist/parser/parser.js +115 -0
  72. package/dist/parser/parser.js.map +1 -0
  73. package/dist/parser/tokenizer.js +69 -0
  74. package/dist/parser/tokenizer.js.map +1 -0
  75. package/dist/parser/types.d.ts +51 -0
  76. package/dist/parser/types.js +46 -0
  77. package/dist/parser/types.js.map +1 -0
  78. package/dist/pipeline/conditions.d.ts +134 -0
  79. package/dist/pipeline/conditions.js +406 -0
  80. package/dist/pipeline/conditions.js.map +1 -0
  81. package/dist/pipeline/exclusive.js +230 -0
  82. package/dist/pipeline/exclusive.js.map +1 -0
  83. package/dist/pipeline/index.d.ts +55 -0
  84. package/dist/pipeline/index.js +708 -0
  85. package/dist/pipeline/index.js.map +1 -0
  86. package/dist/pipeline/materialize.js +1103 -0
  87. package/dist/pipeline/materialize.js.map +1 -0
  88. package/dist/pipeline/parseStateKey.d.ts +15 -0
  89. package/dist/pipeline/parseStateKey.js +446 -0
  90. package/dist/pipeline/parseStateKey.js.map +1 -0
  91. package/dist/pipeline/simplify.js +515 -0
  92. package/dist/pipeline/simplify.js.map +1 -0
  93. package/dist/pipeline/warnings.js +18 -0
  94. package/dist/pipeline/warnings.js.map +1 -0
  95. package/dist/plugins/index.d.ts +2 -0
  96. package/dist/plugins/okhsl-plugin.d.ts +35 -0
  97. package/dist/plugins/okhsl-plugin.js +97 -0
  98. package/dist/plugins/okhsl-plugin.js.map +1 -0
  99. package/dist/plugins/types.d.ts +76 -0
  100. package/dist/properties/index.js +222 -0
  101. package/dist/properties/index.js.map +1 -0
  102. package/dist/properties/property-type-resolver.d.ts +24 -0
  103. package/dist/properties/property-type-resolver.js +90 -0
  104. package/dist/properties/property-type-resolver.js.map +1 -0
  105. package/dist/ssr/astro.d.ts +29 -0
  106. package/dist/ssr/astro.js +64 -0
  107. package/dist/ssr/astro.js.map +1 -0
  108. package/dist/ssr/async-storage.d.ts +17 -0
  109. package/dist/ssr/async-storage.js +34 -0
  110. package/dist/ssr/async-storage.js.map +1 -0
  111. package/dist/ssr/collect-auto-properties.js +39 -0
  112. package/dist/ssr/collect-auto-properties.js.map +1 -0
  113. package/dist/ssr/collector.d.ts +102 -0
  114. package/dist/ssr/collector.js +226 -0
  115. package/dist/ssr/collector.js.map +1 -0
  116. package/dist/ssr/context.d.ts +8 -0
  117. package/dist/ssr/context.js +13 -0
  118. package/dist/ssr/context.js.map +1 -0
  119. package/dist/ssr/format-global-rules.js +22 -0
  120. package/dist/ssr/format-global-rules.js.map +1 -0
  121. package/dist/ssr/format-keyframes.js +69 -0
  122. package/dist/ssr/format-keyframes.js.map +1 -0
  123. package/dist/ssr/format-property.js +49 -0
  124. package/dist/ssr/format-property.js.map +1 -0
  125. package/dist/ssr/format-rules.js +73 -0
  126. package/dist/ssr/format-rules.js.map +1 -0
  127. package/dist/ssr/hydrate.d.ts +22 -0
  128. package/dist/ssr/hydrate.js +49 -0
  129. package/dist/ssr/hydrate.js.map +1 -0
  130. package/dist/ssr/index.d.ts +5 -0
  131. package/dist/ssr/index.js +11 -0
  132. package/dist/ssr/index.js.map +1 -0
  133. package/dist/ssr/next.d.ts +45 -0
  134. package/dist/ssr/next.js +69 -0
  135. package/dist/ssr/next.js.map +1 -0
  136. package/dist/ssr/ssr-collector-ref.js +12 -0
  137. package/dist/ssr/ssr-collector-ref.js.map +1 -0
  138. package/dist/states/index.d.ts +49 -0
  139. package/dist/states/index.js +170 -0
  140. package/dist/states/index.js.map +1 -0
  141. package/dist/static/index.d.ts +5 -0
  142. package/dist/static/index.js +4 -0
  143. package/dist/static/inject.d.ts +5 -0
  144. package/dist/static/inject.js +17 -0
  145. package/dist/static/inject.js.map +1 -0
  146. package/dist/static/tastyStatic.d.ts +46 -0
  147. package/dist/static/tastyStatic.js +30 -0
  148. package/dist/static/tastyStatic.js.map +1 -0
  149. package/dist/static/types.d.ts +49 -0
  150. package/dist/static/types.js +24 -0
  151. package/dist/static/types.js.map +1 -0
  152. package/dist/styles/align.d.ts +15 -0
  153. package/dist/styles/align.js +14 -0
  154. package/dist/styles/align.js.map +1 -0
  155. package/dist/styles/border.d.ts +25 -0
  156. package/dist/styles/border.js +113 -0
  157. package/dist/styles/border.js.map +1 -0
  158. package/dist/styles/color.d.ts +14 -0
  159. package/dist/styles/color.js +26 -0
  160. package/dist/styles/color.js.map +1 -0
  161. package/dist/styles/createStyle.js +79 -0
  162. package/dist/styles/createStyle.js.map +1 -0
  163. package/dist/styles/dimension.js +96 -0
  164. package/dist/styles/dimension.js.map +1 -0
  165. package/dist/styles/display.d.ts +37 -0
  166. package/dist/styles/display.js +66 -0
  167. package/dist/styles/display.js.map +1 -0
  168. package/dist/styles/fade.d.ts +15 -0
  169. package/dist/styles/fade.js +57 -0
  170. package/dist/styles/fade.js.map +1 -0
  171. package/dist/styles/fill.d.ts +42 -0
  172. package/dist/styles/fill.js +51 -0
  173. package/dist/styles/fill.js.map +1 -0
  174. package/dist/styles/flow.d.ts +16 -0
  175. package/dist/styles/flow.js +12 -0
  176. package/dist/styles/flow.js.map +1 -0
  177. package/dist/styles/gap.d.ts +31 -0
  178. package/dist/styles/gap.js +36 -0
  179. package/dist/styles/gap.js.map +1 -0
  180. package/dist/styles/height.d.ts +17 -0
  181. package/dist/styles/height.js +19 -0
  182. package/dist/styles/height.js.map +1 -0
  183. package/dist/styles/index.d.ts +1 -0
  184. package/dist/styles/index.js +8 -0
  185. package/dist/styles/index.js.map +1 -0
  186. package/dist/styles/inset.d.ts +52 -0
  187. package/dist/styles/inset.js +149 -0
  188. package/dist/styles/inset.js.map +1 -0
  189. package/dist/styles/justify.d.ts +15 -0
  190. package/dist/styles/justify.js +14 -0
  191. package/dist/styles/justify.js.map +1 -0
  192. package/dist/styles/list.d.ts +16 -0
  193. package/dist/styles/list.js +98 -0
  194. package/dist/styles/list.js.map +1 -0
  195. package/dist/styles/margin.d.ts +24 -0
  196. package/dist/styles/margin.js +103 -0
  197. package/dist/styles/margin.js.map +1 -0
  198. package/dist/styles/outline.d.ts +29 -0
  199. package/dist/styles/outline.js +64 -0
  200. package/dist/styles/outline.js.map +1 -0
  201. package/dist/styles/padding.d.ts +24 -0
  202. package/dist/styles/padding.js +103 -0
  203. package/dist/styles/padding.js.map +1 -0
  204. package/dist/styles/predefined.d.ts +71 -0
  205. package/dist/styles/predefined.js +237 -0
  206. package/dist/styles/predefined.js.map +1 -0
  207. package/dist/styles/preset.d.ts +52 -0
  208. package/dist/styles/preset.js +126 -0
  209. package/dist/styles/preset.js.map +1 -0
  210. package/dist/styles/radius.d.ts +12 -0
  211. package/dist/styles/radius.js +71 -0
  212. package/dist/styles/radius.js.map +1 -0
  213. package/dist/styles/scrollbar.d.ts +25 -0
  214. package/dist/styles/scrollbar.js +46 -0
  215. package/dist/styles/scrollbar.js.map +1 -0
  216. package/dist/styles/shadow.d.ts +14 -0
  217. package/dist/styles/shadow.js +23 -0
  218. package/dist/styles/shadow.js.map +1 -0
  219. package/dist/styles/transition.d.ts +14 -0
  220. package/dist/styles/transition.js +157 -0
  221. package/dist/styles/transition.js.map +1 -0
  222. package/dist/styles/types.d.ts +549 -0
  223. package/dist/styles/width.d.ts +17 -0
  224. package/dist/styles/width.js +19 -0
  225. package/dist/styles/width.js.map +1 -0
  226. package/dist/tasty.d.ts +119 -0
  227. package/dist/tasty.js +231 -0
  228. package/dist/tasty.js.map +1 -0
  229. package/dist/types.d.ts +184 -0
  230. package/dist/utils/cache-wrapper.js +21 -0
  231. package/dist/utils/cache-wrapper.js.map +1 -0
  232. package/dist/utils/case-converter.js +8 -0
  233. package/dist/utils/case-converter.js.map +1 -0
  234. package/dist/utils/color-math.d.ts +46 -0
  235. package/dist/utils/color-math.js +749 -0
  236. package/dist/utils/color-math.js.map +1 -0
  237. package/dist/utils/color-space.d.ts +5 -0
  238. package/dist/utils/color-space.js +228 -0
  239. package/dist/utils/color-space.js.map +1 -0
  240. package/dist/utils/colors.d.ts +5 -0
  241. package/dist/utils/colors.js +10 -0
  242. package/dist/utils/colors.js.map +1 -0
  243. package/dist/utils/css-types.d.ts +7 -0
  244. package/dist/utils/dotize.d.ts +26 -0
  245. package/dist/utils/dotize.js +122 -0
  246. package/dist/utils/dotize.js.map +1 -0
  247. package/dist/utils/filter-base-props.d.ts +15 -0
  248. package/dist/utils/filter-base-props.js +45 -0
  249. package/dist/utils/filter-base-props.js.map +1 -0
  250. package/dist/utils/get-display-name.d.ts +7 -0
  251. package/dist/utils/get-display-name.js +10 -0
  252. package/dist/utils/get-display-name.js.map +1 -0
  253. package/dist/utils/has-keys.js +13 -0
  254. package/dist/utils/has-keys.js.map +1 -0
  255. package/dist/utils/is-dev-env.js +19 -0
  256. package/dist/utils/is-dev-env.js.map +1 -0
  257. package/dist/utils/is-valid-element-type.js +15 -0
  258. package/dist/utils/is-valid-element-type.js.map +1 -0
  259. package/dist/utils/merge-styles.d.ts +7 -0
  260. package/dist/utils/merge-styles.js +145 -0
  261. package/dist/utils/merge-styles.js.map +1 -0
  262. package/dist/utils/mod-attrs.d.ts +6 -0
  263. package/dist/utils/mod-attrs.js +20 -0
  264. package/dist/utils/mod-attrs.js.map +1 -0
  265. package/dist/utils/process-tokens.d.ts +21 -0
  266. package/dist/utils/process-tokens.js +90 -0
  267. package/dist/utils/process-tokens.js.map +1 -0
  268. package/dist/utils/resolve-recipes.d.ts +17 -0
  269. package/dist/utils/resolve-recipes.js +146 -0
  270. package/dist/utils/resolve-recipes.js.map +1 -0
  271. package/dist/utils/selector-transform.js +32 -0
  272. package/dist/utils/selector-transform.js.map +1 -0
  273. package/dist/utils/string.js +8 -0
  274. package/dist/utils/string.js.map +1 -0
  275. package/dist/utils/styles.d.ts +99 -0
  276. package/dist/utils/styles.js +220 -0
  277. package/dist/utils/styles.js.map +1 -0
  278. package/dist/utils/typography.d.ts +47 -0
  279. package/dist/utils/typography.js +51 -0
  280. package/dist/utils/typography.js.map +1 -0
  281. package/dist/utils/warnings.d.ts +16 -0
  282. package/dist/utils/warnings.js +16 -0
  283. package/dist/utils/warnings.js.map +1 -0
  284. package/dist/zero/babel.d.ts +182 -0
  285. package/dist/zero/babel.js +438 -0
  286. package/dist/zero/babel.js.map +1 -0
  287. package/dist/zero/css-writer.d.ts +45 -0
  288. package/dist/zero/css-writer.js +73 -0
  289. package/dist/zero/css-writer.js.map +1 -0
  290. package/dist/zero/extractor.d.ts +24 -0
  291. package/dist/zero/extractor.js +266 -0
  292. package/dist/zero/extractor.js.map +1 -0
  293. package/dist/zero/index.d.ts +3 -0
  294. package/dist/zero/index.js +3 -0
  295. package/dist/zero/next.d.ts +86 -0
  296. package/dist/zero/next.js +143 -0
  297. package/dist/zero/next.js.map +1 -0
  298. package/docs/PIPELINE.md +519 -0
  299. package/docs/README.md +31 -0
  300. package/docs/adoption.md +296 -0
  301. package/docs/comparison.md +420 -0
  302. package/docs/configuration.md +326 -0
  303. package/docs/debug.md +318 -0
  304. package/docs/design-system.md +424 -0
  305. package/docs/dsl.md +673 -0
  306. package/docs/getting-started.md +217 -0
  307. package/docs/injector.md +528 -0
  308. package/docs/methodology.md +567 -0
  309. package/docs/runtime.md +485 -0
  310. package/docs/ssr.md +384 -0
  311. package/docs/styles.md +582 -0
  312. package/docs/tasty-static.md +520 -0
  313. package/package.json +215 -0
  314. package/tasty.config.ts +14 -0
package/docs/ssr.md ADDED
@@ -0,0 +1,384 @@
1
+ # Server-Side Rendering (SSR)
2
+
3
+ Tasty supports server-side rendering with zero-cost client hydration. This does **not** introduce a separate styling engine: SSR uses the same runtime `tasty()` pipeline you already use on the client, then adds server-side CSS collection and client-side cache hydration. Your existing `tasty()` components work unchanged, and SSR remains opt-in with no per-component modifications. For the broader docs map, see the [Docs Hub](README.md).
4
+
5
+ ---
6
+
7
+ ## Requirements
8
+
9
+ | Dependency | Version | Required for |
10
+ |---|---|---|
11
+ | `react` | >= 18 | All SSR entry points (matches the current peer dependency of `@tenphi/tasty`) |
12
+ | `next` | >= 13 | Next.js integration (`@tenphi/tasty/ssr/next`) — App Router with `useServerInsertedHTML` |
13
+ | Node.js | >= 20 | Generic / streaming SSR (`@tenphi/tasty/ssr`) — uses `node:async_hooks` for `AsyncLocalStorage` |
14
+
15
+ The Astro integration (`@tenphi/tasty/ssr/astro`) has no additional dependencies beyond `react`.
16
+
17
+ ---
18
+
19
+ ## How It Works
20
+
21
+ When the environment can execute runtime React code during server rendering, the same `tasty()` and `useStyles()` calls can run there too. In Next.js, generic React SSR, and Astro islands, Tasty simply changes where that runtime-generated CSS goes: `useStyles()` detects a `ServerStyleCollector` and collects CSS into it instead of trying to access the DOM. The collector accumulates all styles, serializes them as `<style>` tags and a cache state script in the HTML. On the client, `hydrateTastyCache()` pre-populates the injector cache so that `useStyles()` skips the rendering pipeline entirely during hydration.
22
+
23
+ ```
24
+ Server Client
25
+ ────── ──────
26
+ tasty() renders hydrateTastyCache() pre-populates cache
27
+ └─ useStyles() └─ cacheKey → className map ready
28
+ └─ collector.collect()
29
+ tasty() renders
30
+ After render: └─ useStyles()
31
+ <style data-tasty-ssr> └─ cache hit → skip pipeline
32
+ <script data-tasty-cache> └─ no CSS re-injection
33
+ ```
34
+
35
+ ---
36
+
37
+ ## Next.js (App Router)
38
+
39
+ ### 1. Create the registry
40
+
41
+ Create a client component that wraps your tree with `TastyRegistry`:
42
+
43
+ ```tsx
44
+ // app/tasty-registry.tsx
45
+ 'use client';
46
+
47
+ import { TastyRegistry } from '@tenphi/tasty/ssr/next';
48
+
49
+ export default function TastyStyleRegistry({
50
+ children,
51
+ }: {
52
+ children: React.ReactNode;
53
+ }) {
54
+ return <TastyRegistry>{children}</TastyRegistry>;
55
+ }
56
+ ```
57
+
58
+ ### 2. Add to root layout
59
+
60
+ Wrap your application in the registry:
61
+
62
+ ```tsx
63
+ // app/layout.tsx
64
+ import TastyStyleRegistry from './tasty-registry';
65
+
66
+ export default function RootLayout({
67
+ children,
68
+ }: {
69
+ children: React.ReactNode;
70
+ }) {
71
+ return (
72
+ <html>
73
+ <body>
74
+ <TastyStyleRegistry>{children}</TastyStyleRegistry>
75
+ </body>
76
+ </html>
77
+ );
78
+ }
79
+ ```
80
+
81
+ That's it. All `tasty()` components inside the tree automatically get SSR support. No per-component changes needed.
82
+
83
+ ### How it works
84
+
85
+ - `TastyRegistry` is a `'use client'` component, but Next.js still server-renders it on initial page load.
86
+ - During SSR, `useStyles()` finds the collector via React context and pushes CSS rules to it.
87
+ - `TastyRegistry` uses `useServerInsertedHTML` to flush collected CSS into the HTML stream as `<style data-tasty-ssr>` tags. This is fully streaming-compatible -- styles are injected alongside each Suspense boundary as it resolves.
88
+ - A companion `<script>` tag transfers the `cacheKey → className` mapping to the client.
89
+ - When the module loads on the client, `hydrateTastyCache()` runs automatically and pre-populates the injector cache. During hydration, `useStyles()` hits the cache and skips the entire pipeline.
90
+
91
+ ### Using tasty() in Server Components
92
+
93
+ `tasty()` components use React hooks internally, so they require `'use client'`. However, this does **not** prevent them from being used in Server Component pages. In Next.js, `'use client'` components are still server-rendered on initial load. Dynamic `styleProps` like `<Grid flow="column">` work normally when a `tasty()` component is imported into a Server Component page.
94
+
95
+ ### Options
96
+
97
+ ```tsx
98
+ // Skip cache state transfer (saves payload size at the cost of hydration perf)
99
+ <TastyRegistry transferCache={false}>{children}</TastyRegistry>
100
+ ```
101
+
102
+ ### CSP nonce
103
+
104
+ If your app uses Content Security Policy with nonces, configure it before rendering:
105
+
106
+ ```tsx
107
+ // app/layout.tsx or a server-side init file
108
+ import { configure } from '@tenphi/tasty';
109
+
110
+ configure({ nonce: 'your-nonce-value' });
111
+ ```
112
+
113
+ The nonce is automatically applied to all `<style>` and `<script>` tags injected by `TastyRegistry`.
114
+
115
+ ---
116
+
117
+ ## Astro
118
+
119
+ ### 1. Add the middleware
120
+
121
+ Create or update your Astro middleware:
122
+
123
+ ```ts
124
+ // src/middleware.ts
125
+ import { tastyMiddleware } from '@tenphi/tasty/ssr/astro';
126
+
127
+ export const onRequest = tastyMiddleware();
128
+ ```
129
+
130
+ ### 2. Use tasty() components as normal
131
+
132
+ ```tsx
133
+ // src/components/Card.tsx
134
+ import { tasty } from '@tenphi/tasty';
135
+
136
+ const Card = tasty({
137
+ styles: {
138
+ padding: '4x',
139
+ fill: '#surface',
140
+ radius: '1r',
141
+ border: true,
142
+ },
143
+ });
144
+
145
+ export default Card;
146
+ ```
147
+
148
+ ```astro
149
+ ---
150
+ // src/pages/index.astro
151
+ import Card from '../components/Card.tsx';
152
+ ---
153
+
154
+ <html>
155
+ <body>
156
+ <Card>Static card — styles collected by middleware</Card>
157
+ <Card client:load>Island card — styles hydrated on client</Card>
158
+ </body>
159
+ </html>
160
+ ```
161
+
162
+ ### How it works
163
+
164
+ Astro's `@astrojs/react` renderer calls `renderToString()` for each React component without wrapping the tree in a provider. The middleware uses `AsyncLocalStorage` to make the collector available to all `useStyles()` calls within the request.
165
+
166
+ - **Static components** (no `client:*`): Styles are collected during `renderToString` and injected into `</head>`. No JavaScript is shipped for these components.
167
+ - **Islands** (`client:load`, `client:visible`, etc.): Styles are collected during SSR the same way. On the client, importing `@tenphi/tasty/ssr/astro` auto-hydrates the cache from `<script data-tasty-cache>`. The island's `useStyles()` calls hit the cache during hydration.
168
+
169
+ ### Client-side hydration for islands
170
+
171
+ The `@tenphi/tasty/ssr/astro` module auto-hydrates when imported on the client. To ensure the cache is warm before any island renders, import it in a shared entry point or in each island component:
172
+
173
+ ```tsx
174
+ // src/components/MyIsland.tsx
175
+ import '@tenphi/tasty/ssr/astro'; // auto-hydrates cache on import
176
+ import { tasty } from '@tenphi/tasty';
177
+
178
+ const MyIsland = tasty({
179
+ styles: { padding: '2x', fill: '#blue' },
180
+ });
181
+
182
+ export default MyIsland;
183
+ ```
184
+
185
+ ### Options
186
+
187
+ ```ts
188
+ // Skip cache state transfer
189
+ export const onRequest = tastyMiddleware({ transferCache: false });
190
+ ```
191
+
192
+ ### CSP nonce
193
+
194
+ Same as Next.js -- call `configure({ nonce: '...' })` before any rendering happens. The middleware reads the nonce and applies it to injected tags.
195
+
196
+ ---
197
+
198
+ ## Generic Framework Integration
199
+
200
+ Any React-based framework can integrate using the core SSR API:
201
+
202
+ ```tsx
203
+ import {
204
+ ServerStyleCollector,
205
+ TastySSRContext,
206
+ hydrateTastyCache,
207
+ } from '@tenphi/tasty/ssr';
208
+ import { renderToString } from 'react-dom/server';
209
+ import { hydrateRoot } from 'react-dom/client';
210
+
211
+ // ── Server ──────────────────────────────────────────────
212
+
213
+ const collector = new ServerStyleCollector();
214
+
215
+ const html = renderToString(
216
+ <TastySSRContext.Provider value={collector}>
217
+ <App />
218
+ </TastySSRContext.Provider>
219
+ );
220
+
221
+ const css = collector.getCSS();
222
+ const cacheState = collector.getCacheState();
223
+
224
+ // Embed in your HTML template:
225
+ const fullHtml = `
226
+ <html>
227
+ <head>
228
+ <style data-tasty-ssr>${css}</style>
229
+ <script data-tasty-cache type="application/json">
230
+ ${JSON.stringify(cacheState)}
231
+ </script>
232
+ </head>
233
+ <body>
234
+ <div id="root">${html}</div>
235
+ </body>
236
+ </html>
237
+ `;
238
+
239
+ // ── Client ──────────────────────────────────────────────
240
+
241
+ // Before hydration:
242
+ hydrateTastyCache(); // reads from <script data-tasty-cache>
243
+
244
+ hydrateRoot(document.getElementById('root'), <App />);
245
+ ```
246
+
247
+ ### Streaming SSR
248
+
249
+ For streaming with `renderToPipeableStream`, use `flushCSS()` instead of `getCSS()`:
250
+
251
+ ```tsx
252
+ const collector = new ServerStyleCollector();
253
+
254
+ const stream = renderToPipeableStream(
255
+ <TastySSRContext.Provider value={collector}>
256
+ <App />
257
+ </TastySSRContext.Provider>,
258
+ {
259
+ onShellReady() {
260
+ // Flush styles collected so far
261
+ const css = collector.flushCSS();
262
+ res.write(`<style data-tasty-ssr>${css}</style>`);
263
+ stream.pipe(res);
264
+ },
265
+ onAllReady() {
266
+ // Flush any remaining styles + cache state
267
+ const css = collector.flushCSS();
268
+ if (css) res.write(`<style data-tasty-ssr>${css}</style>`);
269
+
270
+ const state = collector.getCacheState();
271
+ res.write(`<script data-tasty-cache type="application/json">${JSON.stringify(state)}</script>`);
272
+ },
273
+ }
274
+ );
275
+ ```
276
+
277
+ ### AsyncLocalStorage (no React context)
278
+
279
+ If your framework doesn't support wrapping the React tree with a provider, use `runWithCollector`:
280
+
281
+ ```tsx
282
+ import {
283
+ ServerStyleCollector,
284
+ runWithCollector,
285
+ hydrateTastyCache,
286
+ } from '@tenphi/tasty/ssr';
287
+
288
+ const collector = new ServerStyleCollector();
289
+
290
+ const html = await runWithCollector(collector, () =>
291
+ renderToString(<App />)
292
+ );
293
+
294
+ const css = collector.getCSS();
295
+ // ... inject into HTML as above
296
+ ```
297
+
298
+ ---
299
+
300
+ ## API Reference
301
+
302
+ ### Entry points
303
+
304
+ | Import path | Description |
305
+ |---|---|
306
+ | `@tenphi/tasty/ssr` | Core SSR API: `ServerStyleCollector`, `TastySSRContext`, `runWithCollector`, `hydrateTastyCache` |
307
+ | `@tenphi/tasty/ssr/next` | Next.js App Router: `TastyRegistry` component |
308
+ | `@tenphi/tasty/ssr/astro` | Astro: `tastyMiddleware`, auto-hydration on import |
309
+
310
+ ### `ServerStyleCollector`
311
+
312
+ Server-safe style collector. One instance per request.
313
+
314
+ | Method | Description |
315
+ |---|---|
316
+ | `allocateClassName(cacheKey)` | Allocate a sequential class name (`t0`, `t1`, ...) for a cache key. Returns `{ className, isNewAllocation }`. |
317
+ | `collectChunk(cacheKey, className, rules)` | Record CSS rules for a chunk. Deduplicated by `cacheKey`. |
318
+ | `collectKeyframes(name, css)` | Record a `@keyframes` rule. Deduplicated by name. |
319
+ | `collectProperty(name, css)` | Record a `@property` rule. Deduplicated by name. |
320
+ | `collectFontFace(key, css)` | Record a `@font-face` rule. Deduplicated by content hash. |
321
+ | `collectCounterStyle(name, css)` | Record a `@counter-style` rule. Deduplicated by name. |
322
+ | `getCSS()` | Get all collected CSS as a single string. For non-streaming SSR. |
323
+ | `flushCSS()` | Get only CSS collected since the last flush. For streaming SSR. |
324
+ | `getCacheState()` | Serialize `{ entries: Record<cacheKey, className>, classCounter }` for client hydration. |
325
+
326
+ ### `TastySSRContext`
327
+
328
+ React context (`createContext<ServerStyleCollector | null>(null)`). Used by `useStyles()` to find the collector during SSR.
329
+
330
+ ### `TastyRegistry`
331
+
332
+ Next.js App Router component. Props:
333
+
334
+ | Prop | Type | Default | Description |
335
+ |---|---|---|---|
336
+ | `children` | `ReactNode` | required | Application tree |
337
+ | `transferCache` | `boolean` | `true` | Embed cache state script for zero-cost hydration |
338
+
339
+ ### `tastyMiddleware(options?)`
340
+
341
+ Astro middleware factory. Options:
342
+
343
+ | Option | Type | Default | Description |
344
+ |---|---|---|---|
345
+ | `transferCache` | `boolean` | `true` | Embed cache state script for island hydration |
346
+
347
+ ### `hydrateTastyCache(state?)`
348
+
349
+ Pre-populate the client injector cache. When called without arguments, reads from `window.__TASTY_SSR_CACHE__` (streaming) or `<script data-tasty-cache>` (non-streaming).
350
+
351
+ ### `runWithCollector(collector, fn)`
352
+
353
+ Run a function with a `ServerStyleCollector` bound to the current async context via `AsyncLocalStorage`. All `useStyles()` calls within `fn` (and async continuations) will find this collector.
354
+
355
+ ---
356
+
357
+ ## Troubleshooting
358
+
359
+ ### Styles flash on page load (FOUC)
360
+
361
+ The `TastyRegistry` or `tastyMiddleware` is missing. Ensure your layout wraps the app with `TastyRegistry` (Next.js) or the middleware is registered (Astro).
362
+
363
+ ### Hydration mismatch warnings
364
+
365
+ Class names are deterministic for the same render order. If you see mismatches, ensure `hydrateTastyCache()` runs before React hydration. For Next.js, this is automatic. For Astro, import `@tenphi/tasty/ssr/astro` in your island components. For custom setups, call `hydrateTastyCache()` before `hydrateRoot()`.
366
+
367
+ ### Styles duplicated after hydration
368
+
369
+ This is expected and harmless. SSR `<style data-tasty-ssr>` tags remain in the DOM. The client injector creates separate `<style>` elements for any new styles. SSR styles are never modified or removed by the client. If this is a concern for very large apps, call `cleanupSSRStyles()` after hydration:
370
+
371
+ ```tsx
372
+ import { hydrateTastyCache } from '@tenphi/tasty/ssr';
373
+
374
+ hydrateTastyCache();
375
+ hydrateRoot(root, <App />);
376
+
377
+ // Optional: remove SSR style tags after hydration
378
+ document.querySelectorAll('style[data-tasty-ssr]').forEach(el => el.remove());
379
+ document.querySelectorAll('script[data-tasty-cache]').forEach(el => el.remove());
380
+ ```
381
+
382
+ ### `AsyncLocalStorage` not available
383
+
384
+ The `@tenphi/tasty/ssr` entry point imports from `node:async_hooks`. This is excluded from client bundles by the build configuration. If you see import errors on the client, ensure your bundler treats `node:async_hooks` as external or use the `@tenphi/tasty/ssr/next` entry point (which does not use ALS).