@tenphi/tasty 0.9.0 → 0.10.1

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 (78) hide show
  1. package/README.md +47 -1
  2. package/dist/config.js +15 -1
  3. package/dist/config.js.map +1 -1
  4. package/dist/core/index.d.ts +2 -2
  5. package/dist/core/index.js +2 -2
  6. package/dist/hooks/useGlobalStyles.d.ts +3 -0
  7. package/dist/hooks/useGlobalStyles.js +28 -1
  8. package/dist/hooks/useGlobalStyles.js.map +1 -1
  9. package/dist/hooks/useKeyframes.js +18 -3
  10. package/dist/hooks/useKeyframes.js.map +1 -1
  11. package/dist/hooks/useProperty.js +36 -13
  12. package/dist/hooks/useProperty.js.map +1 -1
  13. package/dist/hooks/useRawCSS.js +13 -1
  14. package/dist/hooks/useRawCSS.js.map +1 -1
  15. package/dist/hooks/useStyles.d.ts +5 -0
  16. package/dist/hooks/useStyles.js +82 -3
  17. package/dist/hooks/useStyles.js.map +1 -1
  18. package/dist/index.d.ts +2 -2
  19. package/dist/index.js +2 -2
  20. package/dist/injector/index.d.ts +9 -1
  21. package/dist/injector/index.js +9 -1
  22. package/dist/injector/index.js.map +1 -1
  23. package/dist/injector/injector.d.ts +9 -0
  24. package/dist/injector/injector.js +20 -1
  25. package/dist/injector/injector.js.map +1 -1
  26. package/dist/injector/sheet-manager.d.ts +1 -0
  27. package/dist/injector/sheet-manager.js +1 -0
  28. package/dist/injector/sheet-manager.js.map +1 -1
  29. package/dist/properties/index.js +20 -5
  30. package/dist/properties/index.js.map +1 -1
  31. package/dist/properties/property-type-resolver.js +8 -0
  32. package/dist/properties/property-type-resolver.js.map +1 -1
  33. package/dist/ssr/astro.d.ts +29 -0
  34. package/dist/ssr/astro.js +65 -0
  35. package/dist/ssr/astro.js.map +1 -0
  36. package/dist/ssr/async-storage.d.ts +17 -0
  37. package/dist/ssr/async-storage.js +35 -0
  38. package/dist/ssr/async-storage.js.map +1 -0
  39. package/dist/ssr/collect-auto-properties.js +40 -0
  40. package/dist/ssr/collect-auto-properties.js.map +1 -0
  41. package/dist/ssr/collector.d.ts +85 -0
  42. package/dist/ssr/collector.js +173 -0
  43. package/dist/ssr/collector.js.map +1 -0
  44. package/dist/ssr/context.d.ts +8 -0
  45. package/dist/ssr/context.js +14 -0
  46. package/dist/ssr/context.js.map +1 -0
  47. package/dist/ssr/format-global-rules.js +22 -0
  48. package/dist/ssr/format-global-rules.js.map +1 -0
  49. package/dist/ssr/format-keyframes.js +70 -0
  50. package/dist/ssr/format-keyframes.js.map +1 -0
  51. package/dist/ssr/format-property.js +48 -0
  52. package/dist/ssr/format-property.js.map +1 -0
  53. package/dist/ssr/format-rules.js +70 -0
  54. package/dist/ssr/format-rules.js.map +1 -0
  55. package/dist/ssr/hydrate.d.ts +22 -0
  56. package/dist/ssr/hydrate.js +50 -0
  57. package/dist/ssr/hydrate.js.map +1 -0
  58. package/dist/ssr/index.d.ts +5 -0
  59. package/dist/ssr/index.js +12 -0
  60. package/dist/ssr/index.js.map +1 -0
  61. package/dist/ssr/next.d.ts +45 -0
  62. package/dist/ssr/next.js +71 -0
  63. package/dist/ssr/next.js.map +1 -0
  64. package/dist/ssr/ssr-collector-ref.js +12 -0
  65. package/dist/ssr/ssr-collector-ref.js.map +1 -0
  66. package/dist/styles/preset.js +1 -1
  67. package/dist/styles/preset.js.map +1 -1
  68. package/dist/styles/transition.js +1 -1
  69. package/dist/styles/transition.js.map +1 -1
  70. package/dist/tasty.d.ts +14 -14
  71. package/dist/zero/babel.d.ts +16 -2
  72. package/dist/zero/babel.js +32 -1
  73. package/dist/zero/babel.js.map +1 -1
  74. package/dist/zero/next.d.ts +29 -30
  75. package/dist/zero/next.js +49 -39
  76. package/dist/zero/next.js.map +1 -1
  77. package/docs/ssr.md +372 -0
  78. package/package.json +44 -28
