@tenphi/tasty 2.11.2 → 3.0.0
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/README.md +32 -7
- package/dist/astro-B53trJyX.js +156 -0
- package/dist/astro-B53trJyX.js.map +1 -0
- package/dist/babel-HlEpSZrj.d.ts +83 -0
- package/dist/{collector-yqgjGje7.d.ts → collector-BPzZezAG.d.ts} +36 -5
- package/dist/{collector-D0cgyN6N.js → collector-D14DcZx9.js} +65 -10
- package/dist/collector-D14DcZx9.js.map +1 -0
- package/dist/{config-_cYm9LPl.js → config-CCcE_tqx.js} +2906 -1778
- package/dist/config-CCcE_tqx.js.map +1 -0
- package/dist/{config-V0XC9iz_.d.ts → config-D2INrjr_.d.ts} +239 -25
- package/dist/core/index.d.ts +5 -5
- package/dist/core/index.js +6 -6
- package/dist/{core-DdjoZG0r.js → core-B5d0IPi2.js} +69 -131
- package/dist/core-B5d0IPi2.js.map +1 -0
- package/dist/{css-writer-DTUwLjgD.js → css-writer-B5DBoxhf.js} +54 -15
- package/dist/css-writer-B5DBoxhf.js.map +1 -0
- package/dist/{format-rules-Bu_qoamZ.js → format-rules-BbKDjsfO.js} +2 -2
- package/dist/{format-rules-Bu_qoamZ.js.map → format-rules-BbKDjsfO.js.map} +1 -1
- package/dist/{hydrate-CKk-rgmY.js → hydrate-CwALW3J9.js} +3 -11
- package/dist/{hydrate-CKk-rgmY.js.map → hydrate-CwALW3J9.js.map} +1 -1
- package/dist/{index-BjnGYI5D.d.ts → index-BAAbdfRs.d.ts} +217 -150
- package/dist/{index-tRick_JW.d.ts → index-l_NdJSUS.d.ts} +161 -61
- package/dist/index.d.ts +5 -5
- package/dist/index.js +75 -11
- package/dist/index.js.map +1 -1
- package/dist/{keyframes-5LJYS8_P.js → keyframes-B8M1FmtE.js} +10 -181
- package/dist/keyframes-B8M1FmtE.js.map +1 -0
- package/dist/{merge-styles-Blrs8kLM.js → merge-styles--1zOSFlS.js} +2 -2
- package/dist/{merge-styles-Blrs8kLM.js.map → merge-styles--1zOSFlS.js.map} +1 -1
- package/dist/{merge-styles-DDss7wRH.d.ts → merge-styles-NEvqayL_.d.ts} +2 -2
- package/dist/{resolve-recipes-DR5cSG3X.js → resolve-recipes-Caix5NnH.js} +3 -3
- package/dist/{resolve-recipes-DR5cSG3X.js.map → resolve-recipes-Caix5NnH.js.map} +1 -1
- package/dist/ssr/astro-client.js +1 -1
- package/dist/ssr/astro-middleware.js +1 -1
- package/dist/ssr/astro-middleware.js.map +1 -1
- package/dist/ssr/astro.d.ts +1 -5
- package/dist/ssr/astro.js +2 -147
- package/dist/ssr/index.d.ts +2 -9
- package/dist/ssr/index.js +4 -4
- package/dist/ssr/index.js.map +1 -1
- package/dist/ssr/next.d.ts +1 -1
- package/dist/ssr/next.js +5 -6
- package/dist/ssr/next.js.map +1 -1
- package/dist/static/index.d.ts +2 -2
- package/dist/static/index.js +1 -1
- package/dist/zero/babel.d.ts +2 -80
- package/dist/zero/babel.js +27 -23
- package/dist/zero/babel.js.map +1 -1
- package/dist/zero/index.d.ts +16 -2
- package/dist/zero/index.js +2 -2
- package/dist/zero/next.d.ts +1 -1
- package/dist/zero/next.js +1 -1
- package/dist/zero/next.js.map +1 -1
- package/docs/README.md +3 -1
- package/docs/ai-agents.md +21 -7
- package/docs/configuration.md +220 -30
- package/docs/debug.md +7 -7
- package/docs/design-system.md +2 -2
- package/docs/dsl.md +68 -8
- package/docs/injector.md +31 -4
- package/docs/methodology.md +1 -1
- package/docs/migration-v3.md +285 -0
- package/docs/pipeline.md +3 -3
- package/docs/plugins.md +349 -0
- package/docs/react-api.md +61 -1
- package/docs/ssr.md +40 -33
- package/docs/styles.md +27 -9
- package/docs/tasty-static.md +8 -6
- package/package.json +7 -7
- package/tasty.config.ts +4 -0
- package/dist/collector-D0cgyN6N.js.map +0 -1
- package/dist/config-_cYm9LPl.js.map +0 -1
- package/dist/core-DdjoZG0r.js.map +0 -1
- package/dist/css-writer-DTUwLjgD.js.map +0 -1
- package/dist/keyframes-5LJYS8_P.js.map +0 -1
- package/dist/ssr/astro.js.map +0 -1
|
@@ -50,7 +50,7 @@ interface StyleInjectorConfig {
|
|
|
50
50
|
states?: Record<string, string>;
|
|
51
51
|
/**
|
|
52
52
|
* Automatically infer and register CSS @property declarations
|
|
53
|
-
* from custom property values. When false, only explicit @
|
|
53
|
+
* from custom property values. When false, only explicit @property are used.
|
|
54
54
|
* @default true
|
|
55
55
|
*/
|
|
56
56
|
autoPropertyTypes?: boolean;
|
|
@@ -168,8 +168,18 @@ interface RootRegistry {
|
|
|
168
168
|
injectedProperties: Map<string, string>;
|
|
169
169
|
/** Content hashes of injected @font-face rules for deduplication */
|
|
170
170
|
injectedFontFaces: Set<string>;
|
|
171
|
-
/**
|
|
172
|
-
|
|
171
|
+
/**
|
|
172
|
+
* Injected @counter-style rules. Maps the name to whether it was injected
|
|
173
|
+
* "strong" (`true`, the default — overrides) or "weak" (`false`, global
|
|
174
|
+
* `configure()` definitions that never clobber an existing rule).
|
|
175
|
+
*/
|
|
176
|
+
injectedCounterStyles: Map<string, boolean>;
|
|
177
|
+
/**
|
|
178
|
+
* Injected @function rules. Maps the CSS function name to whether it was
|
|
179
|
+
* injected "strong" (`true`, the default — overrides) or "weak" (`false`,
|
|
180
|
+
* global `configure()` definitions that never clobber an existing rule).
|
|
181
|
+
*/
|
|
182
|
+
injectedFunctions: Map<string, boolean>;
|
|
173
183
|
/** Global rules tracking for index adjustment */
|
|
174
184
|
globalRules: Map<string, RuleInfo>;
|
|
175
185
|
/** Resolver for auto-inferring @property types from declaration values */
|
|
@@ -225,6 +235,51 @@ interface PropertyDefinition {
|
|
|
225
235
|
/** Initial value for the property */
|
|
226
236
|
initialValue?: string | number;
|
|
227
237
|
}
|
|
238
|
+
/**
|
|
239
|
+
* Options for registering a CSS `@property`.
|
|
240
|
+
* Extends {@link PropertyDefinition} with an optional injection root.
|
|
241
|
+
*/
|
|
242
|
+
interface PropertyOptions extends PropertyDefinition {
|
|
243
|
+
/** Shadow root or document to inject into */
|
|
244
|
+
root?: Document | ShadowRoot;
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* A single parameter for a CSS @function at-rule.
|
|
248
|
+
*
|
|
249
|
+
* - `true` — a bare parameter with no type or default.
|
|
250
|
+
* - `string` — a CSS type shorthand (e.g. `'<length>'`, `'<color>'`).
|
|
251
|
+
* - object — full form with optional `syntax` (type) and `default` value.
|
|
252
|
+
*/
|
|
253
|
+
type FunctionParameter = true | string | {
|
|
254
|
+
syntax?: string;
|
|
255
|
+
default?: string | number;
|
|
256
|
+
};
|
|
257
|
+
/**
|
|
258
|
+
* Definition for a CSS @function at-rule (custom function).
|
|
259
|
+
*
|
|
260
|
+
* The descriptor body reads like a mini styles object: any `$name` key declares
|
|
261
|
+
* a local variable (`--name`) whose value is parsed through the Tasty DSL.
|
|
262
|
+
* `result` is the only required field.
|
|
263
|
+
*
|
|
264
|
+
* @example
|
|
265
|
+
* ```ts
|
|
266
|
+
* // @function --negative(--value) { result: calc(-1 * var(--value)); }
|
|
267
|
+
* { args: ['$value'], result: '(-1 * $value)' }
|
|
268
|
+
* ```
|
|
269
|
+
*/
|
|
270
|
+
interface FunctionDefinition {
|
|
271
|
+
/**
|
|
272
|
+
* Ordered parameters. Array form lists bare parameter names (`['$value']`);
|
|
273
|
+
* object form maps each parameter name to its type/default.
|
|
274
|
+
*/
|
|
275
|
+
args?: string[] | Record<string, FunctionParameter>;
|
|
276
|
+
/** Optional return type, e.g. `'<color>'`. */
|
|
277
|
+
returns?: string;
|
|
278
|
+
/** The `result:` descriptor value (parsed through the Tasty DSL). Required. */
|
|
279
|
+
result: string;
|
|
280
|
+
/** Local variables: any `$name` key declares `--name` in the body. */
|
|
281
|
+
[localVar: `$${string}`]: string | number | undefined;
|
|
282
|
+
}
|
|
228
283
|
/**
|
|
229
284
|
* Descriptors for a CSS @font-face at-rule.
|
|
230
285
|
*/
|
|
@@ -289,11 +344,6 @@ interface RawCSSResult {
|
|
|
289
344
|
interface CSSProperties extends Properties<string | number> {}
|
|
290
345
|
//#endregion
|
|
291
346
|
//#region src/parser/types.d.ts
|
|
292
|
-
declare enum Bucket {
|
|
293
|
-
Color = 0,
|
|
294
|
-
Value = 1,
|
|
295
|
-
Mod = 2
|
|
296
|
-
}
|
|
297
347
|
/**
|
|
298
348
|
* A part within a group, representing a slash-separated segment.
|
|
299
349
|
* For example, in `'2px solid #red / 4px'`, there are two parts:
|
|
@@ -332,7 +382,7 @@ interface ProcessedStyle {
|
|
|
332
382
|
}
|
|
333
383
|
type UnitHandler = (scalar: number) => string;
|
|
334
384
|
interface ParserOptions {
|
|
335
|
-
|
|
385
|
+
functions?: Record<string, (parsed: StyleDetails[]) => string>;
|
|
336
386
|
units?: Record<string, string | UnitHandler>;
|
|
337
387
|
cacheSize?: number;
|
|
338
388
|
}
|
|
@@ -343,7 +393,7 @@ declare class StyleParser {
|
|
|
343
393
|
private cache;
|
|
344
394
|
constructor(opts?: ParserOptions);
|
|
345
395
|
process(src: string): ProcessedStyle;
|
|
346
|
-
|
|
396
|
+
setFunctions(functions: Required<ParserOptions>['functions']): void;
|
|
347
397
|
setUnits(units: Required<ParserOptions>['units']): void;
|
|
348
398
|
updateOptions(patch: Partial<ParserOptions>): void;
|
|
349
399
|
/**
|
|
@@ -420,12 +470,44 @@ type StyleValueStateMap<T = string> = Record<string, StyleValue<T> | '@inherit'>
|
|
|
420
470
|
* Use this for component props that accept style values.
|
|
421
471
|
*/
|
|
422
472
|
type StylePropValue<T = string> = StyleValue<T> | StyleValueStateMap<T>;
|
|
473
|
+
/**
|
|
474
|
+
* One dependency value as a style handler receives it: already resolved for a
|
|
475
|
+
* single state, but still the **raw authored DSL string** (`'2x'`, `'#purple.5'`).
|
|
476
|
+
* Handlers parse it themselves via {@link parseStyle} / {@link parseColor}.
|
|
477
|
+
*/
|
|
478
|
+
type ResolvedStyleValue = StyleValue<string>;
|
|
479
|
+
/**
|
|
480
|
+
* The dependency map a handler receives — one resolved value per style name in
|
|
481
|
+
* its `__lookupStyles`.
|
|
482
|
+
*/
|
|
483
|
+
type StyleHandlerProps<TDeps extends string = string> = Partial<Record<TDeps, ResolvedStyleValue>>;
|
|
484
|
+
/**
|
|
485
|
+
* One set of CSS declarations returned by a style handler.
|
|
486
|
+
*
|
|
487
|
+
* Keys are **kebab-case** CSS property names (`'background-color'`, not
|
|
488
|
+
* `backgroundColor`) or `--custom-property` names. Values are stringified, so
|
|
489
|
+
* numbers are accepted. `$` is reserved as a selector suffix.
|
|
490
|
+
*/
|
|
423
491
|
type CSSMap = {
|
|
424
|
-
|
|
425
|
-
} & Record<string, string | string[]>;
|
|
492
|
+
/** Selector suffix (or suffixes) these declarations apply to, e.g. `'& > *'`. */$?: string | string[];
|
|
493
|
+
} & Record<string, string | number | (string | number)[] | undefined>;
|
|
426
494
|
type StyleHandlerResult = CSSMap | CSSMap[] | null | void;
|
|
427
|
-
type RawStyleHandler = (
|
|
428
|
-
type StyleHandler = RawStyleHandler & {
|
|
495
|
+
type RawStyleHandler<TProps extends object = StyleHandlerProps> = (props: TProps) => StyleHandlerResult;
|
|
496
|
+
type StyleHandler<TProps extends object = StyleHandlerProps> = RawStyleHandler<TProps> & {
|
|
497
|
+
__lookupStyles: string[];
|
|
498
|
+
};
|
|
499
|
+
/**
|
|
500
|
+
* The handler type used by the registry (`STYLE_HANDLER_MAP`), with parameter
|
|
501
|
+
* variance erased.
|
|
502
|
+
*
|
|
503
|
+
* Handlers declare narrow, hand-written dependency types — `({ fill }: { fill?:
|
|
504
|
+
* string }) => …` — which under `strictFunctionTypes` are not assignable to a
|
|
505
|
+
* wider parameter type. The registry stores handlers of many different dependency
|
|
506
|
+
* shapes together, so it needs the erased form. Prefer {@link StyleHandler} (or
|
|
507
|
+
* {@link defineHandler}) when writing a handler; this type is for code that
|
|
508
|
+
* inspects the registry.
|
|
509
|
+
*/
|
|
510
|
+
type AnyStyleHandler = ((props: any) => StyleHandlerResult) & {
|
|
429
511
|
__lookupStyles: string[];
|
|
430
512
|
};
|
|
431
513
|
/**
|
|
@@ -433,8 +515,11 @@ type StyleHandler = RawStyleHandler & {
|
|
|
433
515
|
* - Function only: lookup styles inferred from key name
|
|
434
516
|
* - Single property tuple: ['styleName', handler]
|
|
435
517
|
* - Multi-property tuple: [['style1', 'style2'], handler]
|
|
518
|
+
*
|
|
519
|
+
* Use {@link defineHandler} to have the dependency names inferred into the
|
|
520
|
+
* handler's parameter type instead of annotating it by hand.
|
|
436
521
|
*/
|
|
437
|
-
type StyleHandlerDefinition = RawStyleHandler | [
|
|
522
|
+
type StyleHandlerDefinition<TDeps extends string = string> = RawStyleHandler<StyleHandlerProps<TDeps>> | [TDeps, RawStyleHandler<StyleHandlerProps<TDeps>>] | [readonly TDeps[], RawStyleHandler<StyleHandlerProps<TDeps>>];
|
|
438
523
|
interface ParsedColor {
|
|
439
524
|
color?: string;
|
|
440
525
|
name?: string;
|
|
@@ -450,36 +535,16 @@ declare const CUSTOM_UNITS: {
|
|
|
450
535
|
sf: (num: number) => string;
|
|
451
536
|
};
|
|
452
537
|
declare const DIRECTIONS: string[];
|
|
453
|
-
declare function customFunc(name: string, fn: (groups: StyleDetails[]) => string): void;
|
|
454
538
|
/**
|
|
455
539
|
* Get the global StyleParser instance.
|
|
456
540
|
* Used by configure() to apply parser configuration.
|
|
457
541
|
*/
|
|
458
542
|
declare function getGlobalParser(): StyleParser;
|
|
459
|
-
/**
|
|
460
|
-
* Get the current custom functions registry.
|
|
461
|
-
* Used by configure() to merge with new functions.
|
|
462
|
-
*/
|
|
463
|
-
declare function getGlobalFuncs(): Record<string, (groups: StyleDetails[]) => string>;
|
|
464
|
-
/**
|
|
465
|
-
* Set global predefined tokens.
|
|
466
|
-
* Called from configure() after processing token values.
|
|
467
|
-
* Merges with existing tokens (new tokens override existing ones with same key).
|
|
468
|
-
* Keys are normalized to lowercase (parser lowercases input before classification).
|
|
469
|
-
* @internal
|
|
470
|
-
*/
|
|
471
|
-
declare function setGlobalPredefinedTokens(tokens: Record<string, string>): void;
|
|
472
543
|
/**
|
|
473
544
|
* Get the current global predefined tokens.
|
|
474
545
|
* Returns null if no tokens are configured.
|
|
475
546
|
*/
|
|
476
547
|
declare function getGlobalPredefinedTokens(): Record<string, string> | null;
|
|
477
|
-
/**
|
|
478
|
-
* Reset global predefined tokens.
|
|
479
|
-
* Used for testing.
|
|
480
|
-
* @internal
|
|
481
|
-
*/
|
|
482
|
-
declare function resetGlobalPredefinedTokens(): void;
|
|
483
548
|
/**
|
|
484
549
|
*
|
|
485
550
|
* @param {String} value
|
|
@@ -616,9 +681,12 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
616
681
|
/**
|
|
617
682
|
* The fade style applies gradient-based fading masks to the edges of an element. Replaces complex CSS mask gradients with a simple, declarative API.
|
|
618
683
|
*
|
|
619
|
-
* Syntax: `[width] [
|
|
684
|
+
* Syntax: `[width] [direction...] [#from-color] [#to-color]`
|
|
620
685
|
*
|
|
621
|
-
* Multiple groups can be separated by commas to specify different
|
|
686
|
+
* Multiple groups can be separated by commas to specify different widths and
|
|
687
|
+
* colors per direction. A group that names edges takes a single width, applied
|
|
688
|
+
* to every edge it names; a group that names none covers all four edges and
|
|
689
|
+
* keeps plain CSS shorthand order.
|
|
622
690
|
*
|
|
623
691
|
* Color tokens (optional):
|
|
624
692
|
* - First color: transparent start of gradient (default: `rgb(0 0 0 / 0)`)
|
|
@@ -627,14 +695,16 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
627
695
|
* Examples:
|
|
628
696
|
* - `fade="top"` // fade only top edge with default width
|
|
629
697
|
* - `fade="2x left right"` // fade left and right edges with 2x width
|
|
698
|
+
* - `fade={true}` // all edges at the design-system default width
|
|
630
699
|
* - `fade="1x top"` // fade only top edge with 1x width
|
|
631
|
-
* - `fade="3x 1x
|
|
700
|
+
* - `fade="3x 1x"` // all edges: top/bottom 3x, left/right 1x
|
|
701
|
+
* - `fade="3x top, 1x bottom"` // top: 3x width, bottom: 1x width
|
|
632
702
|
* - `fade="2x #transparent #dark"` // custom colors for gradient mask
|
|
633
703
|
* - `fade="1x top #clear #solid"` // top edge with custom mask colors
|
|
634
704
|
* - `fade="top #red #blue, bottom #green #yellow"` // different colors per direction
|
|
635
705
|
* - `fade="2x top #a #b, 1x bottom #c #d"` // different widths and colors per direction
|
|
636
706
|
*/
|
|
637
|
-
fade?: 'top' | 'right' | 'bottom' | 'left' | string;
|
|
707
|
+
fade?: 'top' | 'right' | 'bottom' | 'left' | string | boolean;
|
|
638
708
|
/**
|
|
639
709
|
* Scrollbar styling using standard CSS properties (`scrollbar-width`, `scrollbar-color`, `scrollbar-gutter`).
|
|
640
710
|
*
|
|
@@ -671,20 +741,28 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
671
741
|
/**
|
|
672
742
|
* Shorthand for element padding. Supports custom units, directional modifiers, and design-system-driven defaults.
|
|
673
743
|
*
|
|
744
|
+
* A group that names directions takes a single value, applied to every
|
|
745
|
+
* direction it names — use comma groups for per-side values.
|
|
746
|
+
*
|
|
674
747
|
* Examples:
|
|
675
748
|
* - `padding="2x 1x"` // top/bottom: 2x, left/right: 1x
|
|
676
749
|
* - `padding="2x top"` // only top padding: 2x
|
|
677
750
|
* - `padding="1x left right"` // left and right padding: 1x
|
|
751
|
+
* - `padding="2x top, 4x right"` // top: 2x, right: 4x, bottom/left: 0
|
|
678
752
|
* - `padding={true}` // default padding on all sides
|
|
679
753
|
*/
|
|
680
754
|
padding?: CSSProperties['padding'] | string | boolean;
|
|
681
755
|
/**
|
|
682
756
|
* Shorthand for element margin. Supports custom units, directional modifiers, and design-system-driven defaults.
|
|
683
757
|
*
|
|
758
|
+
* A group that names directions takes a single value, applied to every
|
|
759
|
+
* direction it names — use comma groups for per-side values.
|
|
760
|
+
*
|
|
684
761
|
* Examples:
|
|
685
762
|
* - `margin="2x 1x"` // top/bottom: 2x, left/right: 1x
|
|
686
763
|
* - `margin="2x top"` // only top margin: 2x
|
|
687
764
|
* - `margin="1x left right"` // left and right margin: 1x
|
|
765
|
+
* - `margin="2x top, 4x right"` // top: 2x, right: 4x, bottom/left: 0
|
|
688
766
|
* - `margin={true}` // default margin on all sides
|
|
689
767
|
*/
|
|
690
768
|
margin?: CSSProperties['margin'] | string | boolean;
|
|
@@ -927,6 +1005,7 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
927
1005
|
* Examples:
|
|
928
1006
|
* - `scrollMargin="2x"` // scroll-margin on all sides: 2x
|
|
929
1007
|
* - `scrollMargin="2x top"` // only top scroll-margin: 2x
|
|
1008
|
+
* - `scrollMargin="2x top, 4x bottom"` // top: 2x, bottom: 4x
|
|
930
1009
|
* - `scrollMargin={true}` // default scroll-margin on all sides
|
|
931
1010
|
*/
|
|
932
1011
|
scrollMargin?: CSSProperties['scrollMargin'] | string | boolean;
|
|
@@ -943,13 +1022,18 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
943
1022
|
* - `inset="0"` // all sides: 0
|
|
944
1023
|
* - `inset="2x top"` // only top offset: 2x
|
|
945
1024
|
* - `inset="1x left right"` // left and right offsets: 1x
|
|
1025
|
+
* - `inset="2x top, 4x right"` // top: 2x, right: 4x, bottom/left: auto
|
|
946
1026
|
* - `inset="bottom dock"` // bottom-anchored, full width: auto 0 0 0
|
|
947
1027
|
* - `inset={true}` // all sides: 0
|
|
948
1028
|
*
|
|
1029
|
+
* A group that names directions takes a single value, applied to every
|
|
1030
|
+
* direction it names — use comma groups for per-side values.
|
|
1031
|
+
*
|
|
949
1032
|
* The `dock` modifier pins the named edge and spans its full length, applying
|
|
950
|
-
* the value to the two perpendicular sides as well.
|
|
951
|
-
*
|
|
952
|
-
*
|
|
1033
|
+
* the value to the two perpendicular sides as well. `dock` is the one case
|
|
1034
|
+
* where a directional group takes two values: the second applies to those
|
|
1035
|
+
* spanned sides, so `inset="2x 4x bottom dock"` pins the bottom at `2x` and
|
|
1036
|
+
* insets the sides by `4x`. Without `dock` a second value is ignored.
|
|
953
1037
|
*/
|
|
954
1038
|
inset?: 'top' | 'right' | 'bottom' | 'left' | 'dock' | string | CSSProperties['inset'];
|
|
955
1039
|
/**
|
|
@@ -971,28 +1055,42 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
|
|
|
971
1055
|
* - `#name` for color properties → `--name-color` (auto-sets syntax: '<color>', defaults initialValue: 'transparent')
|
|
972
1056
|
*
|
|
973
1057
|
* Examples:
|
|
974
|
-
* - `'@
|
|
975
|
-
* - `'@
|
|
1058
|
+
* - `'@property': { '$rotation': { syntax: '<angle>', inherits: false, initialValue: '45deg' } }`
|
|
1059
|
+
* - `'@property': { '#theme': { initialValue: 'purple' } }` // syntax: '<color>' is auto-set
|
|
976
1060
|
*/
|
|
977
|
-
'@
|
|
1061
|
+
'@property'?: Record<string, PropertyDefinition>;
|
|
978
1062
|
/**
|
|
979
1063
|
* Local @font-face definitions for this component.
|
|
980
1064
|
* Keys are font-family names, values are descriptors or arrays of descriptors
|
|
981
1065
|
* (for multiple weights/styles of the same family).
|
|
982
1066
|
*
|
|
983
1067
|
* Examples:
|
|
984
|
-
* - `'@
|
|
985
|
-
* - `'@
|
|
1068
|
+
* - `'@font-face': { Icons: { src: 'url("/fonts/icons.woff2") format("woff2")', fontDisplay: 'block' } }`
|
|
1069
|
+
* - `'@font-face': { 'Brand Sans': [{ src: '...', fontWeight: 400 }, { src: '...', fontWeight: 700 }] }`
|
|
986
1070
|
*/
|
|
987
|
-
'@
|
|
1071
|
+
'@font-face'?: Record<string, FontFaceInput>;
|
|
988
1072
|
/**
|
|
989
1073
|
* Local @counter-style definitions for this component.
|
|
990
1074
|
* Keys are counter-style names, values are descriptor objects.
|
|
991
1075
|
*
|
|
992
1076
|
* Examples:
|
|
993
|
-
* - `'@
|
|
1077
|
+
* - `'@counter-style': { thumbs: { system: 'cyclic', symbols: '"👍"', suffix: '" "' } }`
|
|
1078
|
+
*/
|
|
1079
|
+
'@counter-style'?: Record<string, CounterStyleDescriptors>;
|
|
1080
|
+
/**
|
|
1081
|
+
* Local @function definitions (CSS custom functions) for this component.
|
|
1082
|
+
* Keys are function names using `$$name` (the literal callable `--name`),
|
|
1083
|
+
* matching the call site `$$name(...)`. Values are function definitions.
|
|
1084
|
+
*
|
|
1085
|
+
* Local variables are declared directly as `$name` keys on the descriptor;
|
|
1086
|
+
* `result`, local-var values, and parameter defaults are parsed through the
|
|
1087
|
+
* Tasty DSL (units, color tokens, auto-calc, fallbacks).
|
|
1088
|
+
*
|
|
1089
|
+
* Examples:
|
|
1090
|
+
* - `'@function': { '$$negative': { args: ['$value'], result: '(-1 * $value)' } }`
|
|
1091
|
+
* - `'@function': { '$$shadow': { args: { '$color': { syntax: '<color>', default: 'inherit' } }, returns: '<color>', '$offset': '2px', result: '$offset $offset ($color, black)' } }`
|
|
994
1092
|
*/
|
|
995
|
-
'@
|
|
1093
|
+
'@function'?: Record<string, FunctionDefinition>;
|
|
996
1094
|
/**
|
|
997
1095
|
* Apply one or more predefined style recipes by name.
|
|
998
1096
|
* Recipes are defined globally via `configure({ recipes: { ... } })`.
|
|
@@ -1013,7 +1111,7 @@ type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | '
|
|
|
1013
1111
|
type Selector = `${SuffixForSelector}${string}`;
|
|
1014
1112
|
type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
|
|
1015
1113
|
/** Special style keys that should not be wrapped in StyleValue/StyleValueStateMap */
|
|
1016
|
-
type SpecialStyleKeys = '@keyframes' | '@
|
|
1114
|
+
type SpecialStyleKeys = '@keyframes' | '@property' | '@font-face' | '@counter-style' | '@function' | 'recipe';
|
|
1017
1115
|
type StylesWithoutSelectors = { [key in keyof StylesInterface as key extends SpecialStyleKeys ? never : key]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> };
|
|
1018
1116
|
/**
|
|
1019
1117
|
* Index signature for recipe-specific arbitrary keys.
|
|
@@ -1024,27 +1122,29 @@ type StylesWithoutSelectors = { [key in keyof StylesInterface as key extends Spe
|
|
|
1024
1122
|
type RecipeIndexSignature = Record<string, StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined>>;
|
|
1025
1123
|
/**
|
|
1026
1124
|
* Style type for recipe definitions.
|
|
1027
|
-
* Like StylesWithoutSelectors but also allows `@keyframes`, `@
|
|
1125
|
+
* Like StylesWithoutSelectors but also allows `@keyframes`, `@property`,
|
|
1028
1126
|
* local predefined states, and vendor-prefixed CSS properties.
|
|
1029
1127
|
* Excludes `recipe` to prevent recursive references.
|
|
1030
1128
|
*/
|
|
1031
1129
|
type RecipeStyles = StylesWithoutSelectors & RecipeIndexSignature & {
|
|
1032
1130
|
'@keyframes'?: StylesInterface['@keyframes'];
|
|
1033
|
-
'@
|
|
1034
|
-
'@
|
|
1035
|
-
'@
|
|
1131
|
+
'@property'?: StylesInterface['@property'];
|
|
1132
|
+
'@font-face'?: StylesInterface['@font-face'];
|
|
1133
|
+
'@counter-style'?: StylesInterface['@counter-style'];
|
|
1134
|
+
'@function'?: StylesInterface['@function'];
|
|
1036
1135
|
};
|
|
1037
1136
|
/** Special properties that are not regular style values */
|
|
1038
1137
|
interface SpecialStyleProperties {
|
|
1039
1138
|
'@keyframes'?: StylesInterface['@keyframes'];
|
|
1040
|
-
'@
|
|
1041
|
-
'@
|
|
1042
|
-
'@
|
|
1139
|
+
'@property'?: StylesInterface['@property'];
|
|
1140
|
+
'@font-face'?: StylesInterface['@font-face'];
|
|
1141
|
+
'@counter-style'?: StylesInterface['@counter-style'];
|
|
1142
|
+
'@function'?: StylesInterface['@function'];
|
|
1043
1143
|
recipe?: StylesInterface['recipe'];
|
|
1044
1144
|
}
|
|
1045
1145
|
/** Index signature for arbitrary style keys (sub-elements, CSS variables, etc.) */
|
|
1046
1146
|
interface StylesIndexSignature {
|
|
1047
|
-
[key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@
|
|
1147
|
+
[key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@property'] | StylesInterface['@font-face'] | StylesInterface['@counter-style'] | StylesInterface['@function'];
|
|
1048
1148
|
/**
|
|
1049
1149
|
* Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
|
|
1050
1150
|
* Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.
|
|
@@ -1302,5 +1402,5 @@ interface RenderStylesOptions {
|
|
|
1302
1402
|
declare function renderStyles(styles?: Styles, classNameOrSelector?: undefined, options?: undefined, pipelineCacheKey?: string): RenderResult;
|
|
1303
1403
|
declare function renderStyles(styles: Styles | undefined, classNameOrSelector: string, options?: RenderStylesOptions): StyleResult[];
|
|
1304
1404
|
//#endregion
|
|
1305
|
-
export {
|
|
1306
|
-
//# sourceMappingURL=index-
|
|
1405
|
+
export { StyleParser as $, ParsedColor as A, StyleUsage as At, StyleValueStateMap as B, SuffixForSelector as C, PropertyOptions as Ct, CSSMap as D, SheetInfo as Dt, AnyStyleHandler as E, RuleInfo as Et, StyleHandlerProps as F, parseColor as G, getGlobalParser as H, StyleHandlerResult as I, getNamedColorHex as J, parseStyle as K, StyleMap as L, ResolvedStyleValue as M, StyleHandler as N, CUSTOM_UNITS as O, StyleInjectorConfig as Ot, StyleHandlerDefinition as P, strToRgb as Q, StylePropValue as R, StylesWithoutSelectors as S, PropertyDefinition as St, TastyPresetNames as T, RootRegistry as Tt, getGlobalPredefinedTokens as U, filterMods as V, normalizeColorTokenValue as W, hexToRgb as X, getRgbValuesFromRgbaString as Y, hslToRgbValues as Z, NotSelector as _, InjectionMode as _t, ParseStateKeyOptions as a, CSSProperties as at, Styles as b, KeyframesResult as bt, ParsedAdvancedState as c, DisposeFunction as ct, getGlobalPredefinedStates as d, FunctionDefinition as dt, ParserOptions as et, setGlobalPredefinedStates as f, FunctionParameter as ft, NoType as g, InjectResult as gt, ConfigTokens as h, GlobalInjectResult as ht, renderStyles as i, UnitHandler as it, RawStyleHandler as j, DIRECTIONS as k, StyleRule as kt, StateParserContext as l, FontFaceDescriptors as lt, ConfigTokenValue as m, GCOptions as mt, StyleResult as n, StyleDetails as nt, parseStateKey as o, CacheMetrics as ot, ConditionNode as p, GCConfig as pt, stringifyStyles as q, isSelector as r, StyleDetailsPart as rt, AtRuleContext as s, CounterStyleDescriptors as st, RenderResult as t, ProcessedStyle as tt, createStateParserContext as u, FontFaceInput as ut, RecipeStyles as v, KeyframesCacheEntry as vt, TastyNamedColors as w, RawCSSResult as wt, StylesInterface as x, KeyframesSteps as xt, Selector as y, KeyframesInfo as yt, StyleValue as z };
|
|
1406
|
+
//# sourceMappingURL=index-l_NdJSUS.d.ts.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { S as
|
|
3
|
-
import { $ as
|
|
4
|
-
import { t as mergeStyles } from "./merge-styles-
|
|
5
|
-
export { APPEARANCE_CHUNK_STYLES, type AllBaseProps, type AllBasePropsWithMods, type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps,
|
|
1
|
+
import { C as ParseFunction, D as PropHandlerDefinition, E as PropHandler, O as PropHandlerProps, S as FunctionsConfig, T as SheetManager, _ as TastyPluginFactory, a as getGlobalFontFaces, b as generateTypographyTokens, c as getGlobalRecipes, d as hasGlobalRecipes, f as hasStylesGenerated, g as TastyPlugin, h as resetConfig, i as getGlobalCounterStyles, l as getNamePrefix, m as isTestEnvironment, n as configure, o as getGlobalFunctions, p as isConfigLocked, r as getConfig, s as getGlobalKeyframes, t as TastyConfig, u as hasGlobalKeyframes, v as TypographyPreset, w as StyleInjector, x as ColorSpace, y as TypographyTokenValue } from "./config-D2INrjr_.js";
|
|
2
|
+
import { $ as StyleParser, A as ParsedColor, At as StyleUsage, B as StyleValueStateMap, C as SuffixForSelector, Ct as PropertyOptions, D as CSSMap, Dt as SheetInfo, E as AnyStyleHandler, Et as RuleInfo, F as StyleHandlerProps, G as parseColor, H as getGlobalParser, I as StyleHandlerResult, J as getNamedColorHex, K as parseStyle, L as StyleMap, M as ResolvedStyleValue, N as StyleHandler, O as CUSTOM_UNITS, Ot as StyleInjectorConfig, P as StyleHandlerDefinition, Q as strToRgb, R as StylePropValue, S as StylesWithoutSelectors, St as PropertyDefinition, T as TastyPresetNames, Tt as RootRegistry, U as getGlobalPredefinedTokens, V as filterMods, W as normalizeColorTokenValue, X as hexToRgb, Y as getRgbValuesFromRgbaString, Z as hslToRgbValues, _ as NotSelector, _t as InjectionMode, a as ParseStateKeyOptions, at as CSSProperties, b as Styles, bt as KeyframesResult, c as ParsedAdvancedState, ct as DisposeFunction, d as getGlobalPredefinedStates, dt as FunctionDefinition, et as ParserOptions, f as setGlobalPredefinedStates, ft as FunctionParameter, g as NoType, gt as InjectResult, h as ConfigTokens, i as renderStyles, it as UnitHandler, j as RawStyleHandler, k as DIRECTIONS, kt as StyleRule, l as StateParserContext, lt as FontFaceDescriptors, m as ConfigTokenValue, mt as GCOptions, n as StyleResult, nt as StyleDetails, o as parseStateKey, ot as CacheMetrics, p as ConditionNode, pt as GCConfig, q as stringifyStyles, r as isSelector, rt as StyleDetailsPart, s as AtRuleContext, st as CounterStyleDescriptors, t as RenderResult, tt as ProcessedStyle, u as createStateParserContext, ut as FontFaceInput, v as RecipeStyles, vt as KeyframesCacheEntry, w as TastyNamedColors, wt as RawCSSResult, x as StylesInterface, xt as KeyframesSteps, y as Selector, yt as KeyframesInfo, z as StyleValue } from "./index-l_NdJSUS.js";
|
|
3
|
+
import { $ as okhstFunction, $t as TagName, A as keyframes, At as TastyProps, B as ChunkInfo, Bt as BlockOuterStyleProps, C as getCSSTextForNode, Ct as ResolveTokenProps, D as injectRawCSS, Dt as TastyElementOptions, E as injectGlobal, Et as TastyComponentPropsWithDefaults, F as ComputeStylesOptions, Ft as AllBaseProps, G as DIMENSION_CHUNK_STYLES, Gt as ExtraBaseStyleProps, H as APPEARANCE_CHUNK_STYLES, Ht as ColorStyleProps, I as ComputeStylesResult, It as BaseProps, J as LAYOUT_CHUNK_STYLES, Jt as ModValue, K as DISPLAY_CHUNK_STYLES, Kt as FlowStyleProps, L as computeStyles, Lt as BasePropsWithoutChildren, M as touch, Mt as VariantMap, N as ChunkSheetRegistry, Nt as WithVariant, O as injector, Ot as TastyElementProps, P as chunkSheetRegistry, Pt as tasty, Q as createColorFunc, Qt as ShortGridStyles, R as defineHandler, Rt as BaseStyleProps, S as getCSSText, St as ResolveModProps, T as inject, Tt as SubElementProps, U as CHUNK_NAMES, Ut as ContainerStyleProps, V as categorizeStyleKeys, Vt as BlockStyleProps, W as ChunkName, Wt as DimensionStyleProps, X as STYLE_TO_CHUNK, Xt as OuterStyleProps, Y as POSITION_CHUNK_STYLES, Yt as Mods, Z as resolveFunctionColor, Zt as PositionStyleProps, _ as createInjector, _n as POSITION_STYLES, _t as ElementsDefinition, a as DebugOptions, an as TokenValue, at as useFunction, b as func, bn as DEFAULT_ZERO_NAME_PREFIX, bt as ResolveAsProps, c as tastyDebug, cn as BLOCK_INNER_STYLES, ct as UsePropertyOptions, d as dotize, dn as COLOR_STYLES, dt as useRawCSS, en as TastyBaseStylePropNames, et as okhstPlugin, f as _modAttrs, fn as CONTAINER_STYLES, ft as useGlobalStyles, g as counterStyle, gn as OUTER_STYLES, gt as Element, h as cleanup, hn as INNER_STYLES, ht as AllBasePropsWithMods, i as DebugChunkInfo, in as TextStyleProps, it as UseFunctionOptions, j as property, jt as TokenPropsInput, k as isPropertyDefined, kt as TastyPolymorphicComponent, l as processTokens, ln as BLOCK_OUTER_STYLES, lt as useProperty, m as filterBaseProps, mn as FLOW_STYLES, mt as useStyles, n as CacheStatus, nn as TastyExtensionConfig, nt as okhslPlugin, o as InspectResult, on as Tokens, ot as useCounterStyle, p as color, pn as DIMENSION_STYLES, pt as UseStylesResult, q as FONT_CHUNK_STYLES, qt as InnerStyleProps, r as ChunkBreakdown, rn as TastyThemeNames, rt as getDisplayName, s as Summary, sn as BASE_STYLES, st as useFontFace, t as CSSOptions, tn as TastyCustomProps, tt as okhslFunction, u as resolveRecipes, un as BLOCK_STYLES, ut as useKeyframes, v as destroy, vn as TEXT_STYLES, vt as ModPropDef, w as getRawCSSText, wt as SubElementDefinition, x as gc, xt as ResolveModPropDef, y as fontFace, yn as DEFAULT_NAME_PREFIX, yt as ModPropsInput, z as styleHandlers, zt as BlockInnerStyleProps } from "./index-BAAbdfRs.js";
|
|
4
|
+
import { t as mergeStyles } from "./merge-styles-NEvqayL_.js";
|
|
5
|
+
export { APPEARANCE_CHUNK_STYLES, type AllBaseProps, type AllBasePropsWithMods, type AnyStyleHandler, type AtRuleContext, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, type BaseProps, type BasePropsWithoutChildren, type BaseStyleProps, type BlockInnerStyleProps, type BlockOuterStyleProps, type BlockStyleProps, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, type CSSMap, CSSOptions, type CSSProperties, CUSTOM_UNITS, type CacheMetrics, CacheStatus, ChunkBreakdown, type ChunkInfo, type ChunkName, ChunkSheetRegistry, type ColorSpace, type ColorStyleProps, type ComputeStylesOptions, type ComputeStylesResult, type ConditionNode, type ConfigTokenValue, type ConfigTokens, type ContainerStyleProps, type CounterStyleDescriptors, DEFAULT_NAME_PREFIX, DEFAULT_ZERO_NAME_PREFIX, DIMENSION_CHUNK_STYLES, DIMENSION_STYLES, DIRECTIONS, DISPLAY_CHUNK_STYLES, DebugChunkInfo, DebugOptions, type DimensionStyleProps, type DisposeFunction, Element, type ElementsDefinition, type ExtraBaseStyleProps, FLOW_STYLES, FONT_CHUNK_STYLES, type FlowStyleProps, type FontFaceDescriptors, type FontFaceInput, type FunctionDefinition, type FunctionParameter, type FunctionsConfig, type GCConfig, type GCOptions, INNER_STYLES, type InjectResult, type InjectionMode, type InnerStyleProps, InspectResult, type KeyframesCacheEntry, type KeyframesInfo, type KeyframesResult, type KeyframesSteps, LAYOUT_CHUNK_STYLES, type ModPropDef, type ModPropsInput, type ModValue, type Mods, type NoType, type NotSelector, OUTER_STYLES, type OuterStyleProps, POSITION_CHUNK_STYLES, POSITION_STYLES, type ParseFunction, type ParseStateKeyOptions, type ParsedAdvancedState, type ParsedColor, type ParserOptions, type PositionStyleProps, type ProcessedStyle, type PropHandler, type PropHandlerDefinition, type PropHandlerProps, type PropertyDefinition, type PropertyOptions, type RawCSSResult, type RawStyleHandler, type RecipeStyles, type RenderResult, type ResolveAsProps, type ResolveModPropDef, type ResolveModProps, type ResolveTokenProps, type ResolvedStyleValue, type RootRegistry, type RuleInfo, STYLE_TO_CHUNK, type Selector, type SheetInfo, SheetManager, type ShortGridStyles, type StateParserContext, type StyleDetails, type StyleDetailsPart, type StyleHandler, type StyleHandlerDefinition, type StyleHandlerProps, type StyleHandlerResult, StyleInjector, type StyleInjectorConfig, type StyleMap, StyleParser, type StylePropValue, type StyleResult, type StyleRule, type StyleUsage, type StyleValue, type StyleValueStateMap, type Styles, type StylesInterface, type StylesWithoutSelectors, type SubElementDefinition, type SubElementProps, type SuffixForSelector, Summary, TEXT_STYLES, type TagName, type TastyBaseStylePropNames, type TastyComponentPropsWithDefaults, type TastyConfig, type TastyCustomProps, type TastyElementOptions, type TastyElementProps, type TastyExtensionConfig, type TastyNamedColors, type TastyPlugin, type TastyPluginFactory, type TastyPolymorphicComponent, type TastyPresetNames, type TastyProps, type TastyThemeNames, type TextStyleProps, type TokenPropsInput, type TokenValue, type Tokens, TypographyPreset, TypographyTokenValue, type UnitHandler, type UseFunctionOptions, type UsePropertyOptions, type UseStylesResult, type VariantMap, type WithVariant, categorizeStyleKeys, chunkSheetRegistry, cleanup, color, computeStyles, configure, counterStyle, createColorFunc, createInjector, createStateParserContext, defineHandler, destroy, dotize, filterBaseProps, filterMods, fontFace, func, gc, generateTypographyTokens, getCSSText, getCSSTextForNode, getConfig, getDisplayName, getGlobalCounterStyles, getGlobalFontFaces, getGlobalFunctions, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getNamePrefix, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunction, okhslPlugin, okhstFunction, okhstPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resolveFunctionColor, resolveRecipes, setGlobalPredefinedStates, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useFunction, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles };
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { $ as
|
|
2
|
-
import {
|
|
3
|
-
import { A as property,
|
|
4
|
-
import { n as formatPropertyCSS } from "./format-rules-
|
|
5
|
-
import { t as mergeStyles } from "./merge-styles
|
|
6
|
-
import { t as resolveRecipes } from "./resolve-recipes-
|
|
1
|
+
import { $ as SheetManager, $t as getNamedColorHex, A as FLOW_STYLES, At as registerFunctionPolyfill, B as createStateParserContext, Bt as stringifyStyles, C as BASE_STYLES, Ct as LAYOUT_CHUNK_STYLES, D as COLOR_STYLES, Dt as formatFunctionRule, E as BLOCK_STYLES, Ft as getGlobalParser, G as StyleInjector, Gt as createColorFunc, Ht as okhstPlugin, I as isSelector, It as getGlobalPredefinedTokens, L as renderStyles, Lt as normalizeColorTokenValue, M as OUTER_STYLES, Mt as CUSTOM_UNITS, N as POSITION_STYLES, Nt as DIRECTIONS, O as CONTAINER_STYLES, P as TEXT_STYLES, Pt as filterMods, R as parseStateKey, Rt as parseColor, S as baseStylePropsRegistry, St as FONT_CHUNK_STYLES, T as BLOCK_OUTER_STYLES, Tt as STYLE_TO_CHUNK, U as getGlobalPredefinedStates, Ut as okhslFunction, Vt as okhstFunction, W as setGlobalPredefinedStates, Wt as okhslPlugin, X as fontFaceContentHash, Z as formatFontFaceRule, _ as isFunctionsPolyfillEnabled, _t as propHandlerRegistry, a as getGlobalCounterStyles, at as DEFAULT_NAME_PREFIX, b as resetConfig, bt as DIMENSION_CHUNK_STYLES, c as getGlobalInjector, ct as makeCounterStyleName, en as getRgbValuesFromRgbaString, f as getNamePrefix, ft as hashString, g as isConfigLocked, h as hasStylesGenerated, in as resolveFunctionColor, j as INNER_STYLES, k as DIMENSION_STYLES, kt as parseFunctionName, l as getGlobalKeyframes, lt as makeKeyframeName, m as hasGlobalRecipes, n as getConfig, nn as hslToRgbValues, nt as styleHandlers, o as getGlobalFontFaces, ot as DEFAULT_ZERO_NAME_PREFIX, p as hasGlobalKeyframes, q as formatCounterStyleRule, qt as StyleParser, rn as strToRgb, s as getGlobalFunctions, t as configure, tn as hexToRgb, tt as defineHandler, u as getGlobalRecipes, v as isTestEnvironment, vt as APPEARANCE_CHUNK_STYLES, w as BLOCK_INNER_STYLES, wt as POSITION_CHUNK_STYLES, x as generateTypographyTokens, xt as DISPLAY_CHUNK_STYLES, yt as CHUNK_NAMES, zt as parseStyle } from "./config-CCcE_tqx.js";
|
|
2
|
+
import { l as categorizeStyleKeys } from "./keyframes-B8M1FmtE.js";
|
|
3
|
+
import { A as property, C as getRawCSSText, D as injector, E as injectRawCSS, M as ChunkSheetRegistry, N as chunkSheetRegistry, O as isPropertyDefined, S as getCSSTextForNode, T as injectGlobal, _ as destroy, a as color, b as gc, c as hasKeys, d as collectAutoInferredPropertiesRSC, f as getStyleTarget, g as createInjector, h as counterStyle, i as _modAttrs, j as touch, k as keyframes, l as formatKeyframesCSS, m as cleanup, n as processTokens, o as filterBaseProps, p as pushRSCCSS, r as dotize, s as computeStyles, t as tastyDebug, u as collectAutoInferredProperties, v as fontFace, w as inject, x as getCSSText, y as func } from "./core-B5d0IPi2.js";
|
|
4
|
+
import { n as formatPropertyCSS } from "./format-rules-BbKDjsfO.js";
|
|
5
|
+
import { t as mergeStyles } from "./merge-styles--1zOSFlS.js";
|
|
6
|
+
import { t as resolveRecipes } from "./resolve-recipes-Caix5NnH.js";
|
|
7
7
|
import { t as getTastySSRContext } from "./context-CA8YKeMn.js";
|
|
8
8
|
import { t as formatGlobalRules } from "./format-global-rules-DklyaXv-.js";
|
|
9
9
|
import { Fragment, createElement, forwardRef, useContext } from "react";
|
|
@@ -106,7 +106,7 @@ function tasty(Component, options) {
|
|
|
106
106
|
return tastyElement(Component);
|
|
107
107
|
}
|
|
108
108
|
function tastyWrap(Component, options) {
|
|
109
|
-
const { as: extendTag, element: extendElement, ...defaultProps } = options ?? {};
|
|
109
|
+
const { as: extendTag, element: extendElement, styleProps: _styleProps, modProps: _modProps, tokenProps: _tokenProps, variants: _variants, elements: _elements, ...defaultProps } = options ?? {};
|
|
110
110
|
const propsWithStyles = ["styles"].concat(Object.keys(defaultProps).filter((prop) => prop.endsWith("Styles")));
|
|
111
111
|
const _WrappedComponent = forwardRef((props, ref) => {
|
|
112
112
|
const { as, element, ...restProps } = props;
|
|
@@ -154,14 +154,22 @@ function tastyElement(tastyOptions) {
|
|
|
154
154
|
if (!variantStylesMap["default"]) variantStylesMap["default"] = defaultStyles;
|
|
155
155
|
}
|
|
156
156
|
const { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps ?? {};
|
|
157
|
-
const
|
|
157
|
+
const ownPropsToCheck = styleProps ? styleProps.concat(BASE_STYLES) : BASE_STYLES;
|
|
158
|
+
let propsToCheck = ownPropsToCheck;
|
|
159
|
+
let propsToCheckVersion = -1;
|
|
158
160
|
const modPropsKeys = modPropsDef ? Array.isArray(modPropsDef) ? modPropsDef : Object.keys(modPropsDef) : void 0;
|
|
159
161
|
const tokenPropsMapping = tokenPropsDef ? buildTokenPropsMapping(tokenPropsDef) : void 0;
|
|
160
162
|
const classNameCache = /* @__PURE__ */ new Map();
|
|
161
|
-
const _TastyComponent = forwardRef((
|
|
162
|
-
const
|
|
163
|
+
const _TastyComponent = forwardRef((incomingProps, ref) => {
|
|
164
|
+
const applyPropHandlers = propHandlerRegistry.apply;
|
|
165
|
+
const { as, styles: rawStyles, variant, mods, element, qa, qaVal, className: userClassName, tokens, style, theme, ...otherProps } = applyPropHandlers ? applyPropHandlers(incomingProps) : incomingProps;
|
|
163
166
|
let styles = rawStyles;
|
|
164
167
|
let propStyles = null;
|
|
168
|
+
if (propsToCheckVersion !== baseStylePropsRegistry.version) {
|
|
169
|
+
const promoted = baseStylePropsRegistry.list;
|
|
170
|
+
propsToCheck = promoted.length === 0 ? ownPropsToCheck : ownPropsToCheck.concat(promoted);
|
|
171
|
+
propsToCheckVersion = baseStylePropsRegistry.version;
|
|
172
|
+
}
|
|
165
173
|
for (const prop of propsToCheck) {
|
|
166
174
|
const key = prop;
|
|
167
175
|
if (key in otherProps) {
|
|
@@ -228,6 +236,7 @@ function tastyElement(tastyOptions) {
|
|
|
228
236
|
"data-element": element || defaultElement,
|
|
229
237
|
"data-qa": qa || defaultQa,
|
|
230
238
|
"data-qaval": qaVal || defaultQaVal,
|
|
239
|
+
"data-theme": theme,
|
|
231
240
|
...otherDefaultProps,
|
|
232
241
|
...modDataAttrs || {},
|
|
233
242
|
...otherProps,
|
|
@@ -236,6 +245,7 @@ function tastyElement(tastyOptions) {
|
|
|
236
245
|
ref
|
|
237
246
|
};
|
|
238
247
|
handleIsProperties(elementProps);
|
|
248
|
+
if (elementProps["data-theme"] === void 0) delete elementProps["data-theme"];
|
|
239
249
|
const el = createElement(as ?? originalAs, elementProps);
|
|
240
250
|
if (stylesResult.css) {
|
|
241
251
|
const nonce = getConfig().nonce;
|
|
@@ -798,6 +808,60 @@ function useCounterStyle(descriptors, options) {
|
|
|
798
808
|
return name;
|
|
799
809
|
}
|
|
800
810
|
//#endregion
|
|
801
|
-
|
|
811
|
+
//#region src/hooks/useFunction.ts
|
|
812
|
+
/**
|
|
813
|
+
* Register a CSS @function (custom function).
|
|
814
|
+
*
|
|
815
|
+
* @function rules are global and persistent once defined. The hook ensures the
|
|
816
|
+
* function is only registered once per root (deduplicated by function name).
|
|
817
|
+
*
|
|
818
|
+
* Accepts tasty token syntax for the function name:
|
|
819
|
+
* - `$$name` → defines `--name` (matches the call site `$$name(...)`)
|
|
820
|
+
* - `$name` / `--name` → also accepted
|
|
821
|
+
*
|
|
822
|
+
* Works in all environments: client, SSR with collector, and React Server Components.
|
|
823
|
+
*
|
|
824
|
+
* @param name - The function name token (`$$name`, `$name`, or `--name`)
|
|
825
|
+
* @param definition - Function definition (args, returns, result, local vars)
|
|
826
|
+
*
|
|
827
|
+
* Call the function through the Tasty DSL, not a raw `style` prop: an inline
|
|
828
|
+
* `style` value reaches the browser unparsed, so the `$$name(...)` sugar is never
|
|
829
|
+
* expanded and `polyfills.functions` cannot rewrite it either.
|
|
830
|
+
*
|
|
831
|
+
* @example
|
|
832
|
+
* ```tsx
|
|
833
|
+
* const Box = tasty({ styles: { marginTop: '$$negative(10px)' } });
|
|
834
|
+
*
|
|
835
|
+
* function Layout() {
|
|
836
|
+
* useFunction('$$negative', { args: ['$value'], result: '(-1 * $value)' });
|
|
837
|
+
* return <Box />;
|
|
838
|
+
* }
|
|
839
|
+
* ```
|
|
840
|
+
*/
|
|
841
|
+
function useFunction(name, definition, options) {
|
|
842
|
+
if (!name) {
|
|
843
|
+
console.warn(`[Tasty] useFunction: function name is required`);
|
|
844
|
+
return;
|
|
845
|
+
}
|
|
846
|
+
if (isFunctionsPolyfillEnabled()) {
|
|
847
|
+
registerFunctionPolyfill(name, definition);
|
|
848
|
+
return;
|
|
849
|
+
}
|
|
850
|
+
const target = getStyleTarget();
|
|
851
|
+
if (target.mode === "ssr") {
|
|
852
|
+
target.collector.collectInternals();
|
|
853
|
+
const css = formatFunctionRule(name, definition);
|
|
854
|
+
if (css) target.collector.collectFunction(parseFunctionName(name), css);
|
|
855
|
+
return;
|
|
856
|
+
}
|
|
857
|
+
if (target.mode === "rsc") {
|
|
858
|
+
const css = formatFunctionRule(name, definition);
|
|
859
|
+
if (css) pushRSCCSS(target.cache, `__func:${parseFunctionName(name)}`, css);
|
|
860
|
+
return;
|
|
861
|
+
}
|
|
862
|
+
getGlobalInjector().func(name, definition, { root: options?.root });
|
|
863
|
+
}
|
|
864
|
+
//#endregion
|
|
865
|
+
export { APPEARANCE_CHUNK_STYLES, BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, CHUNK_NAMES, COLOR_STYLES, CONTAINER_STYLES, CUSTOM_UNITS, ChunkSheetRegistry, DEFAULT_NAME_PREFIX, DEFAULT_ZERO_NAME_PREFIX, DIMENSION_CHUNK_STYLES, DIMENSION_STYLES, DIRECTIONS, DISPLAY_CHUNK_STYLES, Element, FLOW_STYLES, FONT_CHUNK_STYLES, INNER_STYLES, LAYOUT_CHUNK_STYLES, OUTER_STYLES, POSITION_CHUNK_STYLES, POSITION_STYLES, STYLE_TO_CHUNK, SheetManager, StyleInjector, StyleParser, TEXT_STYLES, categorizeStyleKeys, chunkSheetRegistry, cleanup, color, computeStyles, configure, counterStyle, createColorFunc, createInjector, createStateParserContext, defineHandler, destroy, dotize, filterBaseProps, filterMods, fontFace, func, gc, generateTypographyTokens, getCSSText, getCSSTextForNode, getConfig, getDisplayName, getGlobalCounterStyles, getGlobalFontFaces, getGlobalFunctions, getGlobalKeyframes, getGlobalParser, getGlobalPredefinedStates, getGlobalPredefinedTokens, getGlobalRecipes, getNamePrefix, getNamedColorHex, getRawCSSText, getRgbValuesFromRgbaString, hasGlobalKeyframes, hasGlobalRecipes, hasStylesGenerated, hexToRgb, hslToRgbValues, inject, injectGlobal, injectRawCSS, injector, isConfigLocked, isPropertyDefined, isSelector, isTestEnvironment, keyframes, mergeStyles, _modAttrs as modAttrs, normalizeColorTokenValue, okhslFunction, okhslPlugin, okhstFunction, okhstPlugin, parseColor, parseStateKey, parseStyle, processTokens, property, renderStyles, resetConfig, resolveFunctionColor, resolveRecipes, setGlobalPredefinedStates, strToRgb, stringifyStyles, styleHandlers, tasty, tastyDebug, touch, useCounterStyle, useFontFace, useFunction, useGlobalStyles, useKeyframes, useProperty, useRawCSS, useStyles };
|
|
802
866
|
|
|
803
867
|
//# sourceMappingURL=index.js.map
|