dispersa 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/builders.cjs +1832 -0
- package/dist/builders.cjs.map +1 -0
- package/dist/builders.d.cts +228 -0
- package/dist/builders.d.ts +228 -0
- package/dist/builders.js +1824 -0
- package/dist/builders.js.map +1 -0
- package/dist/errors.cjs +110 -0
- package/dist/errors.cjs.map +1 -0
- package/dist/errors.d.cts +97 -0
- package/dist/errors.d.ts +97 -0
- package/dist/errors.js +99 -0
- package/dist/errors.js.map +1 -0
- package/dist/filters.cjs +445 -0
- package/dist/filters.cjs.map +1 -0
- package/dist/filters.d.cts +86 -0
- package/dist/filters.d.ts +86 -0
- package/dist/filters.js +440 -0
- package/dist/filters.js.map +1 -0
- package/dist/index-CPB9Ea9U.d.ts +581 -0
- package/dist/index-DKf9WMQG.d.cts +581 -0
- package/dist/index.cjs +7843 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +332 -0
- package/dist/index.d.ts +332 -0
- package/dist/index.js +7802 -0
- package/dist/index.js.map +1 -0
- package/dist/preprocessors.cjs +13 -0
- package/dist/preprocessors.cjs.map +1 -0
- package/dist/preprocessors.d.cts +17 -0
- package/dist/preprocessors.d.ts +17 -0
- package/dist/preprocessors.js +11 -0
- package/dist/preprocessors.js.map +1 -0
- package/dist/renderers.cjs +28 -0
- package/dist/renderers.cjs.map +1 -0
- package/dist/renderers.d.cts +43 -0
- package/dist/renderers.d.ts +43 -0
- package/dist/renderers.js +24 -0
- package/dist/renderers.js.map +1 -0
- package/dist/transforms.cjs +453 -0
- package/dist/transforms.cjs.map +1 -0
- package/dist/transforms.d.cts +138 -0
- package/dist/transforms.d.ts +138 -0
- package/dist/transforms.js +429 -0
- package/dist/transforms.js.map +1 -0
- package/dist/types-BDY1xBmD.d.cts +30 -0
- package/dist/types-C1GpiJ6q.d.cts +368 -0
- package/dist/types-C1GpiJ6q.d.ts +368 -0
- package/dist/types-Cl-1UYGD.d.ts +30 -0
- package/dist/types-DJH6_4U9.d.ts +430 -0
- package/dist/types-DM5faYUn.d.cts +43 -0
- package/dist/types-DbufGPrb.d.cts +430 -0
- package/dist/types-DdPWYkgh.d.ts +43 -0
- package/package.json +141 -0
|
@@ -0,0 +1,581 @@
|
|
|
1
|
+
import { F as Filter } from './types-Cl-1UYGD.js';
|
|
2
|
+
import { B as BuildConfigBase, O as OutputConfigBase, P as Preprocessor, D as DispersaOptionsBase } from './types-DJH6_4U9.js';
|
|
3
|
+
import { T as Transform } from './types-DdPWYkgh.js';
|
|
4
|
+
import { R as ResolvedTokens } from './types-C1GpiJ6q.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @fileoverview DTCG Resolver types (2025.10 specification)
|
|
8
|
+
*
|
|
9
|
+
* The resolver system allows defining token sources, modifiers (themes, modes),
|
|
10
|
+
* and the order in which they should be resolved and merged.
|
|
11
|
+
*
|
|
12
|
+
* ResolverDocument type is defined here to match DTCG 2025.10.
|
|
13
|
+
*/
|
|
14
|
+
type ReferenceObject = {
|
|
15
|
+
$ref: string;
|
|
16
|
+
};
|
|
17
|
+
type TokenSource = ReferenceObject | Record<string, unknown>;
|
|
18
|
+
type Set = {
|
|
19
|
+
sources: TokenSource[];
|
|
20
|
+
description?: string;
|
|
21
|
+
$extensions?: Record<string, unknown>;
|
|
22
|
+
};
|
|
23
|
+
type Modifier = {
|
|
24
|
+
contexts: Record<string, TokenSource[]>;
|
|
25
|
+
description?: string;
|
|
26
|
+
default?: string;
|
|
27
|
+
$extensions?: Record<string, unknown>;
|
|
28
|
+
};
|
|
29
|
+
type InlineSet = Set & {
|
|
30
|
+
name: string;
|
|
31
|
+
type: 'set';
|
|
32
|
+
};
|
|
33
|
+
type InlineModifier = Modifier & {
|
|
34
|
+
name: string;
|
|
35
|
+
type: 'modifier';
|
|
36
|
+
};
|
|
37
|
+
type ResolverDocument = {
|
|
38
|
+
$schema?: string;
|
|
39
|
+
name?: string;
|
|
40
|
+
version: '2025.10';
|
|
41
|
+
description?: string;
|
|
42
|
+
sets?: Record<string, Set>;
|
|
43
|
+
modifiers?: Record<string, Modifier>;
|
|
44
|
+
resolutionOrder: (ReferenceObject | InlineSet | InlineModifier)[];
|
|
45
|
+
$defs?: Record<string, unknown>;
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Map of modifier names to selected context values
|
|
49
|
+
*
|
|
50
|
+
* Used to specify which variation of each modifier to use when resolving tokens.
|
|
51
|
+
* Can be made type-safe by providing a generic type parameter.
|
|
52
|
+
*
|
|
53
|
+
* @template T - Optional specific type for modifier values (defaults to generic Record)
|
|
54
|
+
*
|
|
55
|
+
* @example
|
|
56
|
+
* ```typescript
|
|
57
|
+
* // Generic (default):
|
|
58
|
+
* const inputs: ModifierInputs = {
|
|
59
|
+
* theme: 'dark',
|
|
60
|
+
* platform: 'mobile'
|
|
61
|
+
* }
|
|
62
|
+
*
|
|
63
|
+
* // Type-safe:
|
|
64
|
+
* type MyModifiers = { theme: 'light' | 'dark', platform: 'web' | 'mobile' }
|
|
65
|
+
* const inputs: ModifierInputs<MyModifiers> = {
|
|
66
|
+
* theme: 'dark', // ✅ Autocomplete!
|
|
67
|
+
* platform: 'mobile'
|
|
68
|
+
* }
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
71
|
+
type ModifierInputs<T extends Record<string, string> = Record<string, string>> = T;
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* @fileoverview Renderer system types for token output generation
|
|
75
|
+
*/
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Generic options object for renderers
|
|
79
|
+
*
|
|
80
|
+
* Each renderer can define its own specific options that extend this base type.
|
|
81
|
+
*/
|
|
82
|
+
type FormatOptions = Record<string, unknown>;
|
|
83
|
+
/**
|
|
84
|
+
* Data for a single permutation (combination of modifier values)
|
|
85
|
+
*/
|
|
86
|
+
type PermutationData = {
|
|
87
|
+
tokens: ResolvedTokens;
|
|
88
|
+
modifierInputs: ModifierInputs;
|
|
89
|
+
};
|
|
90
|
+
/**
|
|
91
|
+
* Metadata for renderers to reason about modifier dimensions.
|
|
92
|
+
*/
|
|
93
|
+
type RenderMeta = {
|
|
94
|
+
dimensions: string[];
|
|
95
|
+
defaults: Record<string, string>;
|
|
96
|
+
basePermutation: ModifierInputs;
|
|
97
|
+
};
|
|
98
|
+
/**
|
|
99
|
+
* Context provided to renderer formatters.
|
|
100
|
+
*/
|
|
101
|
+
type RenderContext<TOptions extends FormatOptions = FormatOptions> = {
|
|
102
|
+
permutations: PermutationData[];
|
|
103
|
+
output: OutputConfig<TOptions>;
|
|
104
|
+
resolver: ResolverDocument;
|
|
105
|
+
meta: RenderMeta;
|
|
106
|
+
buildPath?: string;
|
|
107
|
+
};
|
|
108
|
+
/**
|
|
109
|
+
* Multi-file output representation for renderers.
|
|
110
|
+
*/
|
|
111
|
+
type OutputTree = {
|
|
112
|
+
kind: 'outputTree';
|
|
113
|
+
files: Record<string, string>;
|
|
114
|
+
};
|
|
115
|
+
type RenderOutput = string | OutputTree;
|
|
116
|
+
/**
|
|
117
|
+
* Output from a build operation
|
|
118
|
+
*/
|
|
119
|
+
type BuildOutput = {
|
|
120
|
+
name: string;
|
|
121
|
+
/** File path where output was written (undefined for in-memory mode) */
|
|
122
|
+
path?: string;
|
|
123
|
+
content: string;
|
|
124
|
+
};
|
|
125
|
+
/**
|
|
126
|
+
* Renderer definition for converting tokens to output format
|
|
127
|
+
*
|
|
128
|
+
* Renderers implement a single `format()` method that can return either
|
|
129
|
+
* a single string or an OutputTree for multi-file outputs.
|
|
130
|
+
*
|
|
131
|
+
* @example Simple renderer with format()
|
|
132
|
+
* ```typescript
|
|
133
|
+
* const scssRenderer: Renderer = {
|
|
134
|
+
* format: (context) => {
|
|
135
|
+
* const tokens = context.permutations[0]?.tokens ?? {}
|
|
136
|
+
* return Object.entries(tokens)
|
|
137
|
+
* .map(([name, token]) => `$${name}: ${token.$value};`)
|
|
138
|
+
* .join('\n')
|
|
139
|
+
* },
|
|
140
|
+
* }
|
|
141
|
+
* ```
|
|
142
|
+
*/
|
|
143
|
+
type Renderer<TOptions extends FormatOptions = FormatOptions> = {
|
|
144
|
+
/**
|
|
145
|
+
* Preset identifier (e.g., 'bundle', 'standalone', 'modifier')
|
|
146
|
+
* Indicates which variant of the renderer this is
|
|
147
|
+
*/
|
|
148
|
+
preset?: string;
|
|
149
|
+
/**
|
|
150
|
+
* Convert tokens to output content.
|
|
151
|
+
*
|
|
152
|
+
* Renderers receive all resolved permutations and modifier metadata via context.
|
|
153
|
+
* They can return either a single string (single output file) or an OutputTree
|
|
154
|
+
* for multi-file outputs.
|
|
155
|
+
*/
|
|
156
|
+
format: (context: RenderContext<TOptions>, options?: TOptions) => RenderOutput | Promise<RenderOutput>;
|
|
157
|
+
};
|
|
158
|
+
/**
|
|
159
|
+
* Helper for defining custom renderers with full type inference.
|
|
160
|
+
*
|
|
161
|
+
* Works like Vue's `defineComponent()` or Vite's `defineConfig()` --
|
|
162
|
+
* an identity function that enables TypeScript to infer the options type
|
|
163
|
+
* from the generic parameter, giving you autocomplete and type-checking
|
|
164
|
+
* on both `context` and `options` inside `format()`.
|
|
165
|
+
*
|
|
166
|
+
* @example
|
|
167
|
+
* ```typescript
|
|
168
|
+
* import { defineRenderer } from 'dispersa/renderers'
|
|
169
|
+
*
|
|
170
|
+
* type MyOptions = { prefix: string; minify?: boolean }
|
|
171
|
+
*
|
|
172
|
+
* const myRenderer = defineRenderer<MyOptions>({
|
|
173
|
+
* format(context, options) {
|
|
174
|
+
* // options is typed as MyOptions | undefined
|
|
175
|
+
* // context.output.options is typed as MyOptions | undefined
|
|
176
|
+
* const prefix = options?.prefix ?? 'token'
|
|
177
|
+
* return Object.entries(context.permutations[0]?.tokens ?? {})
|
|
178
|
+
* .map(([name, token]) => `${prefix}-${name}: ${token.$value}`)
|
|
179
|
+
* .join('\n')
|
|
180
|
+
* },
|
|
181
|
+
* })
|
|
182
|
+
* ```
|
|
183
|
+
*/
|
|
184
|
+
declare function defineRenderer<T extends FormatOptions>(renderer: Renderer<T>): Renderer<T>;
|
|
185
|
+
/**
|
|
186
|
+
* Function type for dynamically generating CSS selectors based on modifier context
|
|
187
|
+
*
|
|
188
|
+
* @param modifierName - Name of the modifier (e.g., 'theme', 'breakpoint')
|
|
189
|
+
* @param context - Context value of the modifier (e.g., 'dark', 'mobile')
|
|
190
|
+
* @param isBase - Whether this is the base permutation
|
|
191
|
+
* @param allModifierInputs - All modifier inputs for this permutation
|
|
192
|
+
* @returns CSS selector string (e.g., '[data-theme="dark"]')
|
|
193
|
+
*/
|
|
194
|
+
type SelectorFunction = (modifierName: string, context: string, isBase: boolean, allModifierInputs: Record<string, string>) => string;
|
|
195
|
+
/**
|
|
196
|
+
* Function type for dynamically generating media queries based on modifier context
|
|
197
|
+
*
|
|
198
|
+
* @param modifierName - Name of the modifier (e.g., 'theme', 'breakpoint')
|
|
199
|
+
* @param context - Context value of the modifier (e.g., 'dark', 'mobile')
|
|
200
|
+
* @param isBase - Whether this is the base permutation
|
|
201
|
+
* @param allModifierInputs - All modifier inputs for this permutation
|
|
202
|
+
* @returns Media query string (e.g., '(max-width: 768px)') or empty string for no media query
|
|
203
|
+
*/
|
|
204
|
+
type MediaQueryFunction = (modifierName: string, context: string, isBase: boolean, allModifierInputs: Record<string, string>) => string;
|
|
205
|
+
/**
|
|
206
|
+
* Options for CSS custom properties renderer
|
|
207
|
+
*
|
|
208
|
+
* Controls how tokens are converted to CSS custom properties (CSS variables).
|
|
209
|
+
*
|
|
210
|
+
* **Note:** Token naming is controlled through transforms, not renderer options.
|
|
211
|
+
* Use `nameKebabCase()` and `namePrefix()` for naming control.
|
|
212
|
+
*
|
|
213
|
+
* @example String-based selectors
|
|
214
|
+
* ```typescript
|
|
215
|
+
* css({
|
|
216
|
+
* name: 'tokens',
|
|
217
|
+
* file: 'tokens.css',
|
|
218
|
+
* transforms: [nameKebabCase(), namePrefix('ds-')],
|
|
219
|
+
* preset: 'bundle',
|
|
220
|
+
* selector: ':root',
|
|
221
|
+
* })
|
|
222
|
+
* ```
|
|
223
|
+
*
|
|
224
|
+
* @example Function-based selectors
|
|
225
|
+
* ```typescript
|
|
226
|
+
* outputs: [{
|
|
227
|
+
* renderer: cssRenderer(),
|
|
228
|
+
* options: {
|
|
229
|
+
* preset: 'bundle',
|
|
230
|
+
* selector: (modifier, context, isBase, allInputs) => {
|
|
231
|
+
* if (isBase) return ':root'
|
|
232
|
+
* return `[data-${modifier}="${context}"]`
|
|
233
|
+
* },
|
|
234
|
+
* mediaQuery: (modifier, context) => {
|
|
235
|
+
* if (modifier === 'breakpoint' && context === 'mobile') {
|
|
236
|
+
* return '(max-width: 768px)'
|
|
237
|
+
* }
|
|
238
|
+
* return ''
|
|
239
|
+
* }
|
|
240
|
+
* }
|
|
241
|
+
* }]
|
|
242
|
+
* ```
|
|
243
|
+
*/
|
|
244
|
+
type CssRendererOptions = {
|
|
245
|
+
preset?: 'bundle' | 'standalone' | 'modifier';
|
|
246
|
+
selector?: string | SelectorFunction;
|
|
247
|
+
mediaQuery?: string | MediaQueryFunction;
|
|
248
|
+
minify?: boolean;
|
|
249
|
+
preserveReferences?: boolean;
|
|
250
|
+
};
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Result of a token build operation
|
|
254
|
+
*
|
|
255
|
+
* Contains success status, generated output files, and any errors encountered.
|
|
256
|
+
*
|
|
257
|
+
* @example
|
|
258
|
+
* ```typescript
|
|
259
|
+
* const result = await dispersa.build(config)
|
|
260
|
+
* if (result.success) {
|
|
261
|
+
* result.outputs.forEach(output => {
|
|
262
|
+
* console.log(`Generated ${output.name}: ${output.path}`)
|
|
263
|
+
* })
|
|
264
|
+
* } else {
|
|
265
|
+
* console.error('Build errors:', result.errors)
|
|
266
|
+
* }
|
|
267
|
+
* ```
|
|
268
|
+
*/
|
|
269
|
+
/**
|
|
270
|
+
* Error code identifying the type of build error
|
|
271
|
+
*/
|
|
272
|
+
type ErrorCode = 'TOKEN_REFERENCE' | 'CIRCULAR_REFERENCE' | 'VALIDATION' | 'COLOR_PARSE' | 'DIMENSION_FORMAT' | 'FILE_OPERATION' | 'CONFIGURATION' | 'BASE_PERMUTATION' | 'MODIFIER' | 'UNKNOWN';
|
|
273
|
+
/**
|
|
274
|
+
* Structured error from a build operation
|
|
275
|
+
*
|
|
276
|
+
* Preserves typed context from the error hierarchy so consumers
|
|
277
|
+
* can programmatically react to specific failure modes.
|
|
278
|
+
*/
|
|
279
|
+
type BuildError = {
|
|
280
|
+
/** Human-readable error message */
|
|
281
|
+
message: string;
|
|
282
|
+
/** Machine-readable error code identifying the failure type */
|
|
283
|
+
code: ErrorCode;
|
|
284
|
+
/** File path where the error occurred (for file operation errors) */
|
|
285
|
+
path?: string;
|
|
286
|
+
/** Token path where the error occurred (e.g. 'color.primary') */
|
|
287
|
+
tokenPath?: string;
|
|
288
|
+
/** Error severity */
|
|
289
|
+
severity: 'error' | 'warning';
|
|
290
|
+
/** Suggested alternatives (e.g. similar token names for TOKEN_REFERENCE errors) */
|
|
291
|
+
suggestions?: string[];
|
|
292
|
+
};
|
|
293
|
+
type BuildResult = {
|
|
294
|
+
/** Whether the build completed successfully */
|
|
295
|
+
success: boolean;
|
|
296
|
+
/** Array of generated output files */
|
|
297
|
+
outputs: BuildOutput[];
|
|
298
|
+
/** Array of errors encountered during build (only present if success is false) */
|
|
299
|
+
errors?: BuildError[];
|
|
300
|
+
};
|
|
301
|
+
|
|
302
|
+
/**
|
|
303
|
+
* @fileoverview Validation configuration types
|
|
304
|
+
*/
|
|
305
|
+
/** Controls how validation issues are reported */
|
|
306
|
+
type ValidationMode = 'error' | 'warn' | 'off';
|
|
307
|
+
/**
|
|
308
|
+
* Options that control token and resolver validation behavior.
|
|
309
|
+
*
|
|
310
|
+
* @example
|
|
311
|
+
* ```typescript
|
|
312
|
+
* const dispersa = new Dispersa({
|
|
313
|
+
* validation: { mode: 'warn' },
|
|
314
|
+
* })
|
|
315
|
+
* ```
|
|
316
|
+
*/
|
|
317
|
+
type ValidationOptions = {
|
|
318
|
+
/**
|
|
319
|
+
* Validation mode.
|
|
320
|
+
* - `'error'` (default) – throw on validation failures
|
|
321
|
+
* - `'warn'` – log warnings via `console.warn` but continue processing
|
|
322
|
+
* - `'off'` – skip validation entirely
|
|
323
|
+
*/
|
|
324
|
+
mode?: ValidationMode;
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
/**
|
|
328
|
+
* @fileoverview Configuration types for Dispersa
|
|
329
|
+
*/
|
|
330
|
+
|
|
331
|
+
/**
|
|
332
|
+
* Lifecycle hooks for the build process.
|
|
333
|
+
*
|
|
334
|
+
* The same hook type is used on both `BuildConfig.hooks` (global) and
|
|
335
|
+
* `OutputConfig.hooks` (per-output). All hooks are optional and support
|
|
336
|
+
* both sync and async functions.
|
|
337
|
+
*
|
|
338
|
+
* **Execution order:**
|
|
339
|
+
* 1. Global `onBuildStart`
|
|
340
|
+
* 2. For each output: per-output `onBuildStart` → process → per-output `onBuildEnd`
|
|
341
|
+
* 3. Global `onBuildEnd`
|
|
342
|
+
*/
|
|
343
|
+
type LifecycleHooks = {
|
|
344
|
+
/** Called before permutation resolution and output processing begins */
|
|
345
|
+
onBuildStart?: (context: {
|
|
346
|
+
config: BuildConfig;
|
|
347
|
+
resolver: string | ResolverDocument;
|
|
348
|
+
}) => void | Promise<void>;
|
|
349
|
+
/** Called after all outputs have been processed (success or failure) */
|
|
350
|
+
onBuildEnd?: (result: BuildResult) => void | Promise<void>;
|
|
351
|
+
};
|
|
352
|
+
|
|
353
|
+
/**
|
|
354
|
+
* Output configuration for a single build target
|
|
355
|
+
*
|
|
356
|
+
* Defines how tokens should be formatted and output for a specific target
|
|
357
|
+
* format (CSS, JSON, JavaScript, etc.).
|
|
358
|
+
*
|
|
359
|
+
* **Processing Order:**
|
|
360
|
+
* - Global filters (from BuildConfig) are applied first to all outputs
|
|
361
|
+
* - Then output-specific filters are applied (AND logic with global filters)
|
|
362
|
+
* - Global transforms are applied next
|
|
363
|
+
* - Finally output-specific transforms are applied
|
|
364
|
+
*
|
|
365
|
+
* **Output File Names:**
|
|
366
|
+
* The `file` field supports subdirectories and dynamic naming patterns.
|
|
367
|
+
* Parent directories are created automatically.
|
|
368
|
+
*
|
|
369
|
+
* @example Using builder helpers (recommended)
|
|
370
|
+
* ```typescript
|
|
371
|
+
* import { css, json } from 'dispersa'
|
|
372
|
+
* import { colorToHex, dimensionToPx } from 'dispersa/transforms'
|
|
373
|
+
*
|
|
374
|
+
* // CSS output with transforms
|
|
375
|
+
* css({
|
|
376
|
+
* name: 'css',
|
|
377
|
+
* file: 'css/tokens.css',
|
|
378
|
+
* preset: 'bundle',
|
|
379
|
+
* selector: ':root',
|
|
380
|
+
* transforms: [colorToHex(), dimensionToPx()],
|
|
381
|
+
* })
|
|
382
|
+
*
|
|
383
|
+
* // JSON output with static filename
|
|
384
|
+
* json({
|
|
385
|
+
* name: 'json',
|
|
386
|
+
* file: 'json/tokens.json',
|
|
387
|
+
* preset: 'standalone',
|
|
388
|
+
* structure: 'flat',
|
|
389
|
+
* })
|
|
390
|
+
* ```
|
|
391
|
+
*
|
|
392
|
+
* @example Pattern-based and function-based filenames
|
|
393
|
+
* ```typescript
|
|
394
|
+
* import { css } from 'dispersa'
|
|
395
|
+
*
|
|
396
|
+
* // Standalone mode with pattern-based filename
|
|
397
|
+
* css({
|
|
398
|
+
* name: 'css-standalone',
|
|
399
|
+
* file: 'tokens-{theme}-{platform}.css', // → tokens-light-web.css, tokens-dark-mobile.css
|
|
400
|
+
* preset: 'standalone',
|
|
401
|
+
* selector: ':root',
|
|
402
|
+
* })
|
|
403
|
+
*
|
|
404
|
+
* // Function-based filename
|
|
405
|
+
* css({
|
|
406
|
+
* name: 'css-custom',
|
|
407
|
+
* preset: 'standalone',
|
|
408
|
+
* selector: ':root',
|
|
409
|
+
* file: (modifierInputs) => {
|
|
410
|
+
* const parts = Object.entries(modifierInputs).map(([k, v]) => `${k}-${v}`)
|
|
411
|
+
* return `tokens-${parts.join('-')}.css`
|
|
412
|
+
* },
|
|
413
|
+
* })
|
|
414
|
+
* ```
|
|
415
|
+
*
|
|
416
|
+
* @see CssRendererOptions
|
|
417
|
+
* @see JsonRendererOptions
|
|
418
|
+
* @see JsModuleRendererOptions
|
|
419
|
+
*/
|
|
420
|
+
type OutputConfig<TOptions extends FormatOptions = FormatOptions> = Omit<OutputConfigBase, 'renderer' | 'transforms' | 'filters' | 'file'> & {
|
|
421
|
+
/** Renderer instance (created via renderer factory function) */
|
|
422
|
+
renderer: Renderer<TOptions>;
|
|
423
|
+
/**
|
|
424
|
+
* Array of filter objects to apply
|
|
425
|
+
* Filters are applied before transforms (to select which tokens to process)
|
|
426
|
+
*/
|
|
427
|
+
filters?: Filter[];
|
|
428
|
+
/** Array of transform objects to apply */
|
|
429
|
+
transforms?: Transform[];
|
|
430
|
+
/**
|
|
431
|
+
* Output file path, can be static or dynamic
|
|
432
|
+
*
|
|
433
|
+
* Supports subdirectories (e.g., "css/tokens.css").
|
|
434
|
+
* In standalone preset (one file per permutation), supports:
|
|
435
|
+
* - Pattern strings with placeholders: `tokens-{theme}-{platform}.css`
|
|
436
|
+
* - Function that receives modifierInputs: `(modifierInputs) => \`tokens-${...}.css\``
|
|
437
|
+
* - Plain string (applies default pattern with all modifiers)
|
|
438
|
+
*
|
|
439
|
+
* @example
|
|
440
|
+
* ```typescript
|
|
441
|
+
* // Static filename (bundle preset or single permutation)
|
|
442
|
+
* file: 'tokens.css'
|
|
443
|
+
*
|
|
444
|
+
* // With subdirectory
|
|
445
|
+
* file: 'css/tokens.css'
|
|
446
|
+
*
|
|
447
|
+
* // Pattern with placeholders (standalone preset)
|
|
448
|
+
* file: 'tokens-{theme}-{platform}.css'
|
|
449
|
+
*
|
|
450
|
+
* // Function for complex logic (standalone preset)
|
|
451
|
+
* file: (modifierInputs) => {
|
|
452
|
+
* const parts = Object.entries(modifierInputs).map(([k, v]) => `${k}-${v}`)
|
|
453
|
+
* return `output/${parts.join('-')}/tokens.css`
|
|
454
|
+
* }
|
|
455
|
+
* ```
|
|
456
|
+
*/
|
|
457
|
+
file?: string | ((modifierInputs: ModifierInputs) => string);
|
|
458
|
+
/**
|
|
459
|
+
* Renderer-specific options passed to the formatter.
|
|
460
|
+
*/
|
|
461
|
+
options?: TOptions;
|
|
462
|
+
/**
|
|
463
|
+
* Lifecycle hooks for this output.
|
|
464
|
+
*
|
|
465
|
+
* Per-output hooks fire in addition to global hooks on BuildConfig.
|
|
466
|
+
* `onBuildStart` fires before this output is processed,
|
|
467
|
+
* `onBuildEnd` fires after this output finishes (success or failure).
|
|
468
|
+
*/
|
|
469
|
+
hooks?: LifecycleHooks;
|
|
470
|
+
};
|
|
471
|
+
/**
|
|
472
|
+
* Complete build configuration for Dispersa
|
|
473
|
+
*
|
|
474
|
+
* Defines all aspects of the token build process including input sources,
|
|
475
|
+
* output targets, transforms, and permutation handling.
|
|
476
|
+
*
|
|
477
|
+
* **Complete Token Processing Pipeline:**
|
|
478
|
+
*
|
|
479
|
+
* 1. **Preprocessors** (BuildConfig.preprocessors)
|
|
480
|
+
* - Operate on raw JSON before parsing
|
|
481
|
+
* - Transform raw data structures
|
|
482
|
+
* - Example: strip custom metadata, inject env vars
|
|
483
|
+
*
|
|
484
|
+
* 2. **Parse & Resolve**
|
|
485
|
+
* - Parse token files according to DTCG spec
|
|
486
|
+
* - Resolve references between tokens
|
|
487
|
+
* - Apply modifiers (themes, modes, etc.)
|
|
488
|
+
* - Output: ResolvedTokens
|
|
489
|
+
*
|
|
490
|
+
* 3. **Global Filters** (BuildConfig.filters)
|
|
491
|
+
* - Applied to all tokens for all outputs
|
|
492
|
+
* - Example: exclude deprecated tokens globally
|
|
493
|
+
*
|
|
494
|
+
* 4. **Global Transforms** (BuildConfig.transforms)
|
|
495
|
+
* - Applied to all tokens for all outputs
|
|
496
|
+
* - Example: global naming conventions
|
|
497
|
+
*
|
|
498
|
+
* 5. **Per-Output Processing** (for each OutputConfig):
|
|
499
|
+
* a. **Output Filters** - Select which tokens to include (AND logic)
|
|
500
|
+
* b. **Output Transforms** - Modify selected tokens only
|
|
501
|
+
* c. **Renderer** - Generate output format and bundle output
|
|
502
|
+
*
|
|
503
|
+
* All transforms and filters are applied in array order.
|
|
504
|
+
*
|
|
505
|
+
* @example Basic usage with global filters and transforms
|
|
506
|
+
* ```typescript
|
|
507
|
+
* import { Dispersa, css, json } from 'dispersa'
|
|
508
|
+
* import { byType } from 'dispersa/filters'
|
|
509
|
+
* import { colorToHex, nameKebabCase } from 'dispersa/transforms'
|
|
510
|
+
*
|
|
511
|
+
* await dispersa.build({
|
|
512
|
+
* outputs: [
|
|
513
|
+
* css({ name: 'css', preset: 'bundle', selector: ':root' }),
|
|
514
|
+
* json({ name: 'json', preset: 'standalone', structure: 'flat' }),
|
|
515
|
+
* ],
|
|
516
|
+
* filters: [byType('color')], // Global filter - only include color tokens for all outputs
|
|
517
|
+
* transforms: [nameKebabCase(), colorToHex()], // Global transforms for all outputs
|
|
518
|
+
* })
|
|
519
|
+
* ```
|
|
520
|
+
*
|
|
521
|
+
* @example Combining global and output-specific filters
|
|
522
|
+
* ```typescript
|
|
523
|
+
* import { css, json } from 'dispersa'
|
|
524
|
+
* import { byType } from 'dispersa/filters'
|
|
525
|
+
* import { nameKebabCase } from 'dispersa/transforms'
|
|
526
|
+
*
|
|
527
|
+
* await dispersa.build({
|
|
528
|
+
* outputs: [
|
|
529
|
+
* css({
|
|
530
|
+
* name: 'css',
|
|
531
|
+
* preset: 'bundle',
|
|
532
|
+
* selector: ':root',
|
|
533
|
+
* }),
|
|
534
|
+
* json({
|
|
535
|
+
* name: 'json',
|
|
536
|
+
* preset: 'standalone',
|
|
537
|
+
* structure: 'flat',
|
|
538
|
+
* }),
|
|
539
|
+
* ],
|
|
540
|
+
* filters: [byType('color')],
|
|
541
|
+
* transforms: [nameKebabCase()],
|
|
542
|
+
* })
|
|
543
|
+
* ```
|
|
544
|
+
*/
|
|
545
|
+
type BuildConfig = Omit<BuildConfigBase, 'outputs' | 'filters' | 'transforms' | 'preprocessors' | 'permutations'> & {
|
|
546
|
+
/** Resolver configuration - file path or inline ResolverDocument */
|
|
547
|
+
resolver?: string | ResolverDocument;
|
|
548
|
+
/** Output directory for generated files */
|
|
549
|
+
buildPath?: string;
|
|
550
|
+
/** Array of output configurations defining target formats */
|
|
551
|
+
outputs: OutputConfig[];
|
|
552
|
+
/** Global filters to apply to all outputs before output-specific filters */
|
|
553
|
+
filters?: Filter[];
|
|
554
|
+
/** Global transforms to apply to all tokens before output-specific transforms */
|
|
555
|
+
transforms?: Transform[];
|
|
556
|
+
/** Global preprocessors to apply to raw token data before parsing */
|
|
557
|
+
preprocessors?: Preprocessor[];
|
|
558
|
+
/** Explicit permutations to build (modifier inputs) */
|
|
559
|
+
permutations?: ModifierInputs[];
|
|
560
|
+
/** Global lifecycle hooks for the build process */
|
|
561
|
+
hooks?: LifecycleHooks;
|
|
562
|
+
};
|
|
563
|
+
/**
|
|
564
|
+
* Global options for Dispersa instance behavior
|
|
565
|
+
*
|
|
566
|
+
* Uses the generated base type from schemas - all properties match exactly.
|
|
567
|
+
*/
|
|
568
|
+
/**
|
|
569
|
+
* Dispersa options with runtime-only validation helpers
|
|
570
|
+
*
|
|
571
|
+
* Schema validation supports "validation.mode" but cannot validate functions.
|
|
572
|
+
*/
|
|
573
|
+
type DispersaOptions = Omit<DispersaOptionsBase, 'validation'> & {
|
|
574
|
+
/** Resolver configuration - file path or inline ResolverDocument */
|
|
575
|
+
resolver?: string | ResolverDocument;
|
|
576
|
+
/** Default output directory for generated files */
|
|
577
|
+
buildPath?: string;
|
|
578
|
+
validation?: ValidationOptions;
|
|
579
|
+
};
|
|
580
|
+
|
|
581
|
+
export { type BuildConfig as B, type CssRendererOptions as C, type DispersaOptions as D, type ErrorCode as E, type FormatOptions as F, type LifecycleHooks as L, type ModifierInputs as M, type OutputConfig as O, type PermutationData as P, type ResolverDocument as R, type SelectorFunction as S, type ValidationOptions as V, type BuildResult as a, type ValidationMode as b, type BuildError as c, type BuildOutput as d, type MediaQueryFunction as e, type OutputTree as f, type Renderer as g, type RenderContext as h, type RenderMeta as i, type RenderOutput as j, defineRenderer as k };
|