@sugarcube-org/core 0.0.1-alpha.3 → 0.0.1-alpha.5
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/index.d.ts +696 -236
- package/dist/index.js +26 -10
- package/package.json +13 -7
package/dist/index.d.ts
CHANGED
|
@@ -1,429 +1,596 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Supported color formats for CSS output
|
|
5
|
+
*/
|
|
1
6
|
type ColorFormat = "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "oklch" | "p3";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Configuration for fluid (responsive) values
|
|
9
|
+
*/
|
|
5
10
|
type FluidConfig = {
|
|
11
|
+
/** Minimum viewport width in pixels */
|
|
6
12
|
min: number;
|
|
13
|
+
/** Maximum viewport width in pixels */
|
|
7
14
|
max: number;
|
|
8
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* A collection of token files with shared namespace.
|
|
18
|
+
* Represents either a starter kit or custom token collection.
|
|
19
|
+
*/
|
|
9
20
|
type TokenCollection = {
|
|
21
|
+
/** Array of source file paths for this collection */
|
|
10
22
|
source: string[];
|
|
23
|
+
/** Whether this is a starter kit or custom collection */
|
|
11
24
|
type: "starter-kit" | "custom";
|
|
25
|
+
/** Optional theme-specific source files */
|
|
12
26
|
themes?: Record<string, string[]>;
|
|
13
27
|
};
|
|
28
|
+
/**
|
|
29
|
+
* Multiple named collections of tokens.
|
|
30
|
+
* Each key is a collection name (e.g., "base", "ui", "marketing").
|
|
31
|
+
*/
|
|
14
32
|
type TokenCollections = Record<string, TokenCollection>;
|
|
33
|
+
/**
|
|
34
|
+
* Global options for token processing and output
|
|
35
|
+
*/
|
|
15
36
|
type OptionsConfig = {
|
|
37
|
+
/** Configuration for fluid (responsive) values */
|
|
16
38
|
fluid?: FluidConfig;
|
|
39
|
+
/** Prefix to add to all CSS variable names */
|
|
17
40
|
prefix?: string;
|
|
41
|
+
/** Default color format for all color tokens */
|
|
18
42
|
color?: ColorFormat;
|
|
19
43
|
};
|
|
44
|
+
/**
|
|
45
|
+
* Configuration for output directories
|
|
46
|
+
*/
|
|
20
47
|
type DirectoriesConfig = {
|
|
48
|
+
/** Directory containing token source files */
|
|
21
49
|
tokens: string;
|
|
50
|
+
/** Optional directory for component files */
|
|
22
51
|
components?: string;
|
|
52
|
+
/** Directory where CSS files will be written */
|
|
23
53
|
css: string;
|
|
24
54
|
};
|
|
55
|
+
/**
|
|
56
|
+
* Configuration for CSS output generation
|
|
57
|
+
*/
|
|
25
58
|
type CSSOutputConfig = {
|
|
59
|
+
/**
|
|
60
|
+
* Controls how CSS variables are organized in output files:
|
|
61
|
+
* - When false: Generates one file per collection, combining all tokens within each collection
|
|
62
|
+
* (e.g., base/tokens.variables.css, ui/tokens.variables.css)
|
|
63
|
+
* - When true: Generates separate files by token type within each collection
|
|
64
|
+
* (e.g., base/colors.variables.css, base/space.variables.css)
|
|
65
|
+
* @default false
|
|
66
|
+
*/
|
|
26
67
|
separate: boolean;
|
|
68
|
+
/** Whether to generate and manage an index.css file */
|
|
27
69
|
manageIndex?: boolean;
|
|
70
|
+
/** The format of the output CSS files */
|
|
28
71
|
format?: "css" | "scss" | "less";
|
|
29
72
|
};
|
|
73
|
+
/**
|
|
74
|
+
* Configuration for all output generation
|
|
75
|
+
*/
|
|
30
76
|
type OutputConfig = {
|
|
77
|
+
/** Directory configuration for all output files */
|
|
31
78
|
directories: DirectoriesConfig;
|
|
79
|
+
/** CSS-specific output configuration */
|
|
32
80
|
css: CSSOutputConfig;
|
|
33
81
|
};
|
|
82
|
+
/**
|
|
83
|
+
* The main configuration type for Sugarcube.
|
|
84
|
+
* Defines all settings for token processing and output generation.
|
|
85
|
+
*/
|
|
34
86
|
interface SugarcubeConfig {
|
|
87
|
+
/** Token source configuration, either a single collection or multiple named collections */
|
|
35
88
|
tokens: TokenCollection | TokenCollections;
|
|
89
|
+
/** Optional global processing options */
|
|
36
90
|
options?: OptionsConfig;
|
|
91
|
+
/** Output configuration for generated files */
|
|
37
92
|
output: OutputConfig;
|
|
38
93
|
}
|
|
39
94
|
|
|
40
95
|
/**
|
|
41
|
-
*
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
name: string;
|
|
45
|
-
content: string;
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Represents the output from generateCSS which always returns exactly one file
|
|
49
|
-
*/
|
|
50
|
-
type SingleFileOutput = [CSSFile];
|
|
51
|
-
/**
|
|
52
|
-
* Represents multiple CSS file outputs from generateSeparateFiles or generateSingleFile
|
|
53
|
-
*/
|
|
54
|
-
type CSSFileOutput = CSSFile[];
|
|
55
|
-
/**
|
|
56
|
-
* Result of the CSS generation process
|
|
57
|
-
* For generateCSS: Contains exactly one file
|
|
58
|
-
* For generate: Contains one or more files
|
|
96
|
+
* Base error type that all other error types extend from.
|
|
97
|
+
* Used as the foundation for all error types in the system.
|
|
98
|
+
* Provides a consistent structure for error messages across the codebase.
|
|
59
99
|
*/
|
|
60
|
-
type
|
|
61
|
-
|
|
100
|
+
type BaseError = {
|
|
101
|
+
/** A human-readable error message describing what went wrong */
|
|
102
|
+
message: string;
|
|
62
103
|
};
|
|
63
104
|
|
|
64
105
|
/**
|
|
65
|
-
* A token value that can either be a raw value or a reference
|
|
106
|
+
* A token value that can either be a raw value or a reference.
|
|
107
|
+
* This is the base type for all token values in the W3C Design Token Format.
|
|
108
|
+
* @template T - The type of token (e.g., "color", "dimension", etc.)
|
|
66
109
|
*/
|
|
67
110
|
type TokenValue<T extends TokenType> = RawTokenValue<T> | Reference<T>;
|
|
68
111
|
/**
|
|
69
|
-
* The actual value of a token without references
|
|
112
|
+
* The actual value of a token without references.
|
|
113
|
+
* This represents the concrete value that will be used in the final output.
|
|
114
|
+
* @template T - The type of token (e.g., "color", "dimension", etc.)
|
|
70
115
|
*/
|
|
71
116
|
type RawTokenValue<T extends TokenType> = T extends SimpleTokenType ? SimpleTokenValue<T> : T extends CompositeTokenType ? CompositeTokenValue<T> : never;
|
|
72
117
|
/**
|
|
73
|
-
* A reference to another token, with optional type checking
|
|
118
|
+
* A reference to another token, with optional type checking.
|
|
119
|
+
* References are strings that point to other tokens in the token tree.
|
|
120
|
+
* The phantom type parameter ensures type safety when resolving references.
|
|
121
|
+
* @template T - The type of token being referenced
|
|
74
122
|
*/
|
|
75
123
|
type Reference<T extends TokenType = TokenType> = string & {
|
|
124
|
+
/** Phantom type for type safety during reference resolution */
|
|
76
125
|
__tokenType?: T;
|
|
77
126
|
};
|
|
78
127
|
/**
|
|
79
|
-
* Metadata that can be attached to any node in the token tree
|
|
128
|
+
* Metadata that can be attached to any node in the token tree.
|
|
129
|
+
* This includes descriptions and custom extensions as defined in the W3C spec.
|
|
80
130
|
*/
|
|
81
131
|
type NodeMetadata = {
|
|
132
|
+
/** Optional description of the token or group */
|
|
82
133
|
$description?: string;
|
|
134
|
+
/** Optional custom extensions as defined in the W3C spec */
|
|
83
135
|
$extensions?: {
|
|
84
136
|
[key: string]: unknown;
|
|
85
137
|
};
|
|
86
138
|
};
|
|
87
139
|
/**
|
|
88
|
-
* A single token with its value and metadata
|
|
140
|
+
* A single token with its value and metadata.
|
|
141
|
+
* This is the basic building block of the token system.
|
|
89
142
|
*/
|
|
90
143
|
type Token = NodeMetadata & {
|
|
144
|
+
/** The value of the token, which can be a raw value or a reference */
|
|
91
145
|
$value: TokenValue<TokenType>;
|
|
146
|
+
/** Optional type specification, can be inherited from parent groups */
|
|
92
147
|
$type?: TokenType;
|
|
93
148
|
};
|
|
94
149
|
/**
|
|
95
|
-
* A group of tokens that can be nested
|
|
150
|
+
* A group of tokens that can be nested.
|
|
151
|
+
* The type allows for:
|
|
152
|
+
* - Regular token properties (non-$ prefixed) which must be Token | TokenGroup
|
|
153
|
+
* - Metadata properties from NodeMetadata (like $description, $extensions)
|
|
154
|
+
* - $type property for type inheritance as specified in the W3C spec
|
|
155
|
+
* - undefined to support optional metadata properties
|
|
96
156
|
*/
|
|
97
|
-
type TokenGroup = {
|
|
98
|
-
|
|
99
|
-
} & NodeMetadata & {
|
|
157
|
+
type TokenGroup = NodeMetadata & {
|
|
158
|
+
/** Optional type specification for the group, can be inherited by child tokens */
|
|
100
159
|
$type?: TokenType;
|
|
160
|
+
/** Dynamic properties that can be either tokens, token groups, or undefined */
|
|
161
|
+
[key: string]: Token | TokenGroup | TokenType | undefined;
|
|
101
162
|
};
|
|
102
163
|
/**
|
|
103
|
-
* All possible token types, either simple or composite
|
|
164
|
+
* All possible token types, either simple or composite.
|
|
165
|
+
* This is the union of all supported token types in the system.
|
|
104
166
|
*/
|
|
105
167
|
type TokenType = SimpleTokenType | CompositeTokenType;
|
|
106
168
|
/**
|
|
107
|
-
* Token types that contain a single value
|
|
169
|
+
* Token types that contain a single value.
|
|
170
|
+
* These are the basic building blocks of the token system.
|
|
108
171
|
*/
|
|
109
172
|
type SimpleTokenType = "color" | "dimension" | "fluidDimension" | "duration" | "cubicBezier" | "fontFamily" | "fontWeight" | "number";
|
|
110
173
|
/**
|
|
111
|
-
* Values for simple token types
|
|
174
|
+
* Values for simple token types.
|
|
175
|
+
* Maps each simple token type to its corresponding value type.
|
|
176
|
+
* @template T - The type of token (e.g., "color", "dimension", etc.)
|
|
112
177
|
*/
|
|
113
178
|
type SimpleTokenValue<T extends SimpleTokenType = SimpleTokenType> = T extends "color" ? Color : T extends "dimension" ? Dimension : T extends "fluidDimension" ? FluidDimension : T extends "duration" ? Duration : T extends "cubicBezier" ? CubicBezier : T extends "fontFamily" ? FontFamily : T extends "fontWeight" ? FontWeight : T extends "number" ? number : never;
|
|
114
179
|
/**
|
|
115
|
-
* Token types that contain multiple values or are structurally complex
|
|
180
|
+
* Token types that contain multiple values or are structurally complex.
|
|
181
|
+
* These types combine multiple simple types to create more complex tokens.
|
|
116
182
|
*/
|
|
117
183
|
type CompositeTokenType = AlwaysDecomposedType | "border" | "shadow" | "gradient" | "transition" | StructuralCompositeType;
|
|
118
184
|
/**
|
|
119
|
-
* Token types that must always be broken down into their constituent parts
|
|
185
|
+
* Token types that must always be broken down into their constituent parts.
|
|
186
|
+
* These types are never used directly in CSS output.
|
|
120
187
|
*/
|
|
121
188
|
type AlwaysDecomposedType = "typography";
|
|
122
189
|
/**
|
|
123
|
-
* Token types that define structural patterns
|
|
190
|
+
* Token types that define structural patterns.
|
|
191
|
+
* These types are used to define reusable patterns in the token system.
|
|
124
192
|
*/
|
|
125
193
|
type StructuralCompositeType = "strokeStyle";
|
|
126
194
|
/**
|
|
127
|
-
* Values for composite token types
|
|
195
|
+
* Values for composite token types.
|
|
196
|
+
* Maps each composite token type to its corresponding value type.
|
|
197
|
+
* @template T - The type of token (e.g., "typography", "border", etc.)
|
|
128
198
|
*/
|
|
129
199
|
type CompositeTokenValue<T extends CompositeTokenType = CompositeTokenType> = T extends "typography" ? Typography : T extends "border" ? Border : T extends "shadow" ? Shadow : T extends "gradient" ? Gradient : T extends "transition" ? Transition : T extends "strokeStyle" ? StrokeStyle : never;
|
|
130
200
|
/**
|
|
131
|
-
* A color value in any valid CSS color format
|
|
201
|
+
* A color value in any valid CSS color format.
|
|
202
|
+
* This can be any string that is valid in CSS color contexts.
|
|
132
203
|
*/
|
|
133
204
|
type Color = string;
|
|
134
205
|
/**
|
|
135
|
-
* A dimensional value with a numeric value and unit
|
|
206
|
+
* A dimensional value with a numeric value and unit.
|
|
207
|
+
* Used for measurements like width, height, spacing, etc.
|
|
136
208
|
*/
|
|
137
209
|
type Dimension = {
|
|
210
|
+
/** The numeric value of the dimension */
|
|
138
211
|
value: number;
|
|
212
|
+
/** The unit of measurement (px or rem) */
|
|
139
213
|
unit: "px" | "rem";
|
|
140
214
|
};
|
|
141
215
|
/**
|
|
142
|
-
* A fluid dimension that scales between min and max values
|
|
216
|
+
* A fluid dimension that scales between min and max values.
|
|
217
|
+
* Used for responsive design tokens that need to scale with viewport size.
|
|
143
218
|
*/
|
|
144
219
|
type FluidDimension = {
|
|
220
|
+
/** The minimum value at the smallest viewport size */
|
|
145
221
|
min: Dimension;
|
|
222
|
+
/** The maximum value at the largest viewport size */
|
|
146
223
|
max: Dimension;
|
|
147
224
|
};
|
|
148
225
|
/**
|
|
149
|
-
* A duration value with a numeric value and time unit
|
|
226
|
+
* A duration value with a numeric value and time unit.
|
|
227
|
+
* Used for animations, transitions, and other time-based values.
|
|
150
228
|
*/
|
|
151
229
|
type Duration = {
|
|
230
|
+
/** The numeric value of the duration */
|
|
152
231
|
value: number;
|
|
232
|
+
/** The unit of time (milliseconds or seconds) */
|
|
153
233
|
unit: "ms" | "s";
|
|
154
234
|
};
|
|
155
235
|
/**
|
|
156
|
-
* A cubic bezier curve defined by four control points
|
|
236
|
+
* A cubic bezier curve defined by four control points.
|
|
237
|
+
* Used for defining custom easing functions in animations and transitions.
|
|
238
|
+
* The four numbers represent the x,y coordinates of the two control points.
|
|
157
239
|
*/
|
|
158
240
|
type CubicBezier = [number, number, number, number];
|
|
159
241
|
/**
|
|
160
|
-
* A font family name or list of fallback fonts
|
|
242
|
+
* A font family name or list of fallback fonts.
|
|
243
|
+
* Can be a single font name or an array of fonts in order of preference.
|
|
161
244
|
*/
|
|
162
245
|
type FontFamily = string | string[];
|
|
163
246
|
/**
|
|
164
|
-
* A font weight value as either a number or semantic string
|
|
247
|
+
* A font weight value as either a number or semantic string.
|
|
248
|
+
* Numbers range from 100-900, strings are semantic names for common weights.
|
|
165
249
|
*/
|
|
166
250
|
type FontWeight = number | FontWeightString;
|
|
167
251
|
/**
|
|
168
|
-
* Semantic font weight names
|
|
252
|
+
* Semantic font weight names.
|
|
253
|
+
* These are standardized names for common font weights.
|
|
169
254
|
*/
|
|
170
255
|
type FontWeightString = "thin" | "hairline" | "extra-light" | "ultra-light" | "light" | "normal" | "regular" | "book" | "medium" | "semi-bold" | "demi-bold" | "bold" | "extra-bold" | "ultra-bold" | "black" | "heavy" | "extra-black" | "ultra-black";
|
|
171
256
|
/**
|
|
172
|
-
* Line cap style for strokes
|
|
257
|
+
* Line cap style for strokes.
|
|
258
|
+
* Defines how the end of a stroke should be rendered.
|
|
173
259
|
*/
|
|
174
260
|
type LineCap = "round" | "butt" | "square";
|
|
175
261
|
/**
|
|
176
|
-
* Typography token combining font properties
|
|
262
|
+
* Typography token combining font properties.
|
|
263
|
+
* This is a composite type that combines multiple font-related properties.
|
|
177
264
|
*/
|
|
178
265
|
type Typography = {
|
|
266
|
+
/** The font family to use */
|
|
179
267
|
fontFamily: TokenValue<"fontFamily">;
|
|
268
|
+
/** The size of the font */
|
|
180
269
|
fontSize: TokenValue<"dimension">;
|
|
270
|
+
/** Optional font weight */
|
|
181
271
|
fontWeight?: TokenValue<"fontWeight">;
|
|
272
|
+
/** Optional letter spacing */
|
|
182
273
|
letterSpacing?: TokenValue<"dimension">;
|
|
274
|
+
/** Optional line height as a multiplier */
|
|
183
275
|
lineHeight?: TokenValue<"number">;
|
|
184
276
|
};
|
|
185
277
|
/**
|
|
186
|
-
* Transition token defining animation properties
|
|
278
|
+
* Transition token defining animation properties.
|
|
279
|
+
* Used to define how properties should animate between states.
|
|
187
280
|
*/
|
|
188
281
|
type Transition = {
|
|
282
|
+
/** How long the transition should take */
|
|
189
283
|
duration: TokenValue<"duration">;
|
|
284
|
+
/** Optional delay before the transition starts */
|
|
190
285
|
delay?: TokenValue<"duration">;
|
|
286
|
+
/** The easing function to use for the transition */
|
|
191
287
|
timingFunction: TokenValue<"cubicBezier">;
|
|
192
288
|
};
|
|
193
289
|
/**
|
|
194
|
-
* Predefined stroke style keywords
|
|
290
|
+
* Predefined stroke style keywords.
|
|
291
|
+
* These are the standard stroke styles available in CSS.
|
|
195
292
|
*/
|
|
196
293
|
type StrokeStyleKeyword = "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset" | "inset";
|
|
197
294
|
/**
|
|
198
|
-
* Custom stroke style definition
|
|
295
|
+
* Custom stroke style definition.
|
|
296
|
+
* Used when the predefined stroke styles are not sufficient.
|
|
199
297
|
*/
|
|
200
298
|
type StrokeStyleCustom = {
|
|
299
|
+
/** Array of dimensions defining the dash pattern */
|
|
201
300
|
dashArray: Array<TokenValue<"dimension">>;
|
|
301
|
+
/** How the ends of the stroke should be rendered */
|
|
202
302
|
lineCap: LineCap;
|
|
203
303
|
};
|
|
204
304
|
/**
|
|
205
|
-
* A stroke style
|
|
305
|
+
* A stroke style can be either a predefined keyword or a custom definition.
|
|
306
|
+
* This allows for both simple and complex stroke styles.
|
|
206
307
|
*/
|
|
207
308
|
type StrokeStyle = StrokeStyleKeyword | StrokeStyleCustom;
|
|
208
309
|
/**
|
|
209
|
-
* Border token combining color, width, and style
|
|
310
|
+
* Border token combining color, width, and style.
|
|
311
|
+
* This is a composite type that defines a complete border.
|
|
210
312
|
*/
|
|
211
313
|
type Border = {
|
|
314
|
+
/** The color of the border */
|
|
212
315
|
color: TokenValue<"color">;
|
|
316
|
+
/** The width of the border */
|
|
213
317
|
width: TokenValue<"dimension">;
|
|
318
|
+
/** The style of the border, either a stroke style or a reference to one */
|
|
214
319
|
style: StrokeStyle | Reference<"strokeStyle">;
|
|
215
320
|
};
|
|
216
321
|
/**
|
|
217
|
-
*
|
|
322
|
+
* A single shadow definition.
|
|
323
|
+
* This is the basic building block for shadow tokens.
|
|
218
324
|
*/
|
|
219
325
|
type ShadowObject = {
|
|
326
|
+
/** The color of the shadow */
|
|
220
327
|
color: TokenValue<"color">;
|
|
328
|
+
/** Horizontal offset of the shadow */
|
|
221
329
|
offsetX: TokenValue<"dimension">;
|
|
330
|
+
/** Vertical offset of the shadow */
|
|
222
331
|
offsetY: TokenValue<"dimension">;
|
|
332
|
+
/** How much the shadow should blur */
|
|
223
333
|
blur: TokenValue<"dimension">;
|
|
334
|
+
/** How much the shadow should spread */
|
|
224
335
|
spread: TokenValue<"dimension">;
|
|
336
|
+
/** Whether the shadow should be inset */
|
|
225
337
|
inset?: boolean;
|
|
226
338
|
};
|
|
227
339
|
/**
|
|
228
|
-
*
|
|
340
|
+
* A shadow can be either a single shadow or multiple shadows.
|
|
341
|
+
* Multiple shadows are rendered in order, with later shadows appearing on top.
|
|
229
342
|
*/
|
|
230
343
|
type Shadow = ShadowObject | ShadowObject[];
|
|
231
344
|
/**
|
|
232
|
-
*
|
|
345
|
+
* A single stop in a gradient.
|
|
346
|
+
* Defines the color and position of a point in the gradient.
|
|
233
347
|
*/
|
|
234
348
|
type GradientStop = {
|
|
349
|
+
/** The color at this point in the gradient */
|
|
235
350
|
color: TokenValue<"color">;
|
|
351
|
+
/** The position of this point in the gradient (0-1) */
|
|
236
352
|
position: number | Reference<"number">;
|
|
237
353
|
};
|
|
238
354
|
/**
|
|
239
|
-
*
|
|
355
|
+
* A gradient is defined by a series of stops.
|
|
356
|
+
* The stops define how the gradient transitions between colors.
|
|
240
357
|
*/
|
|
241
358
|
type Gradient = GradientStop[];
|
|
242
359
|
|
|
243
360
|
/**
|
|
244
|
-
* Source information for a token, tracking its collection and theme
|
|
361
|
+
* Source information for a token, tracking its collection and theme.
|
|
362
|
+
* This metadata helps with error reporting and token organization.
|
|
245
363
|
*/
|
|
246
364
|
type TokenSource = {
|
|
365
|
+
/** The collection this token belongs to (e.g., "base", "ui", "marketing") */
|
|
247
366
|
collection: string;
|
|
367
|
+
/** Optional theme name (e.g., "dark", "light", "high-contrast") */
|
|
248
368
|
theme?: string;
|
|
369
|
+
/** The path to the source file containing this token */
|
|
249
370
|
sourcePath: string;
|
|
250
371
|
};
|
|
251
372
|
/**
|
|
252
|
-
* A complete token tree with collection and theme information
|
|
373
|
+
* A complete token tree with collection and theme information.
|
|
374
|
+
* This represents a single token file's contents with its metadata.
|
|
253
375
|
*/
|
|
254
376
|
type TokenTree = {
|
|
377
|
+
/** The collection this token tree belongs to (e.g., "base", "ui", "marketing") */
|
|
255
378
|
collection: string;
|
|
379
|
+
/** Optional theme name (e.g., "dark", "light", "high-contrast") */
|
|
256
380
|
theme?: string;
|
|
381
|
+
/** The actual token data following the W3C design tokens format */
|
|
257
382
|
tokens: TokenGroup;
|
|
383
|
+
/** The path to the source file containing these tokens */
|
|
258
384
|
sourcePath: string;
|
|
259
385
|
};
|
|
260
386
|
|
|
261
387
|
/**
|
|
262
|
-
*
|
|
263
|
-
*
|
|
264
|
-
|
|
265
|
-
type BaseError = {
|
|
266
|
-
message: string;
|
|
267
|
-
};
|
|
268
|
-
|
|
269
|
-
/**
|
|
270
|
-
* A flattened token with its source information and path
|
|
388
|
+
* A flattened token with its source information and path.
|
|
389
|
+
* Represents a token after it has been flattened from a nested structure into a flat key-value map.
|
|
390
|
+
* @template T - The type of token (e.g., "color", "dimension", etc.)
|
|
271
391
|
*/
|
|
272
392
|
type FlattenedToken<T extends TokenType = TokenType> = NodeMetadata & {
|
|
393
|
+
/** The type of the token */
|
|
273
394
|
$type: T;
|
|
395
|
+
/** The value of the token */
|
|
274
396
|
$value: TokenValue<T>;
|
|
397
|
+
/** The path to this token in the flattened structure */
|
|
275
398
|
$path: string;
|
|
399
|
+
/** Information about where this token was loaded from */
|
|
276
400
|
$source: TokenSource;
|
|
401
|
+
/** The original path before flattening */
|
|
277
402
|
$originalPath: string;
|
|
278
403
|
};
|
|
279
404
|
/**
|
|
280
|
-
* A map of flattened tokens and metadata by their lookup path
|
|
405
|
+
* A map of flattened tokens and metadata by their lookup path, with an index for quick reference lookups.
|
|
406
|
+
* Used to store the flattened state of all tokens in a collection.
|
|
407
|
+
* Contains both the token map and a path index for efficient lookups.
|
|
281
408
|
*/
|
|
282
409
|
type FlattenedTokens = {
|
|
283
|
-
|
|
410
|
+
/** Map of token paths to their flattened tokens or metadata */
|
|
411
|
+
tokens: {
|
|
412
|
+
/** Token path as key, flattened token or metadata as value */
|
|
413
|
+
[lookupKey: string]: FlattenedToken | NodeMetadata;
|
|
414
|
+
};
|
|
415
|
+
/** Index mapping original paths to their namespaced keys for quick lookups */
|
|
416
|
+
pathIndex: Map<string, string>;
|
|
284
417
|
};
|
|
285
418
|
/**
|
|
286
|
-
* An error that occurred during token flattening
|
|
419
|
+
* An error that occurred during token flattening.
|
|
420
|
+
* Extends the base error type with flattening-specific information.
|
|
287
421
|
*/
|
|
288
422
|
type FlattenError = BaseError & {
|
|
423
|
+
/** The path to the token that failed flattening */
|
|
289
424
|
path: string;
|
|
425
|
+
/** Source information about where the token was loaded from */
|
|
290
426
|
source: TokenSource;
|
|
291
427
|
};
|
|
292
428
|
|
|
293
429
|
/**
|
|
294
|
-
*
|
|
430
|
+
* Represents a single CSS file output with its path and content
|
|
295
431
|
*/
|
|
296
|
-
type
|
|
432
|
+
type CSSFile = {
|
|
433
|
+
/** The path where the CSS file will be written */
|
|
297
434
|
path: string;
|
|
298
|
-
|
|
435
|
+
/** The CSS content to write to the file */
|
|
436
|
+
css: string;
|
|
299
437
|
};
|
|
438
|
+
/**
|
|
439
|
+
* Represents multiple CSS file outputs from generateSeparateFiles or generateSingleFile
|
|
440
|
+
*/
|
|
441
|
+
type CSSFileOutput = CSSFile[];
|
|
300
442
|
|
|
301
443
|
/**
|
|
302
|
-
*
|
|
444
|
+
* Data structure for loading tokens from memory.
|
|
445
|
+
* Maps file paths to their token content and metadata.
|
|
446
|
+
* Used for programmatic token loading.
|
|
447
|
+
*/
|
|
448
|
+
type TokenMemoryData = Record<string, {
|
|
449
|
+
/** The collection name this token belongs to */
|
|
450
|
+
collection: string;
|
|
451
|
+
/** Optional theme name for themed tokens */
|
|
452
|
+
theme?: string;
|
|
453
|
+
/** The raw token content as a string */
|
|
454
|
+
content: string;
|
|
455
|
+
}>;
|
|
456
|
+
/**
|
|
457
|
+
* An error that occurred during token loading.
|
|
458
|
+
* Extends the base error type with file-specific information.
|
|
459
|
+
*/
|
|
460
|
+
type LoadError = BaseError & {
|
|
461
|
+
/** The file path where the error occurred */
|
|
462
|
+
file: string;
|
|
463
|
+
};
|
|
464
|
+
|
|
465
|
+
/**
|
|
466
|
+
* A resolved token with its final value.
|
|
467
|
+
* Contains both the original token data and its resolved value after reference resolution.
|
|
468
|
+
* @template T - The type of token (e.g., "color", "dimension", etc.)
|
|
303
469
|
*/
|
|
304
470
|
type ResolvedToken<T extends TokenType = TokenType> = NodeMetadata & {
|
|
471
|
+
/** The type of the token */
|
|
305
472
|
$type: T;
|
|
473
|
+
/** The original value of the token, which may contain references */
|
|
306
474
|
$value: RawTokenValue<T>;
|
|
475
|
+
/** The path to this token in the token tree */
|
|
307
476
|
$path: string;
|
|
477
|
+
/** Information about where this token was loaded from */
|
|
308
478
|
$source: TokenSource;
|
|
479
|
+
/** The original path before any resolution */
|
|
309
480
|
$originalPath: string;
|
|
481
|
+
/** The final resolved value after all references are resolved */
|
|
310
482
|
$resolvedValue: RawTokenValue<T>;
|
|
311
483
|
};
|
|
312
484
|
/**
|
|
313
|
-
* A map of resolved tokens by their lookup path
|
|
485
|
+
* A map of resolved tokens by their lookup path.
|
|
486
|
+
* Used to store the final resolved state of all tokens in a collection.
|
|
487
|
+
* Keys are token paths, values are either resolved tokens or node metadata.
|
|
314
488
|
*/
|
|
315
489
|
type ResolvedTokens = {
|
|
490
|
+
/** Token path as key, resolved token or metadata as value */
|
|
316
491
|
[lookupKey: string]: ResolvedToken | NodeMetadata;
|
|
317
492
|
};
|
|
318
493
|
/**
|
|
319
|
-
* Type of resolution error that occurred
|
|
494
|
+
* Type of resolution error that occurred.
|
|
495
|
+
* - "circular": A circular reference was detected
|
|
496
|
+
* - "missing": A referenced token could not be found
|
|
497
|
+
* - "type-mismatch": A referenced token's type doesn't match the expected type
|
|
320
498
|
*/
|
|
321
499
|
type ResolutionErrorType = "circular" | "missing" | "type-mismatch";
|
|
322
500
|
/**
|
|
323
|
-
* An error that occurred during token resolution
|
|
501
|
+
* An error that occurred during token resolution.
|
|
502
|
+
* Extends the base error type with resolution-specific information.
|
|
324
503
|
*/
|
|
325
504
|
type ResolutionError = BaseError & {
|
|
505
|
+
/** The type of resolution error that occurred */
|
|
326
506
|
type: ResolutionErrorType;
|
|
507
|
+
/** The path to the token that failed resolution */
|
|
327
508
|
path: string;
|
|
509
|
+
/** Source information about where the token was loaded from */
|
|
328
510
|
source: TokenSource;
|
|
329
511
|
};
|
|
330
512
|
|
|
331
513
|
/**
|
|
332
|
-
*
|
|
333
|
-
|
|
334
|
-
type NormalizationWarning = {
|
|
335
|
-
type: "warning";
|
|
336
|
-
message: string;
|
|
337
|
-
file: string;
|
|
338
|
-
collection: string;
|
|
339
|
-
theme?: string;
|
|
340
|
-
};
|
|
341
|
-
/**
|
|
342
|
-
* An error that occurred during token normalization
|
|
343
|
-
*/
|
|
344
|
-
type NormalizationError = ValidationError & {
|
|
345
|
-
collection: string;
|
|
346
|
-
theme: string;
|
|
347
|
-
};
|
|
348
|
-
/**
|
|
349
|
-
* A set of tokens for a theme, including metadata nodes
|
|
514
|
+
* An error that occurred during token validation.
|
|
515
|
+
* Extends the base error type with token-specific information.
|
|
350
516
|
*/
|
|
351
|
-
type
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
* Normalized tokens organized by collection and theme
|
|
357
|
-
*/
|
|
358
|
-
type NormalizedTokens = {
|
|
359
|
-
[collection: string]: ThemeTokenSet;
|
|
360
|
-
};
|
|
361
|
-
/**
|
|
362
|
-
* Result of the normalization process
|
|
363
|
-
*/
|
|
364
|
-
type NormalizeResult = {
|
|
365
|
-
tokens: NormalizedTokens;
|
|
366
|
-
errors: NormalizationError[];
|
|
367
|
-
warnings: NormalizationWarning[];
|
|
517
|
+
type ValidationError = BaseError & {
|
|
518
|
+
/** The path to the token that failed validation */
|
|
519
|
+
path: string;
|
|
520
|
+
/** Source information about where the token was loaded from */
|
|
521
|
+
source: TokenSource;
|
|
368
522
|
};
|
|
369
523
|
|
|
370
524
|
/**
|
|
371
|
-
*
|
|
372
|
-
|
|
373
|
-
type LoadResult = {
|
|
374
|
-
trees: TokenTree[];
|
|
375
|
-
errors: LoadError[];
|
|
376
|
-
};
|
|
377
|
-
/**
|
|
378
|
-
* Data structure for loading tokens from memory
|
|
525
|
+
* A warning that occurred during token normalization.
|
|
526
|
+
* Provides information about non-critical issues during the normalization process.
|
|
379
527
|
*/
|
|
380
|
-
type
|
|
528
|
+
type NormalizationWarning = {
|
|
529
|
+
/** The type of the warning */
|
|
530
|
+
type: "warning";
|
|
531
|
+
/** A human-readable message describing the warning */
|
|
532
|
+
message: string;
|
|
533
|
+
/** The file where the warning occurred */
|
|
534
|
+
file: string;
|
|
535
|
+
/** The collection where the warning occurred */
|
|
381
536
|
collection: string;
|
|
537
|
+
/** The theme where the warning occurred, if applicable */
|
|
382
538
|
theme?: string;
|
|
383
|
-
content: string;
|
|
384
|
-
}>;
|
|
385
|
-
/**
|
|
386
|
-
* An error that occurred during token loading
|
|
387
|
-
*/
|
|
388
|
-
type LoadError = BaseError & {
|
|
389
|
-
file: string;
|
|
390
539
|
};
|
|
391
540
|
|
|
392
541
|
/**
|
|
393
|
-
* Result of running the tokens-to-CSS pipeline
|
|
542
|
+
* Result of running the tokens-to-CSS pipeline.
|
|
543
|
+
* Contains the generated CSS files, token trees, and any errors or warnings.
|
|
394
544
|
*/
|
|
395
545
|
type TokensToCSSPipelineResult = {
|
|
546
|
+
/** The generated CSS files */
|
|
396
547
|
output: CSSFileOutput;
|
|
548
|
+
/** The loaded token trees */
|
|
397
549
|
trees: TokenTree[];
|
|
550
|
+
/** Any errors that occurred during pipeline execution */
|
|
398
551
|
errors: PipelineErrors;
|
|
552
|
+
/** Any warnings that occurred during pipeline execution */
|
|
399
553
|
warnings: PipelineWarnings;
|
|
400
554
|
};
|
|
401
555
|
/**
|
|
402
|
-
* Common error types that can occur during pipeline execution
|
|
556
|
+
* Common error types that can occur during pipeline execution.
|
|
557
|
+
* Organizes errors by the pipeline stage where they occurred.
|
|
403
558
|
*/
|
|
404
559
|
type PipelineErrors = {
|
|
560
|
+
/** Errors that occurred during token loading */
|
|
405
561
|
load: LoadError[];
|
|
562
|
+
/** Errors that occurred during token flattening */
|
|
406
563
|
flatten: FlattenError[];
|
|
564
|
+
/** Errors that occurred during token validation */
|
|
407
565
|
validation: ValidationError[];
|
|
566
|
+
/** Errors that occurred during token resolution */
|
|
408
567
|
resolution: ResolutionError[];
|
|
409
568
|
};
|
|
410
569
|
/**
|
|
411
|
-
* Common warning types that can occur during pipeline execution
|
|
570
|
+
* Common warning types that can occur during pipeline execution.
|
|
571
|
+
* Organizes warnings by the pipeline stage where they occurred.
|
|
412
572
|
*/
|
|
413
573
|
type PipelineWarnings = {
|
|
574
|
+
/** Warnings that occurred during token normalization */
|
|
414
575
|
normalization: NormalizationWarning[];
|
|
415
576
|
};
|
|
416
577
|
/**
|
|
417
|
-
* Result of running the validation pipeline
|
|
578
|
+
* Result of running the validation pipeline.
|
|
579
|
+
* Contains the validated token trees, flattened tokens, and resolved tokens.
|
|
418
580
|
*/
|
|
419
581
|
type ValidationPipelineResult = {
|
|
582
|
+
/** The loaded token trees */
|
|
420
583
|
trees: TokenTree[];
|
|
584
|
+
/** The flattened tokens */
|
|
421
585
|
flattenedTokens: FlattenedTokens;
|
|
586
|
+
/** The resolved tokens */
|
|
422
587
|
resolved: ResolvedTokens;
|
|
588
|
+
/** Any errors that occurred during pipeline execution */
|
|
423
589
|
errors: PipelineErrors;
|
|
424
590
|
};
|
|
425
591
|
/**
|
|
426
|
-
* Options for loading tokens in the validation pipeline
|
|
592
|
+
* Options for loading tokens in the validation pipeline.
|
|
593
|
+
* Specifies whether to load tokens from files or memory.
|
|
427
594
|
*/
|
|
428
595
|
type TokenLoader = {
|
|
429
596
|
type: "files";
|
|
@@ -433,129 +600,422 @@ type TokenLoader = {
|
|
|
433
600
|
data: TokenMemoryData;
|
|
434
601
|
};
|
|
435
602
|
/**
|
|
436
|
-
* Options for configuring the validation pipeline
|
|
603
|
+
* Options for configuring the validation pipeline.
|
|
604
|
+
* Controls how tokens are loaded and processed.
|
|
437
605
|
*/
|
|
438
606
|
type ValidationPipelineOptions = {
|
|
607
|
+
/** The token loader configuration */
|
|
439
608
|
loader: TokenLoader;
|
|
440
609
|
};
|
|
441
610
|
/**
|
|
442
|
-
* Result of running the generation pipeline
|
|
611
|
+
* Result of running the generation pipeline.
|
|
612
|
+
* Contains the generated CSS files and any warnings.
|
|
443
613
|
*/
|
|
444
614
|
type GenerationPipelineResult = {
|
|
615
|
+
/** The generated CSS files */
|
|
445
616
|
output: CSSFileOutput;
|
|
617
|
+
/** Any warnings that occurred during pipeline execution */
|
|
446
618
|
warnings: PipelineWarnings;
|
|
447
619
|
};
|
|
448
620
|
|
|
449
|
-
declare function tokensToCSSPipeline(config: SugarcubeConfig): Promise<TokensToCSSPipelineResult>;
|
|
450
|
-
|
|
451
|
-
declare function validationPipeline(config: SugarcubeConfig, options: ValidationPipelineOptions): Promise<ValidationPipelineResult>;
|
|
452
|
-
|
|
453
|
-
declare function generationPipeline(trees: TokenTree[], resolved: ResolvedTokens, configState: SugarcubeConfig): Promise<GenerationPipelineResult>;
|
|
454
|
-
|
|
455
|
-
declare function loadTreesFromConfig(config: SugarcubeConfig): Promise<LoadResult>;
|
|
456
|
-
declare function loadTreesFromMemory(data: TokenMemoryData): Promise<LoadResult>;
|
|
457
|
-
|
|
458
|
-
declare function validate(tokens: FlattenedTokens): ValidationError[];
|
|
459
|
-
|
|
460
|
-
declare function flatten(trees: TokenTree[]): {
|
|
461
|
-
tokens: FlattenedTokens;
|
|
462
|
-
errors: FlattenError[];
|
|
463
|
-
};
|
|
464
|
-
|
|
465
|
-
declare function resolve(tokens: FlattenedTokens): {
|
|
466
|
-
resolved: ResolvedTokens;
|
|
467
|
-
errors: ResolutionError[];
|
|
468
|
-
};
|
|
469
|
-
|
|
470
621
|
/**
|
|
471
|
-
*
|
|
472
|
-
*
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
622
|
+
* The main pipeline that transforms design tokens into CSS output.
|
|
623
|
+
*
|
|
624
|
+
* This pipeline orchestrates the entire token processing flow:
|
|
625
|
+
* 1. Loads token trees from config or memory
|
|
626
|
+
* 2. Flattens trees into a single structure with source information
|
|
627
|
+
* 3. Validates tokens for correctness
|
|
628
|
+
* 4. Resolves all token references
|
|
629
|
+
* 5. Processes trees into collections and themes
|
|
630
|
+
* 6. Normalizes tokens into a standard format
|
|
631
|
+
* 7. Converts tokens into CSS-ready format
|
|
632
|
+
* 8. Generates final CSS output
|
|
633
|
+
*
|
|
634
|
+
* Each stage can produce errors or warnings, which are collected and returned
|
|
635
|
+
* in the result. The pipeline stops at validation if any errors are found.
|
|
636
|
+
*
|
|
637
|
+
* @param config - The sugarcube configuration
|
|
638
|
+
* @param options - Optional pipeline configuration including a custom token loader
|
|
639
|
+
* @returns The pipeline result containing CSS output, trees, and any errors/warnings
|
|
640
|
+
*
|
|
641
|
+
* @example
|
|
642
|
+
* const result = await tokensToCSSPipeline(config);
|
|
643
|
+
* if (result.errors.validation.length > 0) {
|
|
644
|
+
* console.error("Validation failed:", result.errors.validation);
|
|
645
|
+
* } else {
|
|
646
|
+
* // Use the generated CSS
|
|
647
|
+
* console.log(result.output);
|
|
648
|
+
* }
|
|
649
|
+
*/
|
|
650
|
+
declare function tokensToCSSPipeline(config: SugarcubeConfig, options?: {
|
|
651
|
+
loader?: TokenLoader;
|
|
652
|
+
}): Promise<TokensToCSSPipelineResult>;
|
|
481
653
|
|
|
482
654
|
/**
|
|
483
|
-
* A
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
*
|
|
655
|
+
* A pipeline that validates design tokens without generating CSS output.
|
|
656
|
+
*
|
|
657
|
+
* This pipeline performs the initial stages of token processing:
|
|
658
|
+
* 1. Loads token trees from config or memory
|
|
659
|
+
* 2. Flattens trees into a single structure with source information
|
|
660
|
+
* 3. Validates tokens for correctness
|
|
661
|
+
* 4. Resolves all token references
|
|
662
|
+
*
|
|
663
|
+
* Unlike the main pipeline, this one doesn't generate CSS output.
|
|
664
|
+
* It's useful for:
|
|
665
|
+
* - Validating tokens before full processing
|
|
666
|
+
* - Checking token references
|
|
667
|
+
* - Debugging token structure issues
|
|
668
|
+
*
|
|
669
|
+
* @param config - The sugarcube configuration
|
|
670
|
+
* @param options - Pipeline options including the token loader configuration
|
|
671
|
+
* @returns The validation result containing trees, tokens, and any errors
|
|
672
|
+
*
|
|
673
|
+
* @example
|
|
674
|
+
* const result = await validationPipeline(config, {
|
|
675
|
+
* loader: { type: "config" }
|
|
676
|
+
* });
|
|
677
|
+
*
|
|
678
|
+
* if (result.errors.validation.length > 0) {
|
|
679
|
+
* console.error("Token validation failed:", result.errors.validation);
|
|
680
|
+
* } else {
|
|
681
|
+
* console.log("All tokens are valid!");
|
|
682
|
+
* }
|
|
490
683
|
*/
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
};
|
|
494
|
-
/**
|
|
495
|
-
* A collection of converted tokens organized by theme
|
|
496
|
-
*/
|
|
497
|
-
type ConvertedThemeTokenSet = {
|
|
498
|
-
default: ConvertedTokens;
|
|
499
|
-
[theme: string]: ConvertedTokens;
|
|
500
|
-
};
|
|
501
|
-
/**
|
|
502
|
-
* A collection of converted tokens organized by collection and theme
|
|
503
|
-
*/
|
|
504
|
-
type NormalizedConvertedTokens = {
|
|
505
|
-
[collection: string]: ConvertedThemeTokenSet;
|
|
506
|
-
};
|
|
684
|
+
declare function validationPipeline(config: SugarcubeConfig, options: ValidationPipelineOptions): Promise<ValidationPipelineResult>;
|
|
685
|
+
|
|
507
686
|
/**
|
|
508
|
-
*
|
|
687
|
+
* A pipeline that generates CSS from pre-validated tokens.
|
|
688
|
+
*
|
|
689
|
+
* This pipeline handles the final stages of token processing:
|
|
690
|
+
* 1. Processes trees into collections and themes
|
|
691
|
+
* 2. Normalizes tokens into a standard format
|
|
692
|
+
* 3. Converts tokens into CSS-ready format
|
|
693
|
+
* 4. Generates final CSS output
|
|
694
|
+
*
|
|
695
|
+
* This pipeline exists to support workflows where you want to:
|
|
696
|
+
* - Validate tokens, then generate CSS
|
|
697
|
+
*
|
|
698
|
+
* @param trees - The token trees to process
|
|
699
|
+
* @param resolved - The resolved tokens to convert
|
|
700
|
+
* @param configState - The sugarcube configuration
|
|
701
|
+
* @returns The generation result containing CSS output and any warnings
|
|
702
|
+
*
|
|
703
|
+
* @example
|
|
704
|
+
* // First validate tokens once
|
|
705
|
+
* const validationResult = await validationPipeline(config, options);
|
|
706
|
+
* if (validationResult.errors.validation.length > 0) {
|
|
707
|
+
* throw new Error("Tokens failed validation");
|
|
708
|
+
* }
|
|
709
|
+
*
|
|
710
|
+
* // Generate CSS with different configs
|
|
711
|
+
* const lightThemeConfig = { ...config, options: { color: "hex" } };
|
|
712
|
+
* const darkThemeConfig = { ...config, options: { color: "rgb" } };
|
|
713
|
+
*
|
|
714
|
+
* const lightResult = await generationPipeline(
|
|
715
|
+
* validationResult.trees,
|
|
716
|
+
* validationResult.resolved,
|
|
717
|
+
* lightThemeConfig
|
|
718
|
+
* );
|
|
719
|
+
*
|
|
720
|
+
* const darkResult = await generationPipeline(
|
|
721
|
+
* validationResult.trees,
|
|
722
|
+
* validationResult.resolved,
|
|
723
|
+
* darkThemeConfig
|
|
724
|
+
* );
|
|
509
725
|
*/
|
|
510
|
-
|
|
726
|
+
declare function generationPipeline(trees: TokenTree[], resolved: ResolvedTokens, configState: SugarcubeConfig): Promise<GenerationPipelineResult>;
|
|
727
|
+
|
|
511
728
|
/**
|
|
512
|
-
*
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
729
|
+
* Loads and validates the sugarcube configuration file from disk.
|
|
730
|
+
*
|
|
731
|
+
* This function:
|
|
732
|
+
* 1. Reads the config file from the specified path
|
|
733
|
+
* 2. Parses and validates the configuration
|
|
734
|
+
* 3. Returns the validated configuration object
|
|
735
|
+
*
|
|
736
|
+
* @param configPath - Path to the config file (default: "sugarcube.config.json")
|
|
737
|
+
* @returns A promise that resolves to the validated configuration
|
|
738
|
+
* @throws Error if the config file is not found or invalid
|
|
739
|
+
*
|
|
740
|
+
* @example
|
|
741
|
+
* // Load default config file
|
|
742
|
+
* const config = await loadConfig();
|
|
743
|
+
*
|
|
744
|
+
* // Load custom config file
|
|
745
|
+
* const config = await loadConfig("./config/sugarcube.json");
|
|
746
|
+
*/
|
|
747
|
+
declare function loadConfig(configPath?: string): Promise<SugarcubeConfig>;
|
|
748
|
+
|
|
521
749
|
/**
|
|
522
|
-
*
|
|
523
|
-
|
|
524
|
-
|
|
750
|
+
* Validates a sugarcube configuration object against the schema.
|
|
751
|
+
*
|
|
752
|
+
* This function:
|
|
753
|
+
* 1. Validates the configuration structure using the schema
|
|
754
|
+
* 2. Checks for duplicate filenames across collections
|
|
755
|
+
* 3. Returns the validated configuration if successful
|
|
756
|
+
*
|
|
757
|
+
* @param config - The configuration object to validate
|
|
758
|
+
* @returns The validated configuration
|
|
759
|
+
* @throws Error if the configuration is invalid or contains duplicate filenames
|
|
760
|
+
*
|
|
761
|
+
* @example
|
|
762
|
+
* const config = {
|
|
763
|
+
* tokens: {
|
|
764
|
+
* source: ["tokens.json"],
|
|
765
|
+
* type: "custom"
|
|
766
|
+
* }
|
|
767
|
+
* };
|
|
768
|
+
* const validatedConfig = validateConfig(config);
|
|
769
|
+
*/
|
|
770
|
+
declare function validateConfig(config: Partial<SugarcubeConfig>): SugarcubeConfig;
|
|
771
|
+
/**
|
|
772
|
+
* Parses and validates a JSON configuration string.
|
|
773
|
+
*
|
|
774
|
+
* This function:
|
|
775
|
+
* 1. Parses the JSON string into a configuration object
|
|
776
|
+
* 2. Validates the configuration using validateConfig
|
|
777
|
+
* 3. Returns the validated configuration if successful
|
|
778
|
+
*
|
|
779
|
+
* @param configString - The JSON configuration string to parse and validate
|
|
780
|
+
* @returns The validated configuration
|
|
781
|
+
* @throws Error if the JSON is invalid or the configuration is invalid
|
|
782
|
+
*
|
|
783
|
+
* @example
|
|
784
|
+
* const configString = `{
|
|
785
|
+
* "tokens": {
|
|
786
|
+
* "source": ["tokens.json"],
|
|
787
|
+
* "type": "custom"
|
|
788
|
+
* }
|
|
789
|
+
* }`;
|
|
790
|
+
* const config = parseAndValidateConfig(configString);
|
|
791
|
+
*/
|
|
792
|
+
declare function parseAndValidateConfig(configString: string): SugarcubeConfig;
|
|
793
|
+
|
|
525
794
|
/**
|
|
526
|
-
*
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
795
|
+
* Gets all token source file paths from the configuration.
|
|
796
|
+
*
|
|
797
|
+
* This function handles both single and multiple collection configurations:
|
|
798
|
+
* - Single collection: Returns the source array directly
|
|
799
|
+
* - Multiple collections: Flattens and returns all source paths from all collections
|
|
800
|
+
*
|
|
801
|
+
* @param config - The sugarcube configuration
|
|
802
|
+
* @returns An array of all token source file paths
|
|
803
|
+
*
|
|
804
|
+
* @example
|
|
805
|
+
* // Single collection
|
|
806
|
+
* getTokenPathsFromConfig({ tokens: { source: ["tokens.json"] } })
|
|
807
|
+
* // Returns: ["tokens.json"]
|
|
808
|
+
*
|
|
809
|
+
* // Multiple collections
|
|
810
|
+
* getTokenPathsFromConfig({
|
|
811
|
+
* tokens: {
|
|
812
|
+
* base: { source: ["base.json"] },
|
|
813
|
+
* ui: { source: ["ui.json"] }
|
|
814
|
+
* }
|
|
815
|
+
* })
|
|
816
|
+
* // Returns: ["base.json", "ui.json"]
|
|
817
|
+
*/
|
|
818
|
+
declare function getTokenPathsFromConfig(config: SugarcubeConfig): string[];
|
|
819
|
+
/**
|
|
820
|
+
* Writes CSS files to disk, creating directories as needed.
|
|
821
|
+
*
|
|
822
|
+
* This function:
|
|
823
|
+
* 1. Creates any missing directories in the file path
|
|
824
|
+
* 2. Optionally adds a warning banner to prevent direct edits
|
|
825
|
+
* 3. Only writes files if the content has changed
|
|
826
|
+
* 4. Handles both single and multiple CSS file outputs
|
|
827
|
+
*
|
|
828
|
+
* @param output - Array of CSS file outputs to write
|
|
829
|
+
* @param addBanner - Whether to add the warning banner (default: true)
|
|
830
|
+
* @param tokenPaths - Optional array of token source paths for the warning banner
|
|
831
|
+
* @returns The original output array
|
|
832
|
+
* @throws Error if file writing fails
|
|
833
|
+
*
|
|
834
|
+
* @example
|
|
835
|
+
* await writeCSSFilesToDisk([
|
|
836
|
+
* { path: "styles/tokens.css", css: "body { color: red; }" }
|
|
837
|
+
* ]);
|
|
838
|
+
*/
|
|
839
|
+
declare function writeCSSFilesToDisk(output: CSSFileOutput, addBanner?: boolean, tokenPaths?: string[]): Promise<CSSFileOutput>;
|
|
840
|
+
|
|
535
841
|
/**
|
|
536
|
-
* CSS
|
|
842
|
+
* Manages the CSS index file that imports all CSS files.
|
|
843
|
+
* @param options.cssOutputDirectory - Directory where the index.css will be created/updated
|
|
844
|
+
* @param options.files - CSS files to include in the index
|
|
845
|
+
* @returns Path to the generated index file
|
|
537
846
|
*/
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
value: string;
|
|
543
|
-
};
|
|
544
|
-
type CSSGradientProperties = {
|
|
545
|
-
value: string;
|
|
546
|
-
};
|
|
547
|
-
type CSSTransitionProperties = {
|
|
548
|
-
value: string;
|
|
549
|
-
};
|
|
550
|
-
|
|
551
|
-
declare function convert(tokens: NormalizedTokens, config: SugarcubeConfig): NormalizedConvertedTokens;
|
|
552
|
-
|
|
553
|
-
declare function normalizeTokens(trees: ProcessedTree[]): NormalizeResult;
|
|
847
|
+
declare function manageCSSIndex({ cssOutputDirectory, files, }: {
|
|
848
|
+
cssOutputDirectory: string;
|
|
849
|
+
files: string[];
|
|
850
|
+
}): Promise<string>;
|
|
554
851
|
|
|
555
852
|
/**
|
|
556
|
-
*
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
853
|
+
* Schema for configuration
|
|
854
|
+
*/
|
|
855
|
+
declare const configSchema: z.ZodObject<{
|
|
856
|
+
tokens: z.ZodUnion<[z.ZodObject<{
|
|
857
|
+
source: z.ZodArray<z.ZodString, "many">;
|
|
858
|
+
type: z.ZodEnum<["starter-kit", "custom"]>;
|
|
859
|
+
themes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
|
|
860
|
+
}, "strip", z.ZodTypeAny, {
|
|
861
|
+
type: "starter-kit" | "custom";
|
|
862
|
+
source: string[];
|
|
863
|
+
themes?: Record<string, string[]> | undefined;
|
|
864
|
+
}, {
|
|
865
|
+
type: "starter-kit" | "custom";
|
|
866
|
+
source: string[];
|
|
867
|
+
themes?: Record<string, string[]> | undefined;
|
|
868
|
+
}>, z.ZodRecord<z.ZodString, z.ZodObject<{
|
|
869
|
+
source: z.ZodArray<z.ZodString, "many">;
|
|
870
|
+
type: z.ZodEnum<["starter-kit", "custom"]>;
|
|
871
|
+
themes: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString, "many">>>;
|
|
872
|
+
}, "strip", z.ZodTypeAny, {
|
|
873
|
+
type: "starter-kit" | "custom";
|
|
874
|
+
source: string[];
|
|
875
|
+
themes?: Record<string, string[]> | undefined;
|
|
876
|
+
}, {
|
|
877
|
+
type: "starter-kit" | "custom";
|
|
878
|
+
source: string[];
|
|
879
|
+
themes?: Record<string, string[]> | undefined;
|
|
880
|
+
}>>]>;
|
|
881
|
+
options: z.ZodOptional<z.ZodObject<{
|
|
882
|
+
fluid: z.ZodOptional<z.ZodObject<{
|
|
883
|
+
min: z.ZodNumber;
|
|
884
|
+
max: z.ZodNumber;
|
|
885
|
+
}, "strict", z.ZodTypeAny, {
|
|
886
|
+
min: number;
|
|
887
|
+
max: number;
|
|
888
|
+
}, {
|
|
889
|
+
min: number;
|
|
890
|
+
max: number;
|
|
891
|
+
}>>;
|
|
892
|
+
prefix: z.ZodOptional<z.ZodString>;
|
|
893
|
+
color: z.ZodOptional<z.ZodEnum<["hex", "rgb", "rgba", "hsl", "hsla", "oklch", "p3"]>>;
|
|
894
|
+
}, "strip", z.ZodTypeAny, {
|
|
895
|
+
color?: "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "oklch" | "p3" | undefined;
|
|
896
|
+
fluid?: {
|
|
897
|
+
min: number;
|
|
898
|
+
max: number;
|
|
899
|
+
} | undefined;
|
|
900
|
+
prefix?: string | undefined;
|
|
901
|
+
}, {
|
|
902
|
+
color?: "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "oklch" | "p3" | undefined;
|
|
903
|
+
fluid?: {
|
|
904
|
+
min: number;
|
|
905
|
+
max: number;
|
|
906
|
+
} | undefined;
|
|
907
|
+
prefix?: string | undefined;
|
|
908
|
+
}>>;
|
|
909
|
+
output: z.ZodObject<{
|
|
910
|
+
directories: z.ZodObject<{
|
|
911
|
+
tokens: z.ZodString;
|
|
912
|
+
components: z.ZodOptional<z.ZodString>;
|
|
913
|
+
css: z.ZodString;
|
|
914
|
+
}, "strip", z.ZodTypeAny, {
|
|
915
|
+
css: string;
|
|
916
|
+
tokens: string;
|
|
917
|
+
components?: string | undefined;
|
|
918
|
+
}, {
|
|
919
|
+
css: string;
|
|
920
|
+
tokens: string;
|
|
921
|
+
components?: string | undefined;
|
|
922
|
+
}>;
|
|
923
|
+
css: z.ZodObject<{
|
|
924
|
+
separate: z.ZodBoolean;
|
|
925
|
+
manageIndex: z.ZodOptional<z.ZodBoolean>;
|
|
926
|
+
format: z.ZodOptional<z.ZodEnum<["css", "scss", "less"]>>;
|
|
927
|
+
}, "strip", z.ZodTypeAny, {
|
|
928
|
+
separate: boolean;
|
|
929
|
+
manageIndex?: boolean | undefined;
|
|
930
|
+
format?: "css" | "scss" | "less" | undefined;
|
|
931
|
+
}, {
|
|
932
|
+
separate: boolean;
|
|
933
|
+
manageIndex?: boolean | undefined;
|
|
934
|
+
format?: "css" | "scss" | "less" | undefined;
|
|
935
|
+
}>;
|
|
936
|
+
}, "strip", z.ZodTypeAny, {
|
|
937
|
+
css: {
|
|
938
|
+
separate: boolean;
|
|
939
|
+
manageIndex?: boolean | undefined;
|
|
940
|
+
format?: "css" | "scss" | "less" | undefined;
|
|
941
|
+
};
|
|
942
|
+
directories: {
|
|
943
|
+
css: string;
|
|
944
|
+
tokens: string;
|
|
945
|
+
components?: string | undefined;
|
|
946
|
+
};
|
|
947
|
+
}, {
|
|
948
|
+
css: {
|
|
949
|
+
separate: boolean;
|
|
950
|
+
manageIndex?: boolean | undefined;
|
|
951
|
+
format?: "css" | "scss" | "less" | undefined;
|
|
952
|
+
};
|
|
953
|
+
directories: {
|
|
954
|
+
css: string;
|
|
955
|
+
tokens: string;
|
|
956
|
+
components?: string | undefined;
|
|
957
|
+
};
|
|
958
|
+
}>;
|
|
959
|
+
}, "strip", z.ZodTypeAny, {
|
|
960
|
+
tokens: {
|
|
961
|
+
type: "starter-kit" | "custom";
|
|
962
|
+
source: string[];
|
|
963
|
+
themes?: Record<string, string[]> | undefined;
|
|
964
|
+
} | Record<string, {
|
|
965
|
+
type: "starter-kit" | "custom";
|
|
966
|
+
source: string[];
|
|
967
|
+
themes?: Record<string, string[]> | undefined;
|
|
968
|
+
}>;
|
|
969
|
+
output: {
|
|
970
|
+
css: {
|
|
971
|
+
separate: boolean;
|
|
972
|
+
manageIndex?: boolean | undefined;
|
|
973
|
+
format?: "css" | "scss" | "less" | undefined;
|
|
974
|
+
};
|
|
975
|
+
directories: {
|
|
976
|
+
css: string;
|
|
977
|
+
tokens: string;
|
|
978
|
+
components?: string | undefined;
|
|
979
|
+
};
|
|
980
|
+
};
|
|
981
|
+
options?: {
|
|
982
|
+
color?: "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "oklch" | "p3" | undefined;
|
|
983
|
+
fluid?: {
|
|
984
|
+
min: number;
|
|
985
|
+
max: number;
|
|
986
|
+
} | undefined;
|
|
987
|
+
prefix?: string | undefined;
|
|
988
|
+
} | undefined;
|
|
989
|
+
}, {
|
|
990
|
+
tokens: {
|
|
991
|
+
type: "starter-kit" | "custom";
|
|
992
|
+
source: string[];
|
|
993
|
+
themes?: Record<string, string[]> | undefined;
|
|
994
|
+
} | Record<string, {
|
|
995
|
+
type: "starter-kit" | "custom";
|
|
996
|
+
source: string[];
|
|
997
|
+
themes?: Record<string, string[]> | undefined;
|
|
998
|
+
}>;
|
|
999
|
+
output: {
|
|
1000
|
+
css: {
|
|
1001
|
+
separate: boolean;
|
|
1002
|
+
manageIndex?: boolean | undefined;
|
|
1003
|
+
format?: "css" | "scss" | "less" | undefined;
|
|
1004
|
+
};
|
|
1005
|
+
directories: {
|
|
1006
|
+
css: string;
|
|
1007
|
+
tokens: string;
|
|
1008
|
+
components?: string | undefined;
|
|
1009
|
+
};
|
|
1010
|
+
};
|
|
1011
|
+
options?: {
|
|
1012
|
+
color?: "hex" | "rgb" | "rgba" | "hsl" | "hsla" | "oklch" | "p3" | undefined;
|
|
1013
|
+
fluid?: {
|
|
1014
|
+
min: number;
|
|
1015
|
+
max: number;
|
|
1016
|
+
} | undefined;
|
|
1017
|
+
prefix?: string | undefined;
|
|
1018
|
+
} | undefined;
|
|
1019
|
+
}>;
|
|
560
1020
|
|
|
561
|
-
export { type
|
|
1021
|
+
export { type ResolvedToken, type ResolvedTokens, type SugarcubeConfig, type TokenCollection, type TokenLoader, type TokenTree, type ValidationPipelineResult, configSchema, generationPipeline, getTokenPathsFromConfig, loadConfig, manageCSSIndex, parseAndValidateConfig, tokensToCSSPipeline, validateConfig, validationPipeline, writeCSSFilesToDisk };
|