@@ -0,0 +1,35 @@
1
+ import { AsyncLocalStorage } from "node:async_hooks";
2
+
3
+ //#region src/ssr/async-storage.ts
4
+ /**
5
+ * AsyncLocalStorage integration for SSR collector discovery.
6
+ *
7
+ * Used by Astro middleware and generic framework integrations where
8
+ * the library cannot wrap the React tree with a context provider.
9
+ * The middleware calls runWithCollector() around the render, and
10
+ * useStyles() calls getSSRCollector() to find it.
11
+ *
12
+ * This module imports from 'node:async_hooks' — it must be excluded
13
+ * from client bundles via the build configuration.
14
+ */
15
+ const tastySSRStorage = new AsyncLocalStorage();
16
+ /**
17
+ * Run a function with a ServerStyleCollector bound to the current
18
+ * async context. All useStyles() calls within `fn` (and any async
19
+ * continuations) will find this collector via getSSRCollector().
20
+ */
21
+ function runWithCollector(collector, fn) {
22
+ return tastySSRStorage.run(collector, fn);
23
+ }
24
+ /**
25
+ * Retrieve the ServerStyleCollector bound to the current async context.
26
+ * Returns null when called outside of runWithCollector() or on the client.
27
+ */
28
+ function getSSRCollector() {
29
+ if (typeof tastySSRStorage?.getStore !== "function") return null;
30
+ return tastySSRStorage.getStore() ?? null;
31
+ }
32
+
33
+ //#endregion
34
+ export { getSSRCollector, runWithCollector };
35
+ //# sourceMappingURL=async-storage.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"async-storage.js","names":[],"sources":["../../src/ssr/async-storage.ts"],"sourcesContent":["/**\n * AsyncLocalStorage integration for SSR collector discovery.\n *\n * Used by Astro middleware and generic framework integrations where\n * the library cannot wrap the React tree with a context provider.\n * The middleware calls runWithCollector() around the render, and\n * useStyles() calls getSSRCollector() to find it.\n *\n * This module imports from 'node:async_hooks' — it must be excluded\n * from client bundles via the build configuration.\n */\n\nimport { AsyncLocalStorage } from 'node:async_hooks';\n\nimport type { ServerStyleCollector } from './collector';\n\nconst tastySSRStorage = new AsyncLocalStorage<ServerStyleCollector>();\n\n/**\n * Run a function with a ServerStyleCollector bound to the current\n * async context. All useStyles() calls within `fn` (and any async\n * continuations) will find this collector via getSSRCollector().\n */\nexport function runWithCollector<T>(\n collector: ServerStyleCollector,\n fn: () => T,\n): T {\n return tastySSRStorage.run(collector, fn);\n}\n\n/**\n * Retrieve the ServerStyleCollector bound to the current async context.\n * Returns null when called outside of runWithCollector() or on the client.\n */\nexport function getSSRCollector(): ServerStyleCollector | null {\n if (typeof tastySSRStorage?.getStore !== 'function') return null;\n return tastySSRStorage.getStore() ?? null;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB,IAAI,mBAAyC;;;;;;AAOrE,SAAgB,iBACd,WACA,IACG;AACH,QAAO,gBAAgB,IAAI,WAAW,GAAG;;;;;;AAO3C,SAAgB,kBAA+C;AAC7D,KAAI,OAAO,iBAAiB,aAAa,WAAY,QAAO;AAC5D,QAAO,gBAAgB,UAAU,IAAI"}
@@ -0,0 +1,40 @@
1
+ import { parsePropertyToken } from "../properties/index.js";
2
+ import { PropertyTypeResolver } from "../properties/property-type-resolver.js";
3
+ import { formatPropertyCSS } from "./format-property.js";
4
+
5
+ //#region src/ssr/collect-auto-properties.ts
6
+ /**
7
+ * Scan rendered rules for custom property declarations and collect
8
+ * auto-inferred @property rules via the SSR collector.
9
+ *
10
+ * @param rules - Rendered style rules containing CSS declarations
11
+ * @param collector - SSR collector to emit @property CSS into
12
+ * @param styles - Original styles object (used to skip explicit @properties)
13
+ */
14
+ function collectAutoInferredProperties(rules, collector, styles) {
15
+ const registered = /* @__PURE__ */ new Set();
16
+ if (styles) {
17
+ const localProps = styles["@properties"];
18
+ if (localProps && typeof localProps === "object") for (const token of Object.keys(localProps)) {
19
+ const parsed = parsePropertyToken(token);
20
+ if (parsed.isValid) registered.add(parsed.cssName);
21
+ }
22
+ }
23
+ const resolver = new PropertyTypeResolver();
24
+ for (const rule of rules) {
25
+ if (!rule.declarations) continue;
26
+ resolver.scanDeclarations(rule.declarations, (name) => registered.has(name), (name, syntax, initialValue) => {
27
+ registered.add(name);
28
+ const css = formatPropertyCSS(name, {
29
+ syntax,
30
+ inherits: true,
31
+ initialValue
32
+ });
33
+ if (css) collector.collectProperty(`__auto:${name}`, css);
34
+ });
35
+ }
36
+ }
37
+
38
+ //#endregion
39
+ export { collectAutoInferredProperties };
40
+ //# sourceMappingURL=collect-auto-properties.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"collect-auto-properties.js","names":[],"sources":["../../src/ssr/collect-auto-properties.ts"],"sourcesContent":["/**\n * SSR auto-property inference.\n *\n * Scans rendered CSS declarations for custom properties whose types\n * can be inferred from their values (e.g. `--angle: 30deg` → `<angle>`).\n * Mirrors the client-side auto-inference in StyleInjector.inject().\n */\n\nimport type { StyleResult } from '../pipeline';\nimport { parsePropertyToken } from '../properties';\nimport { PropertyTypeResolver } from '../properties/property-type-resolver';\nimport type { Styles } from '../styles/types';\n\nimport type { ServerStyleCollector } from './collector';\nimport { formatPropertyCSS } from './format-property';\n\n/**\n * Scan rendered rules for custom property declarations and collect\n * auto-inferred @property rules via the SSR collector.\n *\n * @param rules - Rendered style rules containing CSS declarations\n * @param collector - SSR collector to emit @property CSS into\n * @param styles - Original styles object (used to skip explicit @properties)\n */\nexport function collectAutoInferredProperties(\n rules: StyleResult[],\n collector: ServerStyleCollector,\n styles?: Styles,\n): void {\n const registered = new Set<string>();\n\n if (styles) {\n const localProps = styles['@properties'];\n if (localProps && typeof localProps === 'object') {\n for (const token of Object.keys(localProps as Record<string, unknown>)) {\n const parsed = parsePropertyToken(token);\n if (parsed.isValid) {\n registered.add(parsed.cssName);\n }\n }\n }\n }\n\n const resolver = new PropertyTypeResolver();\n\n for (const rule of rules) {\n if (!rule.declarations) continue;\n resolver.scanDeclarations(\n rule.declarations,\n (name) => registered.has(name),\n (name, syntax, initialValue) => {\n registered.add(name);\n const css = formatPropertyCSS(name, {\n syntax,\n inherits: true,\n initialValue,\n });\n if (css) {\n collector.collectProperty(`__auto:${name}`, css);\n }\n },\n );\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAgB,8BACd,OACA,WACA,QACM;CACN,MAAM,6BAAa,IAAI,KAAa;AAEpC,KAAI,QAAQ;EACV,MAAM,aAAa,OAAO;AAC1B,MAAI,cAAc,OAAO,eAAe,SACtC,MAAK,MAAM,SAAS,OAAO,KAAK,WAAsC,EAAE;GACtE,MAAM,SAAS,mBAAmB,MAAM;AACxC,OAAI,OAAO,QACT,YAAW,IAAI,OAAO,QAAQ;;;CAMtC,MAAM,WAAW,IAAI,sBAAsB;AAE3C,MAAK,MAAM,QAAQ,OAAO;AACxB,MAAI,CAAC,KAAK,aAAc;AACxB,WAAS,iBACP,KAAK,eACJ,SAAS,WAAW,IAAI,KAAK,GAC7B,MAAM,QAAQ,iBAAiB;AAC9B,cAAW,IAAI,KAAK;GACpB,MAAM,MAAM,kBAAkB,MAAM;IAClC;IACA,UAAU;IACV;IACD,CAAC;AACF,OAAI,IACF,WAAU,gBAAgB,UAAU,QAAQ,IAAI;IAGrD"}
@@ -0,0 +1,85 @@
1
+ import { StyleResult } from "../pipeline/index.js";
2
+
3
+ //#region src/ssr/collector.d.ts
4
+ /**
5
+ * Cache state serialized to the client for hydration.
6
+ */
7
+ interface SSRCacheState {
8
+ /** cacheKey → className map, to pre-populate the client registry */
9
+ entries: Record<string, string>;
10
+ /** Counter value so client allocations don't collide with server ones */
11
+ classCounter: number;
12
+ }
13
+ declare class ServerStyleCollector {
14
+ private chunks;
15
+ private cacheKeyToClassName;
16
+ private classCounter;
17
+ private flushedKeys;
18
+ private propertyRules;
19
+ private flushedPropertyKeys;
20
+ private keyframeRules;
21
+ private flushedKeyframeKeys;
22
+ private globalStyles;
23
+ private flushedGlobalKeys;
24
+ private rawCSS;
25
+ private flushedRawKeys;
26
+ private keyframesCounter;
27
+ private internalsCollected;
28
+ /**
29
+ * Collect internal @property rules and :root token defaults.
30
+ * Mirrors markStylesGenerated() from the client-side injector.
31
+ * Called automatically on first chunk collection; idempotent.
32
+ */
33
+ collectInternals(): void;
34
+ /**
35
+ * Allocate a className for a cache key, server-side.
36
+ * Mirrors StyleInjector.allocateClassName but without DOM access.
37
+ */
38
+ allocateClassName(cacheKey: string): {
39
+ className: string;
40
+ isNewAllocation: boolean;
41
+ };
42
+ /**
43
+ * Record CSS rules for a chunk.
44
+ * Called by useStyles during server render.
45
+ */
46
+ collectChunk(cacheKey: string, className: string, rules: StyleResult[]): void;
47
+ /**
48
+ * Record a @property rule. Deduplicated by name.
49
+ */
50
+ collectProperty(name: string, css: string): void;
51
+ /**
52
+ * Record a @keyframes rule. Deduplicated by name.
53
+ */
54
+ collectKeyframes(name: string, css: string): void;
55
+ /**
56
+ * Allocate a keyframe name for SSR. Uses provided name or generates one.
57
+ */
58
+ allocateKeyframeName(providedName?: string): string;
59
+ /**
60
+ * Record global styles (from useGlobalStyles). Deduplicated by key.
61
+ */
62
+ collectGlobalStyles(key: string, css: string): void;
63
+ /**
64
+ * Record raw CSS text (from useRawCSS). Deduplicated by key.
65
+ */
66
+ collectRawCSS(key: string, css: string): void;
67
+ /**
68
+ * Extract all CSS collected so far as a single string.
69
+ * Includes @property and @keyframes rules.
70
+ * Used for non-streaming SSR (renderToString).
71
+ */
72
+ getCSS(): string;
73
+ /**
74
+ * Flush only newly collected CSS since the last flush.
75
+ * Used for streaming SSR (renderToPipeableStream + useServerInsertedHTML).
76
+ */
77
+ flushCSS(): string;
78
+ /**
79
+ * Serialize the cache state for client hydration.
80
+ */
81
+ getCacheState(): SSRCacheState;
82
+ }
83
+ //#endregion
84
+ export { SSRCacheState, ServerStyleCollector };
85
+ //# sourceMappingURL=collector.d.ts.map
@@ -0,0 +1,173 @@
1
+ import { INTERNAL_PROPERTIES, INTERNAL_TOKENS, getGlobalProperties, hasGlobalProperties } from "../config.js";
2
+ import { formatPropertyCSS } from "./format-property.js";
3
+ import { formatRules } from "./format-rules.js";
4
+
5
+ //#region src/ssr/collector.ts
6
+ /**
7
+ * ServerStyleCollector — server-safe style collector for SSR.
8
+ *
9
+ * Accumulates CSS rules and cache metadata during server rendering.
10
+ * This is the server-side counterpart to StyleInjector: it allocates
11
+ * sequential class names (t0, t1, …), formats CSS rules into text,
12
+ * and serializes the cache state for client hydration.
13
+ *
14
+ * One instance is created per HTTP request. Concurrent requests
15
+ * each get their own collector (via AsyncLocalStorage or React context).
16
+ */
17
+ function generateClassName(counter) {
18
+ return `t${counter}`;
19
+ }
20
+ var ServerStyleCollector = class {
21
+ chunks = /* @__PURE__ */ new Map();
22
+ cacheKeyToClassName = /* @__PURE__ */ new Map();
23
+ classCounter = 0;
24
+ flushedKeys = /* @__PURE__ */ new Set();
25
+ propertyRules = /* @__PURE__ */ new Map();
26
+ flushedPropertyKeys = /* @__PURE__ */ new Set();
27
+ keyframeRules = /* @__PURE__ */ new Map();
28
+ flushedKeyframeKeys = /* @__PURE__ */ new Set();
29
+ globalStyles = /* @__PURE__ */ new Map();
30
+ flushedGlobalKeys = /* @__PURE__ */ new Set();
31
+ rawCSS = /* @__PURE__ */ new Map();
32
+ flushedRawKeys = /* @__PURE__ */ new Set();
33
+ keyframesCounter = 0;
34
+ internalsCollected = false;
35
+ /**
36
+ * Collect internal @property rules and :root token defaults.
37
+ * Mirrors markStylesGenerated() from the client-side injector.
38
+ * Called automatically on first chunk collection; idempotent.
39
+ */
40
+ collectInternals() {
41
+ if (this.internalsCollected) return;
42
+ this.internalsCollected = true;
43
+ for (const [token, definition] of Object.entries(INTERNAL_PROPERTIES)) {
44
+ const css = formatPropertyCSS(token, definition);
45
+ if (css) this.collectProperty(`__internal:${token}`, css);
46
+ }
47
+ if (hasGlobalProperties()) {
48
+ const globalProps = getGlobalProperties();
49
+ if (globalProps) for (const [token, definition] of Object.entries(globalProps)) {
50
+ const css = formatPropertyCSS(token, definition);
51
+ if (css) this.collectProperty(`__global:${token}`, css);
52
+ }
53
+ }
54
+ const tokenEntries = Object.entries(INTERNAL_TOKENS);
55
+ if (tokenEntries.length > 0) {
56
+ const declarations = tokenEntries.map(([name, value]) => `${name}: ${value}`).join("; ");
57
+ this.collectProperty("__internal:root-tokens", `:root { ${declarations} }`);
58
+ }
59
+ }
60
+ /**
61
+ * Allocate a className for a cache key, server-side.
62
+ * Mirrors StyleInjector.allocateClassName but without DOM access.
63
+ */
64
+ allocateClassName(cacheKey) {
65
+ const existing = this.cacheKeyToClassName.get(cacheKey);
66
+ if (existing) return {
67
+ className: existing,
68
+ isNewAllocation: false
69
+ };
70
+ const className = generateClassName(this.classCounter++);
71
+ this.cacheKeyToClassName.set(cacheKey, className);
72
+ return {
73
+ className,
74
+ isNewAllocation: true
75
+ };
76
+ }
77
+ /**
78
+ * Record CSS rules for a chunk.
79
+ * Called by useStyles during server render.
80
+ */
81
+ collectChunk(cacheKey, className, rules) {
82
+ if (this.chunks.has(cacheKey)) return;
83
+ const css = formatRules(rules, className);
84
+ if (css) this.chunks.set(cacheKey, css);
85
+ }
86
+ /**
87
+ * Record a @property rule. Deduplicated by name.
88
+ */
89
+ collectProperty(name, css) {
90
+ if (!this.propertyRules.has(name)) this.propertyRules.set(name, css);
91
+ }
92
+ /**
93
+ * Record a @keyframes rule. Deduplicated by name.
94
+ */
95
+ collectKeyframes(name, css) {
96
+ if (!this.keyframeRules.has(name)) this.keyframeRules.set(name, css);
97
+ }
98
+ /**
99
+ * Allocate a keyframe name for SSR. Uses provided name or generates one.
100
+ */
101
+ allocateKeyframeName(providedName) {
102
+ return providedName ?? `k${this.keyframesCounter++}`;
103
+ }
104
+ /**
105
+ * Record global styles (from useGlobalStyles). Deduplicated by key.
106
+ */
107
+ collectGlobalStyles(key, css) {
108
+ if (!this.globalStyles.has(key)) this.globalStyles.set(key, css);
109
+ }
110
+ /**
111
+ * Record raw CSS text (from useRawCSS). Deduplicated by key.
112
+ */
113
+ collectRawCSS(key, css) {
114
+ if (!this.rawCSS.has(key)) this.rawCSS.set(key, css);
115
+ }
116
+ /**
117
+ * Extract all CSS collected so far as a single string.
118
+ * Includes @property and @keyframes rules.
119
+ * Used for non-streaming SSR (renderToString).
120
+ */
121
+ getCSS() {
122
+ const parts = [];
123
+ for (const css of this.propertyRules.values()) parts.push(css);
124
+ for (const css of this.rawCSS.values()) parts.push(css);
125
+ for (const css of this.globalStyles.values()) parts.push(css);
126
+ for (const css of this.chunks.values()) parts.push(css);
127
+ for (const css of this.keyframeRules.values()) parts.push(css);
128
+ return parts.join("\n");
129
+ }
130
+ /**
131
+ * Flush only newly collected CSS since the last flush.
132
+ * Used for streaming SSR (renderToPipeableStream + useServerInsertedHTML).
133
+ */
134
+ flushCSS() {
135
+ const parts = [];
136
+ for (const [name, css] of this.propertyRules) if (!this.flushedPropertyKeys.has(name)) {
137
+ parts.push(css);
138
+ this.flushedPropertyKeys.add(name);
139
+ }
140
+ for (const [key, css] of this.rawCSS) if (!this.flushedRawKeys.has(key)) {
141
+ parts.push(css);
142
+ this.flushedRawKeys.add(key);
143
+ }
144
+ for (const [key, css] of this.globalStyles) if (!this.flushedGlobalKeys.has(key)) {
145
+ parts.push(css);
146
+ this.flushedGlobalKeys.add(key);
147
+ }
148
+ for (const [key, css] of this.chunks) if (!this.flushedKeys.has(key)) {
149
+ parts.push(css);
150
+ this.flushedKeys.add(key);
151
+ }
152
+ for (const [name, css] of this.keyframeRules) if (!this.flushedKeyframeKeys.has(name)) {
153
+ parts.push(css);
154
+ this.flushedKeyframeKeys.add(name);
155
+ }
156
+ return parts.join("\n");
157
+ }
158
+ /**
159
+ * Serialize the cache state for client hydration.
160
+ */
161
+ getCacheState() {
162
+ const entries = {};
163
+ for (const [cacheKey, className] of this.cacheKeyToClassName) entries[cacheKey] = className;
164
+ return {
165
+ entries,
166
+ classCounter: this.classCounter
167
+ };
168
+ }
169
+ };
170
+
171
+ //#endregion
172
+ export { ServerStyleCollector };
173
+ //# sourceMappingURL=collector.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"collector.js","names":[],"sources":["../../src/ssr/collector.ts"],"sourcesContent":["/**\n * ServerStyleCollector — server-safe style collector for SSR.\n *\n * Accumulates CSS rules and cache metadata during server rendering.\n * This is the server-side counterpart to StyleInjector: it allocates\n * sequential class names (t0, t1, …), formats CSS rules into text,\n * and serializes the cache state for client hydration.\n *\n * One instance is created per HTTP request. Concurrent requests\n * each get their own collector (via AsyncLocalStorage or React context).\n */\n\nimport {\n getGlobalProperties,\n hasGlobalProperties,\n INTERNAL_PROPERTIES,\n INTERNAL_TOKENS,\n} from '../config';\nimport type { StyleResult } from '../pipeline';\nimport { formatPropertyCSS } from './format-property';\nimport { formatRules } from './format-rules';\n\n/**\n * Cache state serialized to the client for hydration.\n */\nexport interface SSRCacheState {\n /** cacheKey → className map, to pre-populate the client registry */\n entries: Record<string, string>;\n /** Counter value so client allocations don't collide with server ones */\n classCounter: number;\n}\n\nfunction generateClassName(counter: number): string {\n return `t${counter}`;\n}\n\nexport class ServerStyleCollector {\n private chunks = new Map<string, string>();\n private cacheKeyToClassName = new Map<string, string>();\n private classCounter = 0;\n private flushedKeys = new Set<string>();\n private propertyRules = new Map<string, string>();\n private flushedPropertyKeys = new Set<string>();\n private keyframeRules = new Map<string, string>();\n private flushedKeyframeKeys = new Set<string>();\n private globalStyles = new Map<string, string>();\n private flushedGlobalKeys = new Set<string>();\n private rawCSS = new Map<string, string>();\n private flushedRawKeys = new Set<string>();\n private keyframesCounter = 0;\n private internalsCollected = false;\n\n /**\n * Collect internal @property rules and :root token defaults.\n * Mirrors markStylesGenerated() from the client-side injector.\n * Called automatically on first chunk collection; idempotent.\n */\n collectInternals(): void {\n if (this.internalsCollected) return;\n this.internalsCollected = true;\n\n for (const [token, definition] of Object.entries(INTERNAL_PROPERTIES)) {\n const css = formatPropertyCSS(token, definition);\n if (css) {\n this.collectProperty(`__internal:${token}`, css);\n }\n }\n\n if (hasGlobalProperties()) {\n const globalProps = getGlobalProperties();\n if (globalProps) {\n for (const [token, definition] of Object.entries(globalProps)) {\n const css = formatPropertyCSS(token, definition);\n if (css) {\n this.collectProperty(`__global:${token}`, css);\n }\n }\n }\n }\n\n const tokenEntries = Object.entries(INTERNAL_TOKENS);\n if (tokenEntries.length > 0) {\n const declarations = tokenEntries\n .map(([name, value]) => `${name}: ${value}`)\n .join('; ');\n this.collectProperty(\n '__internal:root-tokens',\n `:root { ${declarations} }`,\n );\n }\n }\n\n /**\n * Allocate a className for a cache key, server-side.\n * Mirrors StyleInjector.allocateClassName but without DOM access.\n */\n allocateClassName(cacheKey: string): {\n className: string;\n isNewAllocation: boolean;\n } {\n const existing = this.cacheKeyToClassName.get(cacheKey);\n if (existing) {\n return { className: existing, isNewAllocation: false };\n }\n\n const className = generateClassName(this.classCounter++);\n this.cacheKeyToClassName.set(cacheKey, className);\n\n return { className, isNewAllocation: true };\n }\n\n /**\n * Record CSS rules for a chunk.\n * Called by useStyles during server render.\n */\n collectChunk(\n cacheKey: string,\n className: string,\n rules: StyleResult[],\n ): void {\n if (this.chunks.has(cacheKey)) return;\n const css = formatRules(rules, className);\n if (css) {\n this.chunks.set(cacheKey, css);\n }\n }\n\n /**\n * Record a @property rule. Deduplicated by name.\n */\n collectProperty(name: string, css: string): void {\n if (!this.propertyRules.has(name)) {\n this.propertyRules.set(name, css);\n }\n }\n\n /**\n * Record a @keyframes rule. Deduplicated by name.\n */\n collectKeyframes(name: string, css: string): void {\n if (!this.keyframeRules.has(name)) {\n this.keyframeRules.set(name, css);\n }\n }\n\n /**\n * Allocate a keyframe name for SSR. Uses provided name or generates one.\n */\n allocateKeyframeName(providedName?: string): string {\n return providedName ?? `k${this.keyframesCounter++}`;\n }\n\n /**\n * Record global styles (from useGlobalStyles). Deduplicated by key.\n */\n collectGlobalStyles(key: string, css: string): void {\n if (!this.globalStyles.has(key)) {\n this.globalStyles.set(key, css);\n }\n }\n\n /**\n * Record raw CSS text (from useRawCSS). Deduplicated by key.\n */\n collectRawCSS(key: string, css: string): void {\n if (!this.rawCSS.has(key)) {\n this.rawCSS.set(key, css);\n }\n }\n\n /**\n * Extract all CSS collected so far as a single string.\n * Includes @property and @keyframes rules.\n * Used for non-streaming SSR (renderToString).\n */\n getCSS(): string {\n const parts: string[] = [];\n\n for (const css of this.propertyRules.values()) {\n parts.push(css);\n }\n\n for (const css of this.rawCSS.values()) {\n parts.push(css);\n }\n\n for (const css of this.globalStyles.values()) {\n parts.push(css);\n }\n\n for (const css of this.chunks.values()) {\n parts.push(css);\n }\n\n for (const css of this.keyframeRules.values()) {\n parts.push(css);\n }\n\n return parts.join('\\n');\n }\n\n /**\n * Flush only newly collected CSS since the last flush.\n * Used for streaming SSR (renderToPipeableStream + useServerInsertedHTML).\n */\n flushCSS(): string {\n const parts: string[] = [];\n\n for (const [name, css] of this.propertyRules) {\n if (!this.flushedPropertyKeys.has(name)) {\n parts.push(css);\n this.flushedPropertyKeys.add(name);\n }\n }\n\n for (const [key, css] of this.rawCSS) {\n if (!this.flushedRawKeys.has(key)) {\n parts.push(css);\n this.flushedRawKeys.add(key);\n }\n }\n\n for (const [key, css] of this.globalStyles) {\n if (!this.flushedGlobalKeys.has(key)) {\n parts.push(css);\n this.flushedGlobalKeys.add(key);\n }\n }\n\n for (const [key, css] of this.chunks) {\n if (!this.flushedKeys.has(key)) {\n parts.push(css);\n this.flushedKeys.add(key);\n }\n }\n\n for (const [name, css] of this.keyframeRules) {\n if (!this.flushedKeyframeKeys.has(name)) {\n parts.push(css);\n this.flushedKeyframeKeys.add(name);\n }\n }\n\n return parts.join('\\n');\n }\n\n /**\n * Serialize the cache state for client hydration.\n */\n getCacheState(): SSRCacheState {\n const entries: Record<string, string> = {};\n for (const [cacheKey, className] of this.cacheKeyToClassName) {\n entries[cacheKey] = className;\n }\n return { entries, classCounter: this.classCounter };\n }\n}\n"],"mappings":"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"}
@@ -0,0 +1,8 @@
1
+ import { ServerStyleCollector } from "./collector.js";
2
+ import * as react from "react";
3
+
4
+ //#region src/ssr/context.d.ts
5
+ declare const TastySSRContext: react.Context<ServerStyleCollector | null>;
6
+ //#endregion
7
+ export { TastySSRContext };
8
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1,14 @@
1
+ import { createContext } from "react";
2
+
3
+ //#region src/ssr/context.ts
4
+ /**
5
+ * React context for SSR collector discovery.
6
+ *
7
+ * Used by Next.js TastyRegistry to provide the ServerStyleCollector
8
+ * to useStyles() via React context (the streaming-compatible path).
9
+ */
10
+ const TastySSRContext = createContext(null);
11
+
12
+ //#endregion
13
+ export { TastySSRContext };
14
+ //# sourceMappingURL=context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.js","names":[],"sources":["../../src/ssr/context.ts"],"sourcesContent":["/**\n * React context for SSR collector discovery.\n *\n * Used by Next.js TastyRegistry to provide the ServerStyleCollector\n * to useStyles() via React context (the streaming-compatible path).\n */\n\nimport { createContext } from 'react';\n\nimport type { ServerStyleCollector } from './collector';\n\nexport const TastySSRContext = createContext<ServerStyleCollector | null>(null);\n"],"mappings":";;;;;;;;;AAWA,MAAa,kBAAkB,cAA2C,KAAK"}
@@ -0,0 +1,22 @@
1
+ //#region src/ssr/format-global-rules.ts
2
+ /**
3
+ * Format an array of global StyleResult rules into a CSS text string.
4
+ *
5
+ * Rules already have their full selectors applied by renderStyles().
6
+ * Handles rootPrefix prepending and at-rule wrapping.
7
+ */
8
+ function formatGlobalRules(rules) {
9
+ if (rules.length === 0) return "";
10
+ const cssRules = [];
11
+ for (const rule of rules) {
12
+ const baseRule = `${rule.rootPrefix ? `${rule.rootPrefix} ${rule.selector}` : rule.selector} { ${rule.declarations} }`;
13
+ let fullRule = baseRule;
14
+ if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
15
+ cssRules.push(fullRule);
16
+ }
17
+ return cssRules.join("\n");
18
+ }
19
+
20
+ //#endregion
21
+ export { formatGlobalRules };
22
+ //# sourceMappingURL=format-global-rules.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-global-rules.js","names":[],"sources":["../../src/ssr/format-global-rules.ts"],"sourcesContent":["/**\n * Format global CSS rules for SSR output.\n *\n * Unlike formatRules() which applies className-based specificity doubling,\n * this function formats rules that already have their full selectors\n * (from renderStyles called with a selector string).\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Format an array of global StyleResult rules into a CSS text string.\n *\n * Rules already have their full selectors applied by renderStyles().\n * Handles rootPrefix prepending and at-rule wrapping.\n */\nexport function formatGlobalRules(rules: StyleResult[]): string {\n if (rules.length === 0) return '';\n\n const cssRules: string[] = [];\n\n for (const rule of rules) {\n const selector = rule.rootPrefix\n ? `${rule.rootPrefix} ${rule.selector}`\n : rule.selector;\n\n const baseRule = `${selector} { ${rule.declarations} }`;\n\n let fullRule = baseRule;\n if (rule.atRules && rule.atRules.length > 0) {\n fullRule = rule.atRules.reduce(\n (css, atRule) => `${atRule} { ${css} }`,\n baseRule,\n );\n }\n\n cssRules.push(fullRule);\n }\n\n return cssRules.join('\\n');\n}\n"],"mappings":";;;;;;;AAgBA,SAAgB,kBAAkB,OAA8B;AAC9D,KAAI,MAAM,WAAW,EAAG,QAAO;CAE/B,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,OAAO;EAKxB,MAAM,WAAW,GAJA,KAAK,aAClB,GAAG,KAAK,WAAW,GAAG,KAAK,aAC3B,KAAK,SAEoB,KAAK,KAAK,aAAa;EAEpD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}
@@ -0,0 +1,70 @@
1
+ import { createStyle } from "../styles/createStyle.js";
2
+ import { STYLE_HANDLER_MAP } from "../styles/index.js";
3
+
4
+ //#region src/ssr/format-keyframes.ts
5
+ /**
6
+ * Convert keyframes steps to a CSS string.
7
+ * Replicates SheetManager.stepsToCSS() without the class instance.
8
+ */
9
+ function stepsToCSS(steps) {
10
+ const rules = [];
11
+ for (const [key, value] of Object.entries(steps)) {
12
+ if (typeof value === "string") {
13
+ rules.push(`${key} { ${value.trim()} }`);
14
+ continue;
15
+ }
16
+ const styleMap = value || {};
17
+ const styleNames = Object.keys(styleMap).sort();
18
+ const handlerQueue = [];
19
+ const seenHandlers = /* @__PURE__ */ new Set();
20
+ styleNames.forEach((styleName) => {
21
+ let handlers = STYLE_HANDLER_MAP[styleName];
22
+ if (!handlers) handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];
23
+ handlers.forEach((handler) => {
24
+ if (!seenHandlers.has(handler)) {
25
+ seenHandlers.add(handler);
26
+ handlerQueue.push(handler);
27
+ }
28
+ });
29
+ });
30
+ const declarationPairs = [];
31
+ handlerQueue.forEach((handler) => {
32
+ const result = handler(handler.__lookupStyles.reduce((acc, name) => {
33
+ const v = styleMap[name];
34
+ if (v !== void 0) acc[name] = v;
35
+ return acc;
36
+ }, {}));
37
+ if (!result) return;
38
+ (Array.isArray(result) ? result : [result]).forEach((cssMap) => {
39
+ if (!cssMap || typeof cssMap !== "object") return;
40
+ const { $: _$, ...props } = cssMap;
41
+ Object.entries(props).forEach(([prop, val]) => {
42
+ if (val == null || val === "") return;
43
+ if (Array.isArray(val)) val.forEach((v) => {
44
+ if (v != null && v !== "") declarationPairs.push({
45
+ prop,
46
+ value: String(v)
47
+ });
48
+ });
49
+ else declarationPairs.push({
50
+ prop,
51
+ value: String(val)
52
+ });
53
+ });
54
+ });
55
+ });
56
+ const declarations = declarationPairs.map((d) => `${d.prop}: ${d.value}`).join("; ");
57
+ rules.push(`${key} { ${declarations.trim()} }`);
58
+ }
59
+ return rules.join(" ");
60
+ }
61
+ /**
62
+ * Format a @keyframes rule as a CSS string.
63
+ */
64
+ function formatKeyframesCSS(name, steps) {
65
+ return `@keyframes ${name} { ${stepsToCSS(steps)} }`;
66
+ }
67
+
68
+ //#endregion
69
+ export { formatKeyframesCSS };
70
+ //# sourceMappingURL=format-keyframes.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-keyframes.js","names":[],"sources":["../../src/ssr/format-keyframes.ts"],"sourcesContent":["/**\n * Format @keyframes CSS rules for SSR output.\n *\n * Replicates the stepsToCSS logic from SheetManager but as a\n * standalone function that doesn't need DOM access.\n */\n\nimport type { KeyframesSteps } from '../injector/types';\nimport { createStyle, STYLE_HANDLER_MAP } from '../styles';\nimport type { CSSMap, StyleHandler, StyleValueStateMap } from '../utils/styles';\n\n/**\n * Convert keyframes steps to a CSS string.\n * Replicates SheetManager.stepsToCSS() without the class instance.\n */\nfunction stepsToCSS(steps: KeyframesSteps): string {\n const rules: string[] = [];\n\n for (const [key, value] of Object.entries(steps)) {\n if (typeof value === 'string') {\n rules.push(`${key} { ${value.trim()} }`);\n continue;\n }\n\n const styleMap = (value || {}) as StyleValueStateMap;\n const styleNames = Object.keys(styleMap).sort();\n const handlerQueue: StyleHandler[] = [];\n const seenHandlers = new Set<StyleHandler>();\n\n styleNames.forEach((styleName) => {\n let handlers = STYLE_HANDLER_MAP[styleName];\n if (!handlers) {\n handlers = STYLE_HANDLER_MAP[styleName] = [createStyle(styleName)];\n }\n\n handlers.forEach((handler) => {\n if (!seenHandlers.has(handler)) {\n seenHandlers.add(handler);\n handlerQueue.push(handler);\n }\n });\n });\n\n const declarationPairs: { prop: string; value: string }[] = [];\n\n handlerQueue.forEach((handler) => {\n const lookup = handler.__lookupStyles;\n const filteredMap = lookup.reduce<StyleValueStateMap>((acc, name) => {\n const v = styleMap[name];\n if (v !== undefined) acc[name] = v;\n return acc;\n }, {});\n\n const result = handler(filteredMap);\n if (!result) return;\n\n const results = Array.isArray(result) ? result : [result];\n results.forEach((cssMap) => {\n if (!cssMap || typeof cssMap !== 'object') return;\n const { $: _$, ...props } = cssMap as CSSMap;\n\n Object.entries(props).forEach(([prop, val]) => {\n if (val == null || val === '') return;\n\n if (Array.isArray(val)) {\n val.forEach((v) => {\n if (v != null && v !== '') {\n declarationPairs.push({ prop, value: String(v) });\n }\n });\n } else {\n declarationPairs.push({ prop, value: String(val) });\n }\n });\n });\n });\n\n const declarations = declarationPairs\n .map((d) => `${d.prop}: ${d.value}`)\n .join('; ');\n\n rules.push(`${key} { ${declarations.trim()} }`);\n }\n\n return rules.join(' ');\n}\n\n/**\n * Format a @keyframes rule as a CSS string.\n */\nexport function formatKeyframesCSS(\n name: string,\n steps: KeyframesSteps,\n): string {\n const cssSteps = stepsToCSS(steps);\n return `@keyframes ${name} { ${cssSteps} }`;\n}\n"],"mappings":";;;;;;;;AAeA,SAAS,WAAW,OAA+B;CACjD,MAAM,QAAkB,EAAE;AAE1B,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,EAAE;AAChD,MAAI,OAAO,UAAU,UAAU;AAC7B,SAAM,KAAK,GAAG,IAAI,KAAK,MAAM,MAAM,CAAC,IAAI;AACxC;;EAGF,MAAM,WAAY,SAAS,EAAE;EAC7B,MAAM,aAAa,OAAO,KAAK,SAAS,CAAC,MAAM;EAC/C,MAAM,eAA+B,EAAE;EACvC,MAAM,+BAAe,IAAI,KAAmB;AAE5C,aAAW,SAAS,cAAc;GAChC,IAAI,WAAW,kBAAkB;AACjC,OAAI,CAAC,SACH,YAAW,kBAAkB,aAAa,CAAC,YAAY,UAAU,CAAC;AAGpE,YAAS,SAAS,YAAY;AAC5B,QAAI,CAAC,aAAa,IAAI,QAAQ,EAAE;AAC9B,kBAAa,IAAI,QAAQ;AACzB,kBAAa,KAAK,QAAQ;;KAE5B;IACF;EAEF,MAAM,mBAAsD,EAAE;AAE9D,eAAa,SAAS,YAAY;GAQhC,MAAM,SAAS,QAPA,QAAQ,eACI,QAA4B,KAAK,SAAS;IACnE,MAAM,IAAI,SAAS;AACnB,QAAI,MAAM,OAAW,KAAI,QAAQ;AACjC,WAAO;MACN,EAAE,CAAC,CAE6B;AACnC,OAAI,CAAC,OAAQ;AAGb,IADgB,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO,EACjD,SAAS,WAAW;AAC1B,QAAI,CAAC,UAAU,OAAO,WAAW,SAAU;IAC3C,MAAM,EAAE,GAAG,IAAI,GAAG,UAAU;AAE5B,WAAO,QAAQ,MAAM,CAAC,SAAS,CAAC,MAAM,SAAS;AAC7C,SAAI,OAAO,QAAQ,QAAQ,GAAI;AAE/B,SAAI,MAAM,QAAQ,IAAI,CACpB,KAAI,SAAS,MAAM;AACjB,UAAI,KAAK,QAAQ,MAAM,GACrB,kBAAiB,KAAK;OAAE;OAAM,OAAO,OAAO,EAAE;OAAE,CAAC;OAEnD;SAEF,kBAAiB,KAAK;MAAE;MAAM,OAAO,OAAO,IAAI;MAAE,CAAC;MAErD;KACF;IACF;EAEF,MAAM,eAAe,iBAClB,KAAK,MAAM,GAAG,EAAE,KAAK,IAAI,EAAE,QAAQ,CACnC,KAAK,KAAK;AAEb,QAAM,KAAK,GAAG,IAAI,KAAK,aAAa,MAAM,CAAC,IAAI;;AAGjD,QAAO,MAAM,KAAK,IAAI;;;;;AAMxB,SAAgB,mBACd,MACA,OACQ;AAER,QAAO,cAAc,KAAK,KADT,WAAW,MAAM,CACM"}
@@ -0,0 +1,48 @@
1
+ import { colorInitialValueToRgb, getEffectiveDefinition } from "../properties/index.js";
2
+ import { parseStyle } from "../utils/styles.js";
3
+
4
+ //#region src/ssr/format-property.ts
5
+ /**
6
+ * Format a single @property rule as a CSS string.
7
+ *
8
+ * Returns the full `@property --name { ... }` text, or empty string
9
+ * if the token is invalid. For color properties, also returns
10
+ * the companion `-rgb` property.
11
+ */
12
+ function formatPropertyCSS(token, definition) {
13
+ const result = getEffectiveDefinition(token, definition);
14
+ if (!result.isValid) return "";
15
+ const rules = [];
16
+ rules.push(buildPropertyRule(result.cssName, result.definition));
17
+ if (result.isColor) {
18
+ const rgbCssName = `${result.cssName}-rgb`;
19
+ const rgbInitial = colorInitialValueToRgb(result.definition.initialValue);
20
+ rules.push(buildPropertyRule(rgbCssName, {
21
+ syntax: "<number>+",
22
+ inherits: result.definition.inherits,
23
+ initialValue: rgbInitial
24
+ }));
25
+ }
26
+ return rules.join("\n");
27
+ }
28
+ function buildPropertyRule(cssName, definition) {
29
+ const parts = [];
30
+ if (definition.syntax != null) {
31
+ let syntax = String(definition.syntax).trim();
32
+ if (!/^['"]/u.test(syntax)) syntax = `"${syntax}"`;
33
+ parts.push(`syntax: ${syntax};`);
34
+ }
35
+ const inherits = definition.inherits ?? true;
36
+ parts.push(`inherits: ${inherits ? "true" : "false"};`);
37
+ if (definition.initialValue != null) {
38
+ let initialValueStr;
39
+ if (typeof definition.initialValue === "number") initialValueStr = String(definition.initialValue);
40
+ else initialValueStr = parseStyle(definition.initialValue).output;
41
+ parts.push(`initial-value: ${initialValueStr};`);
42
+ }
43
+ return `@property ${cssName} { ${parts.join(" ").trim()} }`;
44
+ }
45
+
46
+ //#endregion
47
+ export { formatPropertyCSS };
48
+ //# sourceMappingURL=format-property.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-property.js","names":[],"sources":["../../src/ssr/format-property.ts"],"sourcesContent":["/**\n * Format @property CSS rules for SSR output.\n *\n * Replicates the CSS construction from StyleInjector.property()\n * but returns a CSS string instead of inserting into the DOM.\n */\n\nimport type { PropertyDefinition } from '../injector/types';\nimport { colorInitialValueToRgb, getEffectiveDefinition } from '../properties';\nimport type { StyleValue } from '../utils/styles';\nimport { parseStyle } from '../utils/styles';\n\n/**\n * Format a single @property rule as a CSS string.\n *\n * Returns the full `@property --name { ... }` text, or empty string\n * if the token is invalid. For color properties, also returns\n * the companion `-rgb` property.\n */\nexport function formatPropertyCSS(\n token: string,\n definition: PropertyDefinition,\n): string {\n const result = getEffectiveDefinition(token, definition);\n if (!result.isValid) return '';\n\n const rules: string[] = [];\n\n rules.push(buildPropertyRule(result.cssName, result.definition));\n\n if (result.isColor) {\n const rgbCssName = `${result.cssName}-rgb`;\n const rgbInitial = colorInitialValueToRgb(result.definition.initialValue);\n rules.push(\n buildPropertyRule(rgbCssName, {\n syntax: '<number>+',\n inherits: result.definition.inherits,\n initialValue: rgbInitial,\n }),\n );\n }\n\n return rules.join('\\n');\n}\n\nfunction buildPropertyRule(\n cssName: string,\n definition: PropertyDefinition,\n): string {\n const parts: string[] = [];\n\n if (definition.syntax != null) {\n let syntax = String(definition.syntax).trim();\n if (!/^['\"]/u.test(syntax)) syntax = `\"${syntax}\"`;\n parts.push(`syntax: ${syntax};`);\n }\n\n const inherits = definition.inherits ?? true;\n parts.push(`inherits: ${inherits ? 'true' : 'false'};`);\n\n if (definition.initialValue != null) {\n let initialValueStr: string;\n if (typeof definition.initialValue === 'number') {\n initialValueStr = String(definition.initialValue);\n } else {\n initialValueStr = parseStyle(\n definition.initialValue as StyleValue,\n ).output;\n }\n parts.push(`initial-value: ${initialValueStr};`);\n }\n\n const declarations = parts.join(' ').trim();\n return `@property ${cssName} { ${declarations} }`;\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,kBACd,OACA,YACQ;CACR,MAAM,SAAS,uBAAuB,OAAO,WAAW;AACxD,KAAI,CAAC,OAAO,QAAS,QAAO;CAE5B,MAAM,QAAkB,EAAE;AAE1B,OAAM,KAAK,kBAAkB,OAAO,SAAS,OAAO,WAAW,CAAC;AAEhE,KAAI,OAAO,SAAS;EAClB,MAAM,aAAa,GAAG,OAAO,QAAQ;EACrC,MAAM,aAAa,uBAAuB,OAAO,WAAW,aAAa;AACzE,QAAM,KACJ,kBAAkB,YAAY;GAC5B,QAAQ;GACR,UAAU,OAAO,WAAW;GAC5B,cAAc;GACf,CAAC,CACH;;AAGH,QAAO,MAAM,KAAK,KAAK;;AAGzB,SAAS,kBACP,SACA,YACQ;CACR,MAAM,QAAkB,EAAE;AAE1B,KAAI,WAAW,UAAU,MAAM;EAC7B,IAAI,SAAS,OAAO,WAAW,OAAO,CAAC,MAAM;AAC7C,MAAI,CAAC,SAAS,KAAK,OAAO,CAAE,UAAS,IAAI,OAAO;AAChD,QAAM,KAAK,WAAW,OAAO,GAAG;;CAGlC,MAAM,WAAW,WAAW,YAAY;AACxC,OAAM,KAAK,aAAa,WAAW,SAAS,QAAQ,GAAG;AAEvD,KAAI,WAAW,gBAAgB,MAAM;EACnC,IAAI;AACJ,MAAI,OAAO,WAAW,iBAAiB,SACrC,mBAAkB,OAAO,WAAW,aAAa;MAEjD,mBAAkB,WAChB,WAAW,aACZ,CAAC;AAEJ,QAAM,KAAK,kBAAkB,gBAAgB,GAAG;;AAIlD,QAAO,aAAa,QAAQ,KADP,MAAM,KAAK,IAAI,CAAC,MAAM,CACG"}
@@ -0,0 +1,70 @@
1
+ //#region src/ssr/format-rules.ts
2
+ /**
3
+ * Resolve selectors for a rule, applying className-based specificity doubling
4
+ * and rootPrefix handling. Mirrors the logic in StyleInjector.inject().
5
+ */
6
+ function resolveSelector(rule, className) {
7
+ let selector = rule.selector;
8
+ if (rule.needsClassName) {
9
+ const selectorParts = selector ? selector.split("|||") : [""];
10
+ const classPrefix = `.${className}.${className}`;
11
+ selector = selectorParts.map((part) => {
12
+ const classSelector = part ? `${classPrefix}${part}` : classPrefix;
13
+ if (rule.rootPrefix) return `${rule.rootPrefix} ${classSelector}`;
14
+ return classSelector;
15
+ }).join(", ");
16
+ }
17
+ return selector;
18
+ }
19
+ /**
20
+ * Group rules by selector + at-rules and merge their declarations.
21
+ * Mirrors the grouping logic in SheetManager.insertRule().
22
+ */
23
+ function groupRules(rules) {
24
+ const groupMap = /* @__PURE__ */ new Map();
25
+ const order = [];
26
+ const atKey = (at) => at && at.length ? at.join("|") : "";
27
+ for (const r of rules) {
28
+ const key = `${atKey(r.atRules)}||${r.selector}`;
29
+ const existing = groupMap.get(key);
30
+ if (existing) existing.declarations = existing.declarations ? `${existing.declarations} ${r.declarations}` : r.declarations;
31
+ else {
32
+ groupMap.set(key, {
33
+ selector: r.selector,
34
+ atRules: r.atRules,
35
+ declarations: r.declarations
36
+ });
37
+ order.push(key);
38
+ }
39
+ }
40
+ return order.map((key) => groupMap.get(key));
41
+ }
42
+ /**
43
+ * Format an array of StyleResult rules into a CSS text string.
44
+ *
45
+ * Applies className-based specificity doubling (.cls.cls),
46
+ * groups rules by selector + at-rules, and wraps with at-rule blocks.
47
+ *
48
+ * Produces the same CSS text as SheetManager.insertRule() would insert
49
+ * into the DOM, but as a plain string suitable for SSR output.
50
+ */
51
+ function formatRules(rules, className) {
52
+ if (rules.length === 0) return "";
53
+ const grouped = groupRules(rules.map((rule) => ({
54
+ selector: resolveSelector(rule, className),
55
+ declarations: rule.declarations,
56
+ atRules: rule.atRules
57
+ })));
58
+ const cssRules = [];
59
+ for (const rule of grouped) {
60
+ const baseRule = `${rule.selector} { ${rule.declarations} }`;
61
+ let fullRule = baseRule;
62
+ if (rule.atRules && rule.atRules.length > 0) fullRule = rule.atRules.reduce((css, atRule) => `${atRule} { ${css} }`, baseRule);
63
+ cssRules.push(fullRule);
64
+ }
65
+ return cssRules.join("\n");
66
+ }
67
+
68
+ //#endregion
69
+ export { formatRules };
70
+ //# sourceMappingURL=format-rules.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"format-rules.js","names":[],"sources":["../../src/ssr/format-rules.ts"],"sourcesContent":["/**\n * Shared CSS rule formatting utility.\n *\n * Extracted from SheetManager to allow both the DOM-based injector (client)\n * and the ServerStyleCollector (server) to produce identical CSS text\n * from StyleResult arrays.\n */\n\nimport type { StyleResult } from '../pipeline';\n\n/**\n * Resolve selectors for a rule, applying className-based specificity doubling\n * and rootPrefix handling. Mirrors the logic in StyleInjector.inject().\n */\nfunction resolveSelector(rule: StyleResult, className: string): string {\n let selector = rule.selector;\n\n if (rule.needsClassName) {\n const selectorParts = selector ? selector.split('|||') : [''];\n const classPrefix = `.${className}.${className}`;\n\n selector = selectorParts\n .map((part) => {\n const classSelector = part ? `${classPrefix}${part}` : classPrefix;\n\n if (rule.rootPrefix) {\n return `${rule.rootPrefix} ${classSelector}`;\n }\n return classSelector;\n })\n .join(', ');\n }\n\n return selector;\n}\n\n/**\n * Group rules by selector + at-rules and merge their declarations.\n * Mirrors the grouping logic in SheetManager.insertRule().\n */\nfunction groupRules(\n rules: { selector: string; declarations: string; atRules?: string[] }[],\n): { selector: string; declarations: string; atRules?: string[] }[] {\n const groupMap = new Map<\n string,\n { selector: string; atRules?: string[]; declarations: string }\n >();\n const order: string[] = [];\n\n const atKey = (at?: string[]) => (at && at.length ? at.join('|') : '');\n\n for (const r of rules) {\n const key = `${atKey(r.atRules)}||${r.selector}`;\n const existing = groupMap.get(key);\n if (existing) {\n existing.declarations = existing.declarations\n ? `${existing.declarations} ${r.declarations}`\n : r.declarations;\n } else {\n groupMap.set(key, {\n selector: r.selector,\n atRules: r.atRules,\n declarations: r.declarations,\n });\n order.push(key);\n }\n }\n\n return order.map((key) => groupMap.get(key)!);\n}\n\n/**\n * Format an array of StyleResult rules into a CSS text string.\n *\n * Applies className-based specificity doubling (.cls.cls),\n * groups rules by selector + at-rules, and wraps with at-rule blocks.\n *\n * Produces the same CSS text as SheetManager.insertRule() would insert\n * into the DOM, but as a plain string suitable for SSR output.\n */\nexport function formatRules(rules: StyleResult[], className: string): string {\n if (rules.length === 0) return '';\n\n const resolvedRules = rules.map((rule) => ({\n selector: resolveSelector(rule, className),\n declarations: rule.declarations,\n atRules: rule.atRules,\n }));\n\n const grouped = groupRules(resolvedRules);\n const cssRules: string[] = [];\n\n for (const rule of grouped) {\n const baseRule = `${rule.selector} { ${rule.declarations} }`;\n\n let fullRule = baseRule;\n if (rule.atRules && rule.atRules.length > 0) {\n fullRule = rule.atRules.reduce(\n (css, atRule) => `${atRule} { ${css} }`,\n baseRule,\n );\n }\n\n cssRules.push(fullRule);\n }\n\n return cssRules.join('\\n');\n}\n"],"mappings":";;;;;AAcA,SAAS,gBAAgB,MAAmB,WAA2B;CACrE,IAAI,WAAW,KAAK;AAEpB,KAAI,KAAK,gBAAgB;EACvB,MAAM,gBAAgB,WAAW,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG;EAC7D,MAAM,cAAc,IAAI,UAAU,GAAG;AAErC,aAAW,cACR,KAAK,SAAS;GACb,MAAM,gBAAgB,OAAO,GAAG,cAAc,SAAS;AAEvD,OAAI,KAAK,WACP,QAAO,GAAG,KAAK,WAAW,GAAG;AAE/B,UAAO;IACP,CACD,KAAK,KAAK;;AAGf,QAAO;;;;;;AAOT,SAAS,WACP,OACkE;CAClE,MAAM,2BAAW,IAAI,KAGlB;CACH,MAAM,QAAkB,EAAE;CAE1B,MAAM,SAAS,OAAmB,MAAM,GAAG,SAAS,GAAG,KAAK,IAAI,GAAG;AAEnE,MAAK,MAAM,KAAK,OAAO;EACrB,MAAM,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE;EACtC,MAAM,WAAW,SAAS,IAAI,IAAI;AAClC,MAAI,SACF,UAAS,eAAe,SAAS,eAC7B,GAAG,SAAS,aAAa,GAAG,EAAE,iBAC9B,EAAE;OACD;AACL,YAAS,IAAI,KAAK;IAChB,UAAU,EAAE;IACZ,SAAS,EAAE;IACX,cAAc,EAAE;IACjB,CAAC;AACF,SAAM,KAAK,IAAI;;;AAInB,QAAO,MAAM,KAAK,QAAQ,SAAS,IAAI,IAAI,CAAE;;;;;;;;;;;AAY/C,SAAgB,YAAY,OAAsB,WAA2B;AAC3E,KAAI,MAAM,WAAW,EAAG,QAAO;CAQ/B,MAAM,UAAU,WANM,MAAM,KAAK,UAAU;EACzC,UAAU,gBAAgB,MAAM,UAAU;EAC1C,cAAc,KAAK;EACnB,SAAS,KAAK;EACf,EAAE,CAEsC;CACzC,MAAM,WAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,SAAS;EAC1B,MAAM,WAAW,GAAG,KAAK,SAAS,KAAK,KAAK,aAAa;EAEzD,IAAI,WAAW;AACf,MAAI,KAAK,WAAW,KAAK,QAAQ,SAAS,EACxC,YAAW,KAAK,QAAQ,QACrB,KAAK,WAAW,GAAG,OAAO,KAAK,IAAI,KACpC,SACD;AAGH,WAAS,KAAK,SAAS;;AAGzB,QAAO,SAAS,KAAK,KAAK"}