@tenphi/tasty 0.1.0 → 0.1.2
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/dist/_virtual/_rolldown/runtime.js +8 -0
- package/dist/zero/{babel.d.mts → babel.d.ts} +6 -6
- package/dist/zero/{babel.mjs → babel.js} +6 -6
- package/dist/zero/babel.js.map +1 -0
- package/dist/{css-writer.d.mts → zero/css-writer.d.ts} +1 -1
- package/dist/{css-writer.mjs → zero/css-writer.js} +1 -1
- package/dist/zero/css-writer.js.map +1 -0
- package/dist/{extractor.d.mts → zero/extractor.d.ts} +3 -2
- package/dist/{extractor.mjs → zero/extractor.js} +6 -6
- package/dist/zero/extractor.js.map +1 -0
- package/dist/zero/index.d.ts +3 -0
- package/dist/zero/{index.mjs → index.js} +2 -2
- package/dist/zero/{next.d.mts → next.d.ts} +1 -1
- package/dist/zero/{next.mjs → next.js} +2 -2
- package/dist/zero/next.js.map +1 -0
- package/package.json +16 -23
- package/dist/_virtual/_rolldown/runtime.mjs +0 -7
- package/dist/chunks/cacheKey.mjs +0 -70
- package/dist/chunks/cacheKey.mjs.map +0 -1
- package/dist/chunks/definitions.mjs +0 -260
- package/dist/chunks/definitions.mjs.map +0 -1
- package/dist/chunks/renderChunk.mjs +0 -61
- package/dist/chunks/renderChunk.mjs.map +0 -1
- package/dist/config.mjs +0 -231
- package/dist/config.mjs.map +0 -1
- package/dist/css-writer.mjs.map +0 -1
- package/dist/extractor.mjs.map +0 -1
- package/dist/injector/injector.mjs +0 -404
- package/dist/injector/injector.mjs.map +0 -1
- package/dist/injector/sheet-manager.mjs +0 -714
- package/dist/injector/sheet-manager.mjs.map +0 -1
- package/dist/injector/types.d.mts +0 -18
- package/dist/keyframes/index.mjs +0 -156
- package/dist/keyframes/index.mjs.map +0 -1
- package/dist/parser/classify.mjs +0 -319
- package/dist/parser/classify.mjs.map +0 -1
- package/dist/parser/const.mjs +0 -33
- package/dist/parser/const.mjs.map +0 -1
- package/dist/parser/lru.mjs +0 -109
- package/dist/parser/lru.mjs.map +0 -1
- package/dist/parser/parser.mjs +0 -116
- package/dist/parser/parser.mjs.map +0 -1
- package/dist/parser/tokenizer.mjs +0 -69
- package/dist/parser/tokenizer.mjs.map +0 -1
- package/dist/parser/types.d.mts +0 -37
- package/dist/parser/types.mjs +0 -46
- package/dist/parser/types.mjs.map +0 -1
- package/dist/pipeline/conditions.mjs +0 -377
- package/dist/pipeline/conditions.mjs.map +0 -1
- package/dist/pipeline/exclusive.mjs +0 -231
- package/dist/pipeline/exclusive.mjs.map +0 -1
- package/dist/pipeline/index.mjs +0 -635
- package/dist/pipeline/index.mjs.map +0 -1
- package/dist/pipeline/materialize.mjs +0 -821
- package/dist/pipeline/materialize.mjs.map +0 -1
- package/dist/pipeline/parseStateKey.mjs +0 -418
- package/dist/pipeline/parseStateKey.mjs.map +0 -1
- package/dist/pipeline/simplify.mjs +0 -557
- package/dist/pipeline/simplify.mjs.map +0 -1
- package/dist/plugins/okhsl-plugin.mjs +0 -345
- package/dist/plugins/okhsl-plugin.mjs.map +0 -1
- package/dist/plugins/types.d.mts +0 -49
- package/dist/properties/index.mjs +0 -141
- package/dist/properties/index.mjs.map +0 -1
- package/dist/states/index.mjs +0 -161
- package/dist/states/index.mjs.map +0 -1
- package/dist/styles/align.mjs +0 -14
- package/dist/styles/align.mjs.map +0 -1
- package/dist/styles/border.mjs +0 -114
- package/dist/styles/border.mjs.map +0 -1
- package/dist/styles/color.mjs +0 -23
- package/dist/styles/color.mjs.map +0 -1
- package/dist/styles/createStyle.mjs +0 -77
- package/dist/styles/createStyle.mjs.map +0 -1
- package/dist/styles/dimension.mjs +0 -97
- package/dist/styles/dimension.mjs.map +0 -1
- package/dist/styles/display.mjs +0 -67
- package/dist/styles/display.mjs.map +0 -1
- package/dist/styles/fade.mjs +0 -58
- package/dist/styles/fade.mjs.map +0 -1
- package/dist/styles/fill.mjs +0 -51
- package/dist/styles/fill.mjs.map +0 -1
- package/dist/styles/flow.mjs +0 -12
- package/dist/styles/flow.mjs.map +0 -1
- package/dist/styles/gap.mjs +0 -37
- package/dist/styles/gap.mjs.map +0 -1
- package/dist/styles/height.mjs +0 -20
- package/dist/styles/height.mjs.map +0 -1
- package/dist/styles/index.mjs +0 -9
- package/dist/styles/index.mjs.map +0 -1
- package/dist/styles/inset.mjs +0 -142
- package/dist/styles/inset.mjs.map +0 -1
- package/dist/styles/justify.mjs +0 -14
- package/dist/styles/justify.mjs.map +0 -1
- package/dist/styles/margin.mjs +0 -96
- package/dist/styles/margin.mjs.map +0 -1
- package/dist/styles/outline.mjs +0 -65
- package/dist/styles/outline.mjs.map +0 -1
- package/dist/styles/padding.mjs +0 -96
- package/dist/styles/padding.mjs.map +0 -1
- package/dist/styles/predefined.mjs +0 -232
- package/dist/styles/predefined.mjs.map +0 -1
- package/dist/styles/preset.mjs +0 -126
- package/dist/styles/preset.mjs.map +0 -1
- package/dist/styles/radius.mjs +0 -51
- package/dist/styles/radius.mjs.map +0 -1
- package/dist/styles/scrollbar.mjs +0 -105
- package/dist/styles/scrollbar.mjs.map +0 -1
- package/dist/styles/shadow.mjs +0 -24
- package/dist/styles/shadow.mjs.map +0 -1
- package/dist/styles/styledScrollbar.mjs +0 -38
- package/dist/styles/styledScrollbar.mjs.map +0 -1
- package/dist/styles/transition.mjs +0 -138
- package/dist/styles/transition.mjs.map +0 -1
- package/dist/styles/types.d.mts +0 -492
- package/dist/styles/width.mjs +0 -20
- package/dist/styles/width.mjs.map +0 -1
- package/dist/utils/cache-wrapper.mjs +0 -26
- package/dist/utils/cache-wrapper.mjs.map +0 -1
- package/dist/utils/case-converter.mjs +0 -8
- package/dist/utils/case-converter.mjs.map +0 -1
- package/dist/utils/hsl-to-rgb.mjs +0 -38
- package/dist/utils/hsl-to-rgb.mjs.map +0 -1
- package/dist/utils/is-dev-env.mjs +0 -19
- package/dist/utils/is-dev-env.mjs.map +0 -1
- package/dist/utils/merge-styles.mjs +0 -146
- package/dist/utils/merge-styles.mjs.map +0 -1
- package/dist/utils/okhsl-to-rgb.mjs +0 -296
- package/dist/utils/okhsl-to-rgb.mjs.map +0 -1
- package/dist/utils/process-tokens.mjs +0 -28
- package/dist/utils/process-tokens.mjs.map +0 -1
- package/dist/utils/resolve-recipes.mjs +0 -143
- package/dist/utils/resolve-recipes.mjs.map +0 -1
- package/dist/utils/string.mjs +0 -8
- package/dist/utils/string.mjs.map +0 -1
- package/dist/utils/styles.d.mts +0 -18
- package/dist/utils/styles.mjs +0 -346
- package/dist/utils/styles.mjs.map +0 -1
- package/dist/zero/babel.mjs.map +0 -1
- package/dist/zero/index.d.mts +0 -3
- package/dist/zero/next.mjs.map +0 -1
|
@@ -1,260 +0,0 @@
|
|
|
1
|
-
import { isSelector } from "../pipeline/index.mjs";
|
|
2
|
-
|
|
3
|
-
//#region src/chunks/definitions.ts
|
|
4
|
-
/**
|
|
5
|
-
* Style chunk definitions for CSS chunking optimization.
|
|
6
|
-
*
|
|
7
|
-
* Styles are grouped into chunks based on:
|
|
8
|
-
* 1. Handler dependencies - styles that share a handler MUST be in the same chunk
|
|
9
|
-
* 2. Logical grouping - related styles grouped for better cache reuse
|
|
10
|
-
*
|
|
11
|
-
* See STYLE_CHUNKING_SPEC.md for detailed rationale.
|
|
12
|
-
*
|
|
13
|
-
* ============================================================================
|
|
14
|
-
* ⚠️ CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES
|
|
15
|
-
* ============================================================================
|
|
16
|
-
*
|
|
17
|
-
* Style handlers declare their dependencies via `__lookupStyles` array.
|
|
18
|
-
* This creates a dependency graph where handlers read multiple style props.
|
|
19
|
-
*
|
|
20
|
-
* **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**
|
|
21
|
-
*
|
|
22
|
-
* Why this matters:
|
|
23
|
-
* 1. Each chunk computes a cache key from ONLY its own style values
|
|
24
|
-
* 2. If a handler reads a style from another chunk, that value isn't in the cache key
|
|
25
|
-
* 3. Changing the cross-chunk style won't invalidate this chunk's cache
|
|
26
|
-
* 4. Result: stale CSS output or incorrect cache hits
|
|
27
|
-
*
|
|
28
|
-
* Example of a violation:
|
|
29
|
-
* ```
|
|
30
|
-
* // flowStyle.__lookupStyles = ['display', 'flow']
|
|
31
|
-
* // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:
|
|
32
|
-
* // - User sets { display: 'grid', flow: 'column' }
|
|
33
|
-
* // - LAYOUT chunk caches CSS with flow=column, display=grid
|
|
34
|
-
* // - User changes to { display: 'flex', flow: 'column' }
|
|
35
|
-
* // - LAYOUT chunk cache key unchanged (only has 'flow')
|
|
36
|
-
* // - Returns stale CSS computed with display=grid!
|
|
37
|
-
* ```
|
|
38
|
-
*
|
|
39
|
-
* Before adding/moving styles, verify:
|
|
40
|
-
* 1. Find all handlers that use this style (grep for the style name in __lookupStyles)
|
|
41
|
-
* 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk
|
|
42
|
-
* ============================================================================
|
|
43
|
-
*/
|
|
44
|
-
/**
|
|
45
|
-
* Appearance chunk - visual styling with independent handlers
|
|
46
|
-
*/
|
|
47
|
-
const APPEARANCE_CHUNK_STYLES = [
|
|
48
|
-
"fill",
|
|
49
|
-
"color",
|
|
50
|
-
"opacity",
|
|
51
|
-
"border",
|
|
52
|
-
"radius",
|
|
53
|
-
"outline",
|
|
54
|
-
"outlineOffset",
|
|
55
|
-
"shadow",
|
|
56
|
-
"fade"
|
|
57
|
-
];
|
|
58
|
-
/**
|
|
59
|
-
* Font chunk - typography styles
|
|
60
|
-
*
|
|
61
|
-
* Handler dependencies (all styles in each handler MUST stay in this chunk):
|
|
62
|
-
* ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,
|
|
63
|
-
* fontWeight, fontStyle, font
|
|
64
|
-
*/
|
|
65
|
-
const FONT_CHUNK_STYLES = [
|
|
66
|
-
"preset",
|
|
67
|
-
"font",
|
|
68
|
-
"fontWeight",
|
|
69
|
-
"fontStyle",
|
|
70
|
-
"fontSize",
|
|
71
|
-
"lineHeight",
|
|
72
|
-
"letterSpacing",
|
|
73
|
-
"textTransform",
|
|
74
|
-
"fontFamily",
|
|
75
|
-
"textAlign",
|
|
76
|
-
"textDecoration",
|
|
77
|
-
"wordBreak",
|
|
78
|
-
"wordWrap",
|
|
79
|
-
"boldFontWeight"
|
|
80
|
-
];
|
|
81
|
-
/**
|
|
82
|
-
* Dimension chunk - sizing and spacing
|
|
83
|
-
*
|
|
84
|
-
* Handler dependencies (all styles in each handler MUST stay in this chunk):
|
|
85
|
-
* ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline
|
|
86
|
-
* ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline
|
|
87
|
-
* ⚠️ widthStyle: width, minWidth, maxWidth
|
|
88
|
-
* ⚠️ heightStyle: height, minHeight, maxHeight
|
|
89
|
-
*/
|
|
90
|
-
const DIMENSION_CHUNK_STYLES = [
|
|
91
|
-
"padding",
|
|
92
|
-
"paddingTop",
|
|
93
|
-
"paddingRight",
|
|
94
|
-
"paddingBottom",
|
|
95
|
-
"paddingLeft",
|
|
96
|
-
"paddingBlock",
|
|
97
|
-
"paddingInline",
|
|
98
|
-
"margin",
|
|
99
|
-
"marginTop",
|
|
100
|
-
"marginRight",
|
|
101
|
-
"marginBottom",
|
|
102
|
-
"marginLeft",
|
|
103
|
-
"marginBlock",
|
|
104
|
-
"marginInline",
|
|
105
|
-
"width",
|
|
106
|
-
"minWidth",
|
|
107
|
-
"maxWidth",
|
|
108
|
-
"height",
|
|
109
|
-
"minHeight",
|
|
110
|
-
"maxHeight",
|
|
111
|
-
"flexBasis",
|
|
112
|
-
"flexGrow",
|
|
113
|
-
"flexShrink",
|
|
114
|
-
"flex"
|
|
115
|
-
];
|
|
116
|
-
/**
|
|
117
|
-
* Display chunk - display mode, layout flow, text overflow, and scrollbar
|
|
118
|
-
*
|
|
119
|
-
* Handler dependencies (all styles in each handler MUST stay in this chunk):
|
|
120
|
-
* ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace
|
|
121
|
-
* ⚠️ flowStyle: display, flow
|
|
122
|
-
* ⚠️ gapStyle: display, flow, gap
|
|
123
|
-
* ⚠️ scrollbarStyle: scrollbar, overflow
|
|
124
|
-
*/
|
|
125
|
-
const DISPLAY_CHUNK_STYLES = [
|
|
126
|
-
"display",
|
|
127
|
-
"hide",
|
|
128
|
-
"textOverflow",
|
|
129
|
-
"overflow",
|
|
130
|
-
"whiteSpace",
|
|
131
|
-
"flow",
|
|
132
|
-
"gap",
|
|
133
|
-
"scrollbar",
|
|
134
|
-
"styledScrollbar"
|
|
135
|
-
];
|
|
136
|
-
/**
|
|
137
|
-
* Layout chunk - flex/grid alignment and grid templates
|
|
138
|
-
*
|
|
139
|
-
* Note: flow and gap are in DISPLAY chunk due to handler dependencies
|
|
140
|
-
* (flowStyle and gapStyle both require 'display' prop).
|
|
141
|
-
*/
|
|
142
|
-
const LAYOUT_CHUNK_STYLES = [
|
|
143
|
-
"placeItems",
|
|
144
|
-
"placeContent",
|
|
145
|
-
"alignItems",
|
|
146
|
-
"alignContent",
|
|
147
|
-
"justifyItems",
|
|
148
|
-
"justifyContent",
|
|
149
|
-
"align",
|
|
150
|
-
"justify",
|
|
151
|
-
"place",
|
|
152
|
-
"columnGap",
|
|
153
|
-
"rowGap",
|
|
154
|
-
"gridColumns",
|
|
155
|
-
"gridRows",
|
|
156
|
-
"gridTemplate",
|
|
157
|
-
"gridAreas",
|
|
158
|
-
"gridAutoFlow",
|
|
159
|
-
"gridAutoColumns",
|
|
160
|
-
"gridAutoRows"
|
|
161
|
-
];
|
|
162
|
-
/**
|
|
163
|
-
* Position chunk - element positioning
|
|
164
|
-
*
|
|
165
|
-
* Handler dependencies (all styles in each handler MUST stay in this chunk):
|
|
166
|
-
* ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left
|
|
167
|
-
*/
|
|
168
|
-
const POSITION_CHUNK_STYLES = [
|
|
169
|
-
"position",
|
|
170
|
-
"inset",
|
|
171
|
-
"insetBlock",
|
|
172
|
-
"insetInline",
|
|
173
|
-
"top",
|
|
174
|
-
"right",
|
|
175
|
-
"bottom",
|
|
176
|
-
"left",
|
|
177
|
-
"zIndex",
|
|
178
|
-
"gridArea",
|
|
179
|
-
"gridColumn",
|
|
180
|
-
"gridRow",
|
|
181
|
-
"order",
|
|
182
|
-
"placeSelf",
|
|
183
|
-
"alignSelf",
|
|
184
|
-
"justifySelf",
|
|
185
|
-
"transform",
|
|
186
|
-
"transition",
|
|
187
|
-
"animation"
|
|
188
|
-
];
|
|
189
|
-
const CHUNK_NAMES = {
|
|
190
|
-
COMBINED: "combined",
|
|
191
|
-
SUBCOMPONENTS: "subcomponents",
|
|
192
|
-
APPEARANCE: "appearance",
|
|
193
|
-
FONT: "font",
|
|
194
|
-
DIMENSION: "dimension",
|
|
195
|
-
DISPLAY: "display",
|
|
196
|
-
LAYOUT: "layout",
|
|
197
|
-
POSITION: "position",
|
|
198
|
-
MISC: "misc"
|
|
199
|
-
};
|
|
200
|
-
/**
|
|
201
|
-
* Pre-computed map for O(1) style-to-chunk lookup.
|
|
202
|
-
* Built once at module load time.
|
|
203
|
-
*/
|
|
204
|
-
const STYLE_TO_CHUNK = /* @__PURE__ */ new Map();
|
|
205
|
-
function populateStyleToChunkMap() {
|
|
206
|
-
for (const style of APPEARANCE_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);
|
|
207
|
-
for (const style of FONT_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);
|
|
208
|
-
for (const style of DIMENSION_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);
|
|
209
|
-
for (const style of DISPLAY_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);
|
|
210
|
-
for (const style of LAYOUT_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);
|
|
211
|
-
for (const style of POSITION_CHUNK_STYLES) STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);
|
|
212
|
-
}
|
|
213
|
-
populateStyleToChunkMap();
|
|
214
|
-
/**
|
|
215
|
-
* Chunk processing order. This ensures deterministic className allocation
|
|
216
|
-
* regardless of style key order in the input.
|
|
217
|
-
*/
|
|
218
|
-
const CHUNK_ORDER = [
|
|
219
|
-
CHUNK_NAMES.APPEARANCE,
|
|
220
|
-
CHUNK_NAMES.FONT,
|
|
221
|
-
CHUNK_NAMES.DIMENSION,
|
|
222
|
-
CHUNK_NAMES.DISPLAY,
|
|
223
|
-
CHUNK_NAMES.LAYOUT,
|
|
224
|
-
CHUNK_NAMES.POSITION,
|
|
225
|
-
CHUNK_NAMES.MISC,
|
|
226
|
-
CHUNK_NAMES.SUBCOMPONENTS
|
|
227
|
-
];
|
|
228
|
-
new Map(CHUNK_ORDER.map((name, index) => [name, index]));
|
|
229
|
-
/**
|
|
230
|
-
* Categorize style keys into chunks.
|
|
231
|
-
*
|
|
232
|
-
* Returns chunks in a deterministic order (by CHUNK_ORDER) regardless
|
|
233
|
-
* of the order of keys in the input styles object.
|
|
234
|
-
*
|
|
235
|
-
* @param styles - The styles object to categorize
|
|
236
|
-
* @returns Map of chunk name to array of style keys in that chunk (in priority order)
|
|
237
|
-
*/
|
|
238
|
-
function categorizeStyleKeys(styles) {
|
|
239
|
-
const chunkData = {};
|
|
240
|
-
const keys = Object.keys(styles);
|
|
241
|
-
for (const key of keys) {
|
|
242
|
-
if (key === "$" || key === "@keyframes" || key === "@properties" || key === "recipe") continue;
|
|
243
|
-
if (isSelector(key)) {
|
|
244
|
-
if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];
|
|
245
|
-
chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);
|
|
246
|
-
} else {
|
|
247
|
-
const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;
|
|
248
|
-
if (!chunkData[chunkName]) chunkData[chunkName] = [];
|
|
249
|
-
chunkData[chunkName].push(key);
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
const orderedChunks = /* @__PURE__ */ new Map();
|
|
253
|
-
for (const chunkName of CHUNK_ORDER) if (chunkData[chunkName] && chunkData[chunkName].length > 0) orderedChunks.set(chunkName, chunkData[chunkName].sort());
|
|
254
|
-
for (const chunkName of Object.keys(chunkData)) if (!orderedChunks.has(chunkName)) orderedChunks.set(chunkName, chunkData[chunkName].sort());
|
|
255
|
-
return orderedChunks;
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
//#endregion
|
|
259
|
-
export { CHUNK_NAMES, categorizeStyleKeys };
|
|
260
|
-
//# sourceMappingURL=definitions.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"definitions.mjs","names":[],"sources":["../../src/chunks/definitions.ts"],"sourcesContent":["/**\n * Style chunk definitions for CSS chunking optimization.\n *\n * Styles are grouped into chunks based on:\n * 1. Handler dependencies - styles that share a handler MUST be in the same chunk\n * 2. Logical grouping - related styles grouped for better cache reuse\n *\n * See STYLE_CHUNKING_SPEC.md for detailed rationale.\n *\n * ============================================================================\n * ⚠️ CRITICAL ARCHITECTURAL CONSTRAINT: NO CROSS-CHUNK HANDLER DEPENDENCIES\n * ============================================================================\n *\n * Style handlers declare their dependencies via `__lookupStyles` array.\n * This creates a dependency graph where handlers read multiple style props.\n *\n * **ALL styles in a handler's `__lookupStyles` MUST be in the SAME chunk.**\n *\n * Why this matters:\n * 1. Each chunk computes a cache key from ONLY its own style values\n * 2. If a handler reads a style from another chunk, that value isn't in the cache key\n * 3. Changing the cross-chunk style won't invalidate this chunk's cache\n * 4. Result: stale CSS output or incorrect cache hits\n *\n * Example of a violation:\n * ```\n * // flowStyle.__lookupStyles = ['display', 'flow']\n * // If 'display' is in DISPLAY chunk and 'flow' is in LAYOUT chunk:\n * // - User sets { display: 'grid', flow: 'column' }\n * // - LAYOUT chunk caches CSS with flow=column, display=grid\n * // - User changes to { display: 'flex', flow: 'column' }\n * // - LAYOUT chunk cache key unchanged (only has 'flow')\n * // - Returns stale CSS computed with display=grid!\n * ```\n *\n * Before adding/moving styles, verify:\n * 1. Find all handlers that use this style (grep for the style name in __lookupStyles)\n * 2. Ensure ALL styles from each handler's __lookupStyles are in the same chunk\n * ============================================================================\n */\n\nimport { isSelector } from '../pipeline';\n\n// ============================================================================\n// Chunk Style Lists\n// ============================================================================\n\n/**\n * Appearance chunk - visual styling with independent handlers\n */\nexport const APPEARANCE_CHUNK_STYLES = [\n 'fill', // fillStyle (independent)\n 'color', // colorStyle (independent)\n 'opacity', // independent\n 'border', // borderStyle (independent)\n 'radius', // radiusStyle (independent)\n 'outline', // outlineStyle: outline ↔ outlineOffset\n 'outlineOffset', // outlineStyle: outline ↔ outlineOffset\n 'shadow', // shadowStyle (independent)\n 'fade', // fadeStyle (independent)\n] as const;\n\n/**\n * Font chunk - typography styles\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ presetStyle: preset, fontSize, lineHeight, letterSpacing, textTransform,\n * fontWeight, fontStyle, font\n */\nexport const FONT_CHUNK_STYLES = [\n // All from presetStyle handler - MUST stay together\n 'preset',\n 'font',\n 'fontWeight',\n 'fontStyle',\n 'fontSize',\n 'lineHeight',\n 'letterSpacing',\n 'textTransform',\n // Independent text styles grouped for cohesion\n 'fontFamily', // independent alias (logical grouping with font styles)\n 'textAlign',\n 'textDecoration',\n 'wordBreak',\n 'wordWrap',\n 'boldFontWeight',\n] as const;\n\n/**\n * Dimension chunk - sizing and spacing\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ paddingStyle: padding, paddingTop/Right/Bottom/Left, paddingBlock/Inline\n * ⚠️ marginStyle: margin, marginTop/Right/Bottom/Left, marginBlock/Inline\n * ⚠️ widthStyle: width, minWidth, maxWidth\n * ⚠️ heightStyle: height, minHeight, maxHeight\n */\nexport const DIMENSION_CHUNK_STYLES = [\n // All from paddingStyle handler - MUST stay together\n 'padding',\n 'paddingTop',\n 'paddingRight',\n 'paddingBottom',\n 'paddingLeft',\n 'paddingBlock',\n 'paddingInline',\n // All from marginStyle handler - MUST stay together\n 'margin',\n 'marginTop',\n 'marginRight',\n 'marginBottom',\n 'marginLeft',\n 'marginBlock',\n 'marginInline',\n // widthStyle handler - MUST stay together\n 'width',\n 'minWidth',\n 'maxWidth',\n // heightStyle handler - MUST stay together\n 'height',\n 'minHeight',\n 'maxHeight',\n 'flexBasis',\n 'flexGrow',\n 'flexShrink',\n 'flex',\n] as const;\n\n/**\n * Display chunk - display mode, layout flow, text overflow, and scrollbar\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ displayStyle: display, hide, textOverflow, overflow, whiteSpace\n * ⚠️ flowStyle: display, flow\n * ⚠️ gapStyle: display, flow, gap\n * ⚠️ scrollbarStyle: scrollbar, overflow\n */\nexport const DISPLAY_CHUNK_STYLES = [\n // displayStyle handler\n 'display',\n 'hide',\n 'textOverflow',\n 'overflow', // also used by scrollbarStyle\n 'whiteSpace',\n // flowStyle handler (requires display)\n 'flow',\n // gapStyle handler (requires display, flow)\n 'gap',\n // scrollbarStyle handler (requires overflow)\n 'scrollbar',\n 'styledScrollbar', // styledScrollbarStyle (deprecated)\n] as const;\n\n/**\n * Layout chunk - flex/grid alignment and grid templates\n *\n * Note: flow and gap are in DISPLAY chunk due to handler dependencies\n * (flowStyle and gapStyle both require 'display' prop).\n */\nexport const LAYOUT_CHUNK_STYLES = [\n // Alignment styles (all independent handlers)\n 'placeItems',\n 'placeContent',\n 'alignItems',\n 'alignContent',\n 'justifyItems',\n 'justifyContent',\n 'align', // alignStyle (independent)\n 'justify', // justifyStyle (independent)\n 'place', // placeStyle (independent)\n 'columnGap',\n 'rowGap',\n // Grid template styles\n 'gridColumns',\n 'gridRows',\n 'gridTemplate',\n 'gridAreas',\n 'gridAutoFlow',\n 'gridAutoColumns',\n 'gridAutoRows',\n] as const;\n\n/**\n * Position chunk - element positioning\n *\n * Handler dependencies (all styles in each handler MUST stay in this chunk):\n * ⚠️ insetStyle: inset, insetBlock, insetInline, top, right, bottom, left\n */\nexport const POSITION_CHUNK_STYLES = [\n 'position',\n // All from insetStyle handler - MUST stay together\n 'inset',\n 'insetBlock',\n 'insetInline',\n 'top',\n 'right',\n 'bottom',\n 'left',\n 'zIndex',\n 'gridArea',\n 'gridColumn',\n 'gridRow',\n 'order',\n 'placeSelf',\n 'alignSelf',\n 'justifySelf',\n 'transform',\n 'transition',\n 'animation',\n] as const;\n\n// ============================================================================\n// Chunk Names\n// ============================================================================\n\nexport const CHUNK_NAMES = {\n /** Special chunk for styles that cannot be split (e.g., @starting-style) */\n COMBINED: 'combined',\n SUBCOMPONENTS: 'subcomponents',\n APPEARANCE: 'appearance',\n FONT: 'font',\n DIMENSION: 'dimension',\n DISPLAY: 'display',\n LAYOUT: 'layout',\n POSITION: 'position',\n MISC: 'misc',\n} as const;\n\nexport type ChunkName = (typeof CHUNK_NAMES)[keyof typeof CHUNK_NAMES];\n\n// ============================================================================\n// Style-to-Chunk Lookup Map (O(1) categorization)\n// ============================================================================\n\n/**\n * Pre-computed map for O(1) style-to-chunk lookup.\n * Built once at module load time.\n */\nexport const STYLE_TO_CHUNK = new Map<string, ChunkName>();\n\n// Populate the lookup map\nfunction populateStyleToChunkMap() {\n for (const style of APPEARANCE_CHUNK_STYLES) {\n STYLE_TO_CHUNK.set(style, CHUNK_NAMES.APPEARANCE);\n }\n for (const style of FONT_CHUNK_STYLES) {\n STYLE_TO_CHUNK.set(style, CHUNK_NAMES.FONT);\n }\n for (const style of DIMENSION_CHUNK_STYLES) {\n STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DIMENSION);\n }\n for (const style of DISPLAY_CHUNK_STYLES) {\n STYLE_TO_CHUNK.set(style, CHUNK_NAMES.DISPLAY);\n }\n for (const style of LAYOUT_CHUNK_STYLES) {\n STYLE_TO_CHUNK.set(style, CHUNK_NAMES.LAYOUT);\n }\n for (const style of POSITION_CHUNK_STYLES) {\n STYLE_TO_CHUNK.set(style, CHUNK_NAMES.POSITION);\n }\n}\n\n// Initialize at module load\npopulateStyleToChunkMap();\n\n// ============================================================================\n// Chunk Priority Order\n// ============================================================================\n\n/**\n * Chunk processing order. This ensures deterministic className allocation\n * regardless of style key order in the input.\n */\nconst CHUNK_ORDER: readonly string[] = [\n CHUNK_NAMES.APPEARANCE,\n CHUNK_NAMES.FONT,\n CHUNK_NAMES.DIMENSION,\n CHUNK_NAMES.DISPLAY,\n CHUNK_NAMES.LAYOUT,\n CHUNK_NAMES.POSITION,\n CHUNK_NAMES.MISC,\n CHUNK_NAMES.SUBCOMPONENTS,\n] as const;\n\n/**\n * Map from chunk name to its priority index for sorting.\n */\nconst _CHUNK_PRIORITY = new Map<string, number>(\n CHUNK_ORDER.map((name, index) => [name, index]),\n);\n\n// ============================================================================\n// Chunk Info Interface\n// ============================================================================\n\nexport interface ChunkInfo {\n /** Name of the chunk */\n name: ChunkName | string;\n /** Style keys belonging to this chunk */\n styleKeys: string[];\n}\n\n// ============================================================================\n// Style Categorization\n// ============================================================================\n\n/**\n * Categorize style keys into chunks.\n *\n * Returns chunks in a deterministic order (by CHUNK_ORDER) regardless\n * of the order of keys in the input styles object.\n *\n * @param styles - The styles object to categorize\n * @returns Map of chunk name to array of style keys in that chunk (in priority order)\n */\nexport function categorizeStyleKeys(\n styles: Record<string, unknown>,\n): Map<string, string[]> {\n // First pass: collect keys into chunks (unordered)\n const chunkData: Record<string, string[]> = {};\n const keys = Object.keys(styles);\n\n for (const key of keys) {\n // Skip the $ helper key (used for selector combinators)\n // Skip @keyframes and @properties (processed separately in useStyles)\n // Skip recipe (resolved before pipeline by resolveRecipes)\n if (\n key === '$' ||\n key === '@keyframes' ||\n key === '@properties' ||\n key === 'recipe'\n ) {\n continue;\n }\n\n if (isSelector(key)) {\n // All selectors go into the subcomponents chunk\n if (!chunkData[CHUNK_NAMES.SUBCOMPONENTS]) {\n chunkData[CHUNK_NAMES.SUBCOMPONENTS] = [];\n }\n chunkData[CHUNK_NAMES.SUBCOMPONENTS].push(key);\n } else {\n // Look up the chunk for this style, default to misc\n const chunkName = STYLE_TO_CHUNK.get(key) ?? CHUNK_NAMES.MISC;\n if (!chunkData[chunkName]) {\n chunkData[chunkName] = [];\n }\n chunkData[chunkName].push(key);\n }\n }\n\n // Second pass: build ordered Map based on CHUNK_ORDER\n const orderedChunks = new Map<string, string[]>();\n\n // Add chunks in priority order\n for (const chunkName of CHUNK_ORDER) {\n if (chunkData[chunkName] && chunkData[chunkName].length > 0) {\n // Sort keys within chunk for consistent cache key generation\n orderedChunks.set(chunkName, chunkData[chunkName].sort());\n }\n }\n\n // Handle any unknown chunks (shouldn't happen, but be defensive)\n for (const chunkName of Object.keys(chunkData)) {\n if (!orderedChunks.has(chunkName)) {\n orderedChunks.set(chunkName, chunkData[chunkName].sort());\n }\n }\n\n return orderedChunks;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;AASD,MAAa,oBAAoB;CAE/B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,yBAAyB;CAEpC;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;AAWD,MAAa,uBAAuB;CAElC;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACD;;;;;;;AAQD,MAAa,sBAAsB;CAEjC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;AAQD,MAAa,wBAAwB;CACnC;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAMD,MAAa,cAAc;CAEzB,UAAU;CACV,eAAe;CACf,YAAY;CACZ,MAAM;CACN,WAAW;CACX,SAAS;CACT,QAAQ;CACR,UAAU;CACV,MAAM;CACP;;;;;AAYD,MAAa,iCAAiB,IAAI,KAAwB;AAG1D,SAAS,0BAA0B;AACjC,MAAK,MAAM,SAAS,wBAClB,gBAAe,IAAI,OAAO,YAAY,WAAW;AAEnD,MAAK,MAAM,SAAS,kBAClB,gBAAe,IAAI,OAAO,YAAY,KAAK;AAE7C,MAAK,MAAM,SAAS,uBAClB,gBAAe,IAAI,OAAO,YAAY,UAAU;AAElD,MAAK,MAAM,SAAS,qBAClB,gBAAe,IAAI,OAAO,YAAY,QAAQ;AAEhD,MAAK,MAAM,SAAS,oBAClB,gBAAe,IAAI,OAAO,YAAY,OAAO;AAE/C,MAAK,MAAM,SAAS,sBAClB,gBAAe,IAAI,OAAO,YAAY,SAAS;;AAKnD,yBAAyB;;;;;AAUzB,MAAM,cAAiC;CACrC,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;CACb;AAKuB,IAAI,IAC1B,YAAY,KAAK,MAAM,UAAU,CAAC,MAAM,MAAM,CAAC,CAChD;;;;;;;;;;AA0BD,SAAgB,oBACd,QACuB;CAEvB,MAAM,YAAsC,EAAE;CAC9C,MAAM,OAAO,OAAO,KAAK,OAAO;AAEhC,MAAK,MAAM,OAAO,MAAM;AAItB,MACE,QAAQ,OACR,QAAQ,gBACR,QAAQ,iBACR,QAAQ,SAER;AAGF,MAAI,WAAW,IAAI,EAAE;AAEnB,OAAI,CAAC,UAAU,YAAY,eACzB,WAAU,YAAY,iBAAiB,EAAE;AAE3C,aAAU,YAAY,eAAe,KAAK,IAAI;SACzC;GAEL,MAAM,YAAY,eAAe,IAAI,IAAI,IAAI,YAAY;AACzD,OAAI,CAAC,UAAU,WACb,WAAU,aAAa,EAAE;AAE3B,aAAU,WAAW,KAAK,IAAI;;;CAKlC,MAAM,gCAAgB,IAAI,KAAuB;AAGjD,MAAK,MAAM,aAAa,YACtB,KAAI,UAAU,cAAc,UAAU,WAAW,SAAS,EAExD,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAK7D,MAAK,MAAM,aAAa,OAAO,KAAK,UAAU,CAC5C,KAAI,CAAC,cAAc,IAAI,UAAU,CAC/B,eAAc,IAAI,WAAW,UAAU,WAAW,MAAM,CAAC;AAI7D,QAAO"}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { extractLocalPredefinedStates } from "../states/index.mjs";
|
|
2
|
-
import { renderStyles } from "../pipeline/index.mjs";
|
|
3
|
-
import { CHUNK_NAMES } from "./definitions.mjs";
|
|
4
|
-
|
|
5
|
-
//#region src/chunks/renderChunk.ts
|
|
6
|
-
/**
|
|
7
|
-
* Render styles for a specific chunk.
|
|
8
|
-
*
|
|
9
|
-
* Creates a filtered styles object containing only the keys for this chunk,
|
|
10
|
-
* then delegates to the existing renderStyles function.
|
|
11
|
-
*
|
|
12
|
-
* IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')
|
|
13
|
-
* are always included in the filtered styles, regardless of which chunk is
|
|
14
|
-
* being rendered. This ensures that state references like '@mobile' in any
|
|
15
|
-
* chunk can be properly resolved by the pipeline.
|
|
16
|
-
*
|
|
17
|
-
* @param styles - The full styles object
|
|
18
|
-
* @param chunkName - Name of the chunk being rendered
|
|
19
|
-
* @param styleKeys - Keys of styles belonging to this chunk
|
|
20
|
-
* @returns RenderResult with rules for this chunk
|
|
21
|
-
*/
|
|
22
|
-
function renderStylesForChunk(styles, chunkName, styleKeys) {
|
|
23
|
-
if (styleKeys.length === 0) return {
|
|
24
|
-
rules: [],
|
|
25
|
-
className: ""
|
|
26
|
-
};
|
|
27
|
-
if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) return renderSubcomponentsChunk(styles, styleKeys);
|
|
28
|
-
const localPredefinedStates = extractLocalPredefinedStates(styles);
|
|
29
|
-
const filteredStyles = {};
|
|
30
|
-
for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
|
|
31
|
-
for (const key of styleKeys) {
|
|
32
|
-
const value = styles[key];
|
|
33
|
-
if (value !== void 0) filteredStyles[key] = value;
|
|
34
|
-
}
|
|
35
|
-
return renderStyles(filteredStyles);
|
|
36
|
-
}
|
|
37
|
-
/**
|
|
38
|
-
* Render the subcomponents chunk.
|
|
39
|
-
*
|
|
40
|
-
* Subcomponents (selectors like Label, &::before, etc.) contain nested
|
|
41
|
-
* style objects that need to be preserved in their entirety.
|
|
42
|
-
*
|
|
43
|
-
* @param styles - The full styles object
|
|
44
|
-
* @param selectorKeys - Keys of selectors in this chunk
|
|
45
|
-
* @returns RenderResult with rules for all subcomponents
|
|
46
|
-
*/
|
|
47
|
-
function renderSubcomponentsChunk(styles, selectorKeys) {
|
|
48
|
-
const localPredefinedStates = extractLocalPredefinedStates(styles);
|
|
49
|
-
const filteredStyles = {};
|
|
50
|
-
for (const [key, value] of Object.entries(localPredefinedStates)) filteredStyles[key] = value;
|
|
51
|
-
for (const key of selectorKeys) {
|
|
52
|
-
const value = styles[key];
|
|
53
|
-
if (value !== void 0) filteredStyles[key] = value;
|
|
54
|
-
}
|
|
55
|
-
if (styles.$ !== void 0) filteredStyles.$ = styles.$;
|
|
56
|
-
return renderStyles(filteredStyles);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
//#endregion
|
|
60
|
-
export { renderStylesForChunk };
|
|
61
|
-
//# sourceMappingURL=renderChunk.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"renderChunk.mjs","names":[],"sources":["../../src/chunks/renderChunk.ts"],"sourcesContent":["/**\n * Chunk-specific style rendering.\n *\n * Renders styles for a specific chunk by filtering the styles object\n * to only include relevant keys before passing to renderStyles.\n */\n\nimport type { RenderResult} from '../pipeline';\nimport { renderStyles } from '../pipeline';\nimport { extractLocalPredefinedStates } from '../states';\nimport type { Styles } from '../styles/types';\n\nimport { CHUNK_NAMES } from './definitions';\n\n/**\n * Render styles for a specific chunk.\n *\n * Creates a filtered styles object containing only the keys for this chunk,\n * then delegates to the existing renderStyles function.\n *\n * IMPORTANT: Local predefined states (e.g., '@mobile': '@media(w < 600px)')\n * are always included in the filtered styles, regardless of which chunk is\n * being rendered. This ensures that state references like '@mobile' in any\n * chunk can be properly resolved by the pipeline.\n *\n * @param styles - The full styles object\n * @param chunkName - Name of the chunk being rendered\n * @param styleKeys - Keys of styles belonging to this chunk\n * @returns RenderResult with rules for this chunk\n */\nexport function renderStylesForChunk(\n styles: Styles,\n chunkName: string,\n styleKeys: string[],\n): RenderResult {\n // Empty chunk - return empty result\n if (styleKeys.length === 0) {\n return { rules: [], className: '' };\n }\n\n // For subcomponents, we need to preserve the nested structure\n if (chunkName === CHUNK_NAMES.SUBCOMPONENTS) {\n return renderSubcomponentsChunk(styles, styleKeys);\n }\n\n // Extract local predefined states from the full styles object\n // These must be included for state resolution to work across chunks\n const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n // For regular chunks, create a filtered styles object\n // This is memory-efficient: we only create a shallow copy with filtered keys\n const filteredStyles: Styles = {};\n\n // First, add local predefined states so they're available for resolution\n for (const [key, value] of Object.entries(localPredefinedStates)) {\n filteredStyles[key] = value;\n }\n\n // Then add the chunk's style keys\n for (const key of styleKeys) {\n const value = styles[key];\n if (value !== undefined) {\n filteredStyles[key] = value;\n }\n }\n\n // Delegate to existing renderStyles\n return renderStyles(filteredStyles);\n}\n\n/**\n * Render the subcomponents chunk.\n *\n * Subcomponents (selectors like Label, &::before, etc.) contain nested\n * style objects that need to be preserved in their entirety.\n *\n * @param styles - The full styles object\n * @param selectorKeys - Keys of selectors in this chunk\n * @returns RenderResult with rules for all subcomponents\n */\nfunction renderSubcomponentsChunk(\n styles: Styles,\n selectorKeys: string[],\n): RenderResult {\n // Extract local predefined states from the full styles object\n // These must be included for state resolution to work in nested styles\n const localPredefinedStates = extractLocalPredefinedStates(styles);\n\n // Create a styles object containing only the selector keys\n const filteredStyles: Styles = {};\n\n // First, add local predefined states so they're available for resolution\n for (const [key, value] of Object.entries(localPredefinedStates)) {\n filteredStyles[key] = value;\n }\n\n // Then add the selector keys\n for (const key of selectorKeys) {\n const value = styles[key];\n if (value !== undefined) {\n filteredStyles[key] = value;\n }\n }\n\n // Also copy the $ helper if present (used for selector combinators)\n if (styles.$ !== undefined) {\n filteredStyles.$ = styles.$;\n }\n\n // Delegate to existing renderStyles\n return renderStyles(filteredStyles);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,qBACd,QACA,WACA,WACc;AAEd,KAAI,UAAU,WAAW,EACvB,QAAO;EAAE,OAAO,EAAE;EAAE,WAAW;EAAI;AAIrC,KAAI,cAAc,YAAY,cAC5B,QAAO,yBAAyB,QAAQ,UAAU;CAKpD,MAAM,wBAAwB,6BAA6B,OAAO;CAIlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,WAAW;EAC3B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,QAAO,aAAa,eAAe;;;;;;;;;;;;AAarC,SAAS,yBACP,QACA,cACc;CAGd,MAAM,wBAAwB,6BAA6B,OAAO;CAGlE,MAAM,iBAAyB,EAAE;AAGjC,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,sBAAsB,CAC9D,gBAAe,OAAO;AAIxB,MAAK,MAAM,OAAO,cAAc;EAC9B,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OACZ,gBAAe,OAAO;;AAK1B,KAAI,OAAO,MAAM,OACf,gBAAe,IAAI,OAAO;AAI5B,QAAO,aAAa,eAAe"}
|
package/dist/config.mjs
DELETED
|
@@ -1,231 +0,0 @@
|
|
|
1
|
-
import { CUSTOM_UNITS, getGlobalFuncs, getGlobalParser, normalizeColorTokenValue, setGlobalPredefinedTokens } from "./utils/styles.mjs";
|
|
2
|
-
import { isDevEnv } from "./utils/is-dev-env.mjs";
|
|
3
|
-
import { normalizeHandlerDefinition, registerHandler } from "./styles/predefined.mjs";
|
|
4
|
-
import { StyleInjector } from "./injector/injector.mjs";
|
|
5
|
-
import { setGlobalPredefinedStates } from "./states/index.mjs";
|
|
6
|
-
import { isSelector } from "./pipeline/index.mjs";
|
|
7
|
-
|
|
8
|
-
//#region src/config.ts
|
|
9
|
-
/**
|
|
10
|
-
* Tasty Configuration Module
|
|
11
|
-
*
|
|
12
|
-
* Centralizes all tasty configuration, including:
|
|
13
|
-
* - Style injector settings (nonce, cleanup thresholds, etc.)
|
|
14
|
-
* - Global predefined states for advanced state mapping
|
|
15
|
-
* - stylesGenerated flag that locks configuration after first style generation
|
|
16
|
-
*
|
|
17
|
-
* Configuration must be done BEFORE any styles are generated.
|
|
18
|
-
* After the first `inject()` call, configuration is locked and attempts to
|
|
19
|
-
* reconfigure will emit a warning and be ignored.
|
|
20
|
-
*/
|
|
21
|
-
const emittedWarnings = /* @__PURE__ */ new Set();
|
|
22
|
-
const devMode = isDevEnv();
|
|
23
|
-
/**
|
|
24
|
-
* Emit a warning only once
|
|
25
|
-
*/
|
|
26
|
-
function warnOnce(key, message) {
|
|
27
|
-
if (devMode && !emittedWarnings.has(key)) {
|
|
28
|
-
emittedWarnings.add(key);
|
|
29
|
-
console.warn(message);
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
let stylesGenerated = false;
|
|
33
|
-
let currentConfig = null;
|
|
34
|
-
let globalKeyframes = null;
|
|
35
|
-
let globalProperties = null;
|
|
36
|
-
let globalRecipes = null;
|
|
37
|
-
const GLOBAL_INJECTOR_KEY = "__TASTY_GLOBAL_INJECTOR__";
|
|
38
|
-
/**
|
|
39
|
-
* Create default configuration with optional test environment detection
|
|
40
|
-
*/
|
|
41
|
-
function createDefaultConfig(isTest) {
|
|
42
|
-
return {
|
|
43
|
-
maxRulesPerSheet: 8192,
|
|
44
|
-
unusedStylesThreshold: 500,
|
|
45
|
-
bulkCleanupDelay: 5e3,
|
|
46
|
-
idleCleanup: true,
|
|
47
|
-
forceTextInjection: isTest ?? false,
|
|
48
|
-
devMode: isDevEnv(),
|
|
49
|
-
bulkCleanupBatchRatio: .5,
|
|
50
|
-
unusedStylesMinAgeMs: 1e4
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
/**
|
|
54
|
-
* Check if styles have been generated (configuration is locked)
|
|
55
|
-
*/
|
|
56
|
-
function hasStylesGenerated() {
|
|
57
|
-
return stylesGenerated;
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* Set global keyframes (called from configure).
|
|
61
|
-
* Internal use only.
|
|
62
|
-
*/
|
|
63
|
-
function setGlobalKeyframes(keyframes) {
|
|
64
|
-
if (stylesGenerated) {
|
|
65
|
-
warnOnce("keyframes-after-styles", "[Tasty] Cannot update keyframes after styles have been generated.\nThe new keyframes will be ignored.");
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
globalKeyframes = keyframes;
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Set global properties (called from configure).
|
|
72
|
-
* Internal use only.
|
|
73
|
-
*/
|
|
74
|
-
function setGlobalProperties(properties) {
|
|
75
|
-
if (stylesGenerated) {
|
|
76
|
-
warnOnce("properties-after-styles", "[Tasty] Cannot update properties after styles have been generated.\nThe new properties will be ignored.");
|
|
77
|
-
return;
|
|
78
|
-
}
|
|
79
|
-
globalProperties = properties;
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* Get global recipes configuration.
|
|
83
|
-
* Returns null if no recipes configured (fast path for zero-overhead).
|
|
84
|
-
*/
|
|
85
|
-
function getGlobalRecipes() {
|
|
86
|
-
return globalRecipes;
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Set global recipes (called from configure).
|
|
90
|
-
* Internal use only.
|
|
91
|
-
*/
|
|
92
|
-
function setGlobalRecipes(recipes) {
|
|
93
|
-
if (stylesGenerated) {
|
|
94
|
-
warnOnce("recipes-after-styles", "[Tasty] Cannot update recipes after styles have been generated.\nThe new recipes will be ignored.");
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
if (devMode) for (const [name, recipeStyles] of Object.entries(recipes)) for (const key of Object.keys(recipeStyles)) {
|
|
98
|
-
if (isSelector(key)) warnOnce(`recipe-selector-${name}-${key}`, `[Tasty] Recipe "${name}" contains sub-element key "${key}". Recipes must be flat styles without sub-element keys. Remove the sub-element key from the recipe definition.`);
|
|
99
|
-
if (key === "recipe") warnOnce(`recipe-recursive-${name}`, `[Tasty] Recipe "${name}" contains a "recipe" key. Recipes cannot reference other recipes. Use space-separated names for composition: recipe: 'base elevated'.`);
|
|
100
|
-
}
|
|
101
|
-
globalRecipes = recipes;
|
|
102
|
-
}
|
|
103
|
-
/**
|
|
104
|
-
* Configure the Tasty style system.
|
|
105
|
-
*
|
|
106
|
-
* Must be called BEFORE any styles are generated (before first render that uses tasty).
|
|
107
|
-
* After styles are generated, configuration is locked and calls to configure() will
|
|
108
|
-
* emit a warning and be ignored.
|
|
109
|
-
*
|
|
110
|
-
* @example
|
|
111
|
-
* ```ts
|
|
112
|
-
* import { configure } from '@tenphi/tasty';
|
|
113
|
-
*
|
|
114
|
-
* // Configure before app renders
|
|
115
|
-
* configure({
|
|
116
|
-
* nonce: 'abc123',
|
|
117
|
-
* states: {
|
|
118
|
-
* '@mobile': '@media(w < 768px)',
|
|
119
|
-
* '@dark': '@root(theme=dark)',
|
|
120
|
-
* },
|
|
121
|
-
* });
|
|
122
|
-
* ```
|
|
123
|
-
*/
|
|
124
|
-
function configure(config = {}) {
|
|
125
|
-
if (stylesGenerated) {
|
|
126
|
-
warnOnce("configure-after-styles", "[Tasty] Cannot call configure() after styles have been generated.\nConfiguration must be done before the first render. The configuration will be ignored.");
|
|
127
|
-
return;
|
|
128
|
-
}
|
|
129
|
-
let mergedStates = {};
|
|
130
|
-
let mergedUnits = {};
|
|
131
|
-
let mergedFuncs = {};
|
|
132
|
-
let mergedHandlers = {};
|
|
133
|
-
let mergedTokens = {};
|
|
134
|
-
let mergedRecipes = {};
|
|
135
|
-
if (config.plugins) for (const plugin of config.plugins) {
|
|
136
|
-
if (plugin.states) mergedStates = {
|
|
137
|
-
...mergedStates,
|
|
138
|
-
...plugin.states
|
|
139
|
-
};
|
|
140
|
-
if (plugin.units) mergedUnits = {
|
|
141
|
-
...mergedUnits,
|
|
142
|
-
...plugin.units
|
|
143
|
-
};
|
|
144
|
-
if (plugin.funcs) mergedFuncs = {
|
|
145
|
-
...mergedFuncs,
|
|
146
|
-
...plugin.funcs
|
|
147
|
-
};
|
|
148
|
-
if (plugin.handlers) mergedHandlers = {
|
|
149
|
-
...mergedHandlers,
|
|
150
|
-
...plugin.handlers
|
|
151
|
-
};
|
|
152
|
-
if (plugin.tokens) mergedTokens = {
|
|
153
|
-
...mergedTokens,
|
|
154
|
-
...plugin.tokens
|
|
155
|
-
};
|
|
156
|
-
if (plugin.recipes) mergedRecipes = {
|
|
157
|
-
...mergedRecipes,
|
|
158
|
-
...plugin.recipes
|
|
159
|
-
};
|
|
160
|
-
}
|
|
161
|
-
if (config.states) mergedStates = {
|
|
162
|
-
...mergedStates,
|
|
163
|
-
...config.states
|
|
164
|
-
};
|
|
165
|
-
if (config.units) mergedUnits = {
|
|
166
|
-
...mergedUnits,
|
|
167
|
-
...config.units
|
|
168
|
-
};
|
|
169
|
-
if (config.funcs) mergedFuncs = {
|
|
170
|
-
...mergedFuncs,
|
|
171
|
-
...config.funcs
|
|
172
|
-
};
|
|
173
|
-
if (config.handlers) mergedHandlers = {
|
|
174
|
-
...mergedHandlers,
|
|
175
|
-
...config.handlers
|
|
176
|
-
};
|
|
177
|
-
if (config.tokens) mergedTokens = {
|
|
178
|
-
...mergedTokens,
|
|
179
|
-
...config.tokens
|
|
180
|
-
};
|
|
181
|
-
if (config.recipes) mergedRecipes = {
|
|
182
|
-
...mergedRecipes,
|
|
183
|
-
...config.recipes
|
|
184
|
-
};
|
|
185
|
-
if (Object.keys(mergedStates).length > 0) setGlobalPredefinedStates(mergedStates);
|
|
186
|
-
const parser = getGlobalParser();
|
|
187
|
-
if (config.parserCacheSize !== void 0) parser.updateOptions({ cacheSize: config.parserCacheSize });
|
|
188
|
-
if (Object.keys(mergedUnits).length > 0) {
|
|
189
|
-
const currentUnits = parser.getUnits() ?? CUSTOM_UNITS;
|
|
190
|
-
parser.setUnits({
|
|
191
|
-
...currentUnits,
|
|
192
|
-
...mergedUnits
|
|
193
|
-
});
|
|
194
|
-
}
|
|
195
|
-
if (Object.keys(mergedFuncs).length > 0) {
|
|
196
|
-
const currentFuncs = getGlobalFuncs();
|
|
197
|
-
const finalFuncs = {
|
|
198
|
-
...currentFuncs,
|
|
199
|
-
...mergedFuncs
|
|
200
|
-
};
|
|
201
|
-
parser.setFuncs(finalFuncs);
|
|
202
|
-
Object.assign(currentFuncs, mergedFuncs);
|
|
203
|
-
}
|
|
204
|
-
if (config.keyframes) setGlobalKeyframes(config.keyframes);
|
|
205
|
-
if (config.properties) setGlobalProperties(config.properties);
|
|
206
|
-
if (Object.keys(mergedHandlers).length > 0) for (const [name, definition] of Object.entries(mergedHandlers)) registerHandler(normalizeHandlerDefinition(name, definition));
|
|
207
|
-
if (Object.keys(mergedTokens).length > 0) {
|
|
208
|
-
const processedTokens = {};
|
|
209
|
-
for (const [key, value] of Object.entries(mergedTokens)) if (key.startsWith("#")) {
|
|
210
|
-
const normalized = normalizeColorTokenValue(value);
|
|
211
|
-
if (normalized === null) continue;
|
|
212
|
-
processedTokens[key] = String(normalized);
|
|
213
|
-
} else if (value === false) continue;
|
|
214
|
-
else processedTokens[key] = String(value);
|
|
215
|
-
setGlobalPredefinedTokens(processedTokens);
|
|
216
|
-
}
|
|
217
|
-
if (Object.keys(mergedRecipes).length > 0) setGlobalRecipes(mergedRecipes);
|
|
218
|
-
const { states: _states, parserCacheSize: _parserCacheSize, units: _units, funcs: _funcs, plugins: _plugins, keyframes: _keyframes, properties: _properties, handlers: _handlers, tokens: _tokens, recipes: _recipes, ...injectorConfig } = config;
|
|
219
|
-
const fullConfig = {
|
|
220
|
-
...createDefaultConfig(),
|
|
221
|
-
...currentConfig,
|
|
222
|
-
...injectorConfig
|
|
223
|
-
};
|
|
224
|
-
currentConfig = fullConfig;
|
|
225
|
-
const storage = typeof window !== "undefined" ? window : globalThis;
|
|
226
|
-
storage[GLOBAL_INJECTOR_KEY] = new StyleInjector(fullConfig);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
//#endregion
|
|
230
|
-
export { configure, getGlobalRecipes, hasStylesGenerated };
|
|
231
|
-
//# sourceMappingURL=config.mjs.map
|