@barocss/kit 0.8.2 → 0.10.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 +2 -0
- package/dist/index.cjs +434 -404
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +676 -677
- package/dist/index.d.ts +676 -677
- package/dist/index.js +433 -405
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -289,7 +289,15 @@ export declare type AstNode = {
|
|
|
289
289
|
|
|
290
290
|
export declare type FunctionalUtilityExtra = {
|
|
291
291
|
opacity?: string;
|
|
292
|
+
/** The theme key that matched, set when it is a colour key (or the utility lists no `colors` namespace). */
|
|
292
293
|
realThemeValue?: string;
|
|
294
|
+
/**
|
|
295
|
+
* #338: the theme namespace that resolved the key and the key itself. On a root shared by colours and another
|
|
296
|
+
* namespace (`border-*`: colors + borderWidth), a key from the other namespace leaves `realThemeValue` unset so the
|
|
297
|
+
* colour branch does not claim it; the handler dispatches on `themeNamespace` instead.
|
|
298
|
+
*/
|
|
299
|
+
themeNamespace?: string;
|
|
300
|
+
themeKey?: string;
|
|
293
301
|
};
|
|
294
302
|
|
|
295
303
|
export declare type FunctionalUtilityOptions = {
|
|
@@ -491,755 +499,746 @@ export declare type AstNode = {
|
|
|
491
499
|
priority?: number;
|
|
492
500
|
};
|
|
493
501
|
|
|
502
|
+
export declare function generateCss(classList: string, ctx: Context, opts?: {
|
|
503
|
+
minify?: boolean;
|
|
504
|
+
dedup?: boolean;
|
|
505
|
+
}): string;
|
|
506
|
+
|
|
494
507
|
/**
|
|
495
|
-
*
|
|
496
|
-
* Takes multiple classNames and generates CSS for each, joining them.
|
|
497
|
-
* - Input: classList(string), Context, options
|
|
498
|
-
* - Output: string (result of joining multiple CSS blocks)
|
|
499
|
-
* - Processes internally parseClassToAst → optimizeAst → astToCss in sequence
|
|
500
|
-
* - Supports options like dedup, minify
|
|
508
|
+
* Generates CSS from a list of BaroJsonInput objects.
|
|
501
509
|
*
|
|
502
|
-
* @param
|
|
510
|
+
* @param inputs Array of BaroJsonInput
|
|
503
511
|
* @param ctx Context
|
|
504
|
-
* @param opts
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
512
|
+
* @param opts Options (minify, etc.)
|
|
513
|
+
* @returns CSS string
|
|
514
|
+
*/
|
|
515
|
+
export declare function generateCssFromJson(inputs: BaroJsonInput[], ctx: Context, opts?: {
|
|
516
|
+
minify?: boolean;
|
|
517
|
+
}): string;
|
|
518
|
+
|
|
519
|
+
/**
|
|
520
|
+
* Returns an array of optimized results for multiple class names with dedup/filter.
|
|
521
|
+
* - Each object: { cls, ast, css }
|
|
522
|
+
* - Supports minify, dedup options
|
|
523
|
+
* - Applies astToCss(cleanAst, cls, opts) per class
|
|
524
|
+
* @param classList string (space-separated)
|
|
525
|
+
* @param ctx Context
|
|
526
|
+
* @param opts { minify?: boolean; dedup?: boolean }
|
|
527
|
+
* @returns Array<{ cls: string; ast: AstNode[]; css: string }>
|
|
509
528
|
*/
|
|
510
|
-
export declare function
|
|
529
|
+
export declare function generateCssRules(classList: string, ctx: Context, opts?: {
|
|
511
530
|
minify?: boolean;
|
|
512
531
|
dedup?: boolean;
|
|
513
|
-
}):
|
|
532
|
+
}): Array<GenerateCssRulesResult>;
|
|
533
|
+
|
|
534
|
+
export declare type GenerateCssRulesResult = {
|
|
535
|
+
cls: string;
|
|
536
|
+
ast: AstNode[];
|
|
537
|
+
css: string;
|
|
538
|
+
cssList: string[];
|
|
539
|
+
rootCss: string;
|
|
540
|
+
rootCssList: string[];
|
|
541
|
+
};
|
|
542
|
+
|
|
543
|
+
/** Read AST cache statistics for one context, or the legacy global cache. */
|
|
544
|
+
export declare function getAstCacheStats(ctx?: Context): {
|
|
545
|
+
size: number;
|
|
546
|
+
maxSize: number;
|
|
547
|
+
hitRate: number;
|
|
548
|
+
};
|
|
549
|
+
|
|
550
|
+
export declare function getModifier(ctx?: Context): ModifierRegistration[];
|
|
551
|
+
|
|
552
|
+
export declare function getPreflightCSS(level?: PreflightLevel): string;
|
|
553
|
+
|
|
554
|
+
export declare function getUtility(ctx?: Context): UtilityRegistration[];
|
|
514
555
|
|
|
515
556
|
/**
|
|
516
|
-
*
|
|
517
|
-
*
|
|
518
|
-
*
|
|
519
|
-
* @param ctx Context
|
|
520
|
-
* @param opts Options (minify, etc.)
|
|
521
|
-
* @returns CSS string
|
|
557
|
+
* #273: true when an emitted selector or at-rule prelude contains a comment opener or closer outside a CSS escape.
|
|
558
|
+
* Backslash-escape pairs are skipped, so an escaped `\/` or `\*` from a class name never counts. Used by the
|
|
559
|
+
* serializer on the final, composed string, where adjacent pieces that were each safe alone can join into one.
|
|
522
560
|
*/
|
|
523
|
-
export declare function
|
|
524
|
-
|
|
525
|
-
|
|
561
|
+
export declare function hasCommentDelimiter(text: string): boolean;
|
|
562
|
+
|
|
563
|
+
/** #248: a comment opener or closer anywhere in a variant (quoted or not) could leave a comment unclosed in the output. */
|
|
564
|
+
export declare function hasCommentToken(value: string): boolean;
|
|
526
565
|
|
|
527
566
|
/**
|
|
528
|
-
*
|
|
529
|
-
*
|
|
530
|
-
*
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
* @param ctx Context
|
|
534
|
-
* @param opts { minify?: boolean; dedup?: boolean }
|
|
535
|
-
* @returns Array<{ cls: string; ast: AstNode[]; css: string }>
|
|
536
|
-
*/
|
|
537
|
-
export declare function generateCssRules(classList: string, ctx: Context, opts?: {
|
|
538
|
-
minify?: boolean;
|
|
539
|
-
dedup?: boolean;
|
|
540
|
-
}): Array<GenerateCssRulesResult>;
|
|
541
|
-
|
|
542
|
-
export declare type GenerateCssRulesResult = {
|
|
543
|
-
cls: string;
|
|
544
|
-
ast: AstNode[];
|
|
545
|
-
css: string;
|
|
546
|
-
cssList: string[];
|
|
547
|
-
rootCss: string;
|
|
548
|
-
rootCssList: string[];
|
|
549
|
-
};
|
|
567
|
+
* #323: true when emitted text contains a markup end-tag opener (less-than then slash). Generated CSS can be
|
|
568
|
+
* placed inside an HTML style element, where that sequence could end the element early. CSS escapes in the
|
|
569
|
+
* output never form it, and a lone less-than (range media queries) stays allowed.
|
|
570
|
+
*/
|
|
571
|
+
export declare function hasHtmlEndTagOpener(text: string): boolean;
|
|
550
572
|
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
maxSize: number;
|
|
555
|
-
hitRate: number;
|
|
556
|
-
};
|
|
573
|
+
export declare type HasItems = {
|
|
574
|
+
items?: AstNode[];
|
|
575
|
+
};
|
|
557
576
|
|
|
558
|
-
|
|
577
|
+
export declare type HasName = {
|
|
578
|
+
name?: string;
|
|
579
|
+
};
|
|
559
580
|
|
|
560
|
-
|
|
581
|
+
export declare type HasNodes = {
|
|
582
|
+
nodes?: AstNode[];
|
|
583
|
+
};
|
|
561
584
|
|
|
562
|
-
|
|
585
|
+
export declare type HasParams = {
|
|
586
|
+
params?: string;
|
|
587
|
+
};
|
|
563
588
|
|
|
564
|
-
|
|
565
|
-
* #273: true when an emitted selector or at-rule prelude contains a comment opener or closer outside a CSS escape.
|
|
566
|
-
* Backslash-escape pairs are skipped, so an escaped `\/` or `\*` from a class name never counts. Used by the
|
|
567
|
-
* serializer on the final, composed string, where adjacent pieces that were each safe alone can join into one.
|
|
568
|
-
*/
|
|
569
|
-
export declare function hasCommentDelimiter(text: string): boolean;
|
|
589
|
+
export declare function hasPreset(themeObj: Theme, category: string, preset: string): boolean;
|
|
570
590
|
|
|
571
|
-
|
|
572
|
-
|
|
591
|
+
export declare type HasProp = {
|
|
592
|
+
prop?: string;
|
|
593
|
+
};
|
|
573
594
|
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
* output never form it, and a lone less-than (range media queries) stays allowed.
|
|
578
|
-
*/
|
|
579
|
-
export declare function hasHtmlEndTagOpener(text: string): boolean;
|
|
595
|
+
export declare type HasSelector = {
|
|
596
|
+
selector?: string;
|
|
597
|
+
};
|
|
580
598
|
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
599
|
+
export declare type HasSource = {
|
|
600
|
+
source?: string;
|
|
601
|
+
};
|
|
584
602
|
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
603
|
+
export declare type HasText = {
|
|
604
|
+
text?: string;
|
|
605
|
+
};
|
|
588
606
|
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
607
|
+
export declare type HasValue = {
|
|
608
|
+
value?: string | [string, string][];
|
|
609
|
+
};
|
|
592
610
|
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
611
|
+
/**
|
|
612
|
+
* Incremental parsing system for efficient class processing
|
|
613
|
+
*
|
|
614
|
+
* This class provides an optimized approach to CSS class processing by:
|
|
615
|
+
* - Tracking processed classes to avoid redundant work
|
|
616
|
+
* - Batching multiple class operations for better performance
|
|
617
|
+
* - Supporting both synchronous and asynchronous processing modes
|
|
618
|
+
*
|
|
619
|
+
* ## Usage Patterns
|
|
620
|
+
*
|
|
621
|
+
* ### Universal Usage (Node.js & Browser)
|
|
622
|
+
* ```typescript
|
|
623
|
+
* const parser = new IncrementalParser(ctx);
|
|
624
|
+
*
|
|
625
|
+
* // Process classes synchronously
|
|
626
|
+
* const results = parser.processClasses(['bg-blue-500', 'text-lg']);
|
|
627
|
+
*
|
|
628
|
+
* // Process single class
|
|
629
|
+
* const result = parser.processClass('bg-red-500');
|
|
630
|
+
*
|
|
631
|
+
* // Get statistics
|
|
632
|
+
* const stats = parser.getStats();
|
|
633
|
+
* ```
|
|
634
|
+
*
|
|
635
|
+
* ### Browser Integration
|
|
636
|
+
* ```typescript
|
|
637
|
+
* const parser = new IncrementalParser(ctx);
|
|
638
|
+
* const BrowserRuntime = new BrowserRuntime();
|
|
639
|
+
*
|
|
640
|
+
* // Process classes and manually inject CSS
|
|
641
|
+
* const results = parser.processClasses(['bg-blue-500', 'text-lg']);
|
|
642
|
+
* results.forEach(result => {
|
|
643
|
+
* if (result.css) {
|
|
644
|
+
* BrowserRuntime.insertRule(result.css);
|
|
645
|
+
* }
|
|
646
|
+
* });
|
|
647
|
+
*
|
|
648
|
+
* // Use with ChangeDetector for automatic DOM monitoring
|
|
649
|
+
* const detector = new ChangeDetector(parser);
|
|
650
|
+
* detector.observe(document.body, { scan: true });
|
|
651
|
+
* ```
|
|
652
|
+
*
|
|
653
|
+
* ## Architecture
|
|
654
|
+
*
|
|
655
|
+
* - **IncrementalParser**: Pure CSS processing (works in Node.js and browser)
|
|
656
|
+
* - **ChangeDetector**: Browser-only DOM monitoring (uses MutationObserver)
|
|
657
|
+
* - **BrowserRuntime**: Browser-only CSS injection (uses DOM APIs)
|
|
658
|
+
*/
|
|
659
|
+
export declare class IncrementalParser {
|
|
660
|
+
/** Set of class names that have already been processed to avoid duplicates */
|
|
661
|
+
private processedClasses;
|
|
662
|
+
/** BAROCSS context for theme and utility resolution */
|
|
663
|
+
private ctx;
|
|
664
|
+
/** Maximum number of classes to process in a single batch */
|
|
665
|
+
private batchSize;
|
|
666
|
+
/** Debounce delay for batch processing in milliseconds */
|
|
667
|
+
private debounceMs;
|
|
668
|
+
/** Set of classes waiting to be processed */
|
|
669
|
+
private pendingClasses;
|
|
670
|
+
/** Timer for debounced batch processing */
|
|
671
|
+
private batchTimer;
|
|
672
|
+
/**
|
|
673
|
+
* Create a new IncrementalParser instance
|
|
674
|
+
*
|
|
675
|
+
* @param ctx - BAROCSS context for theme and utility resolution
|
|
676
|
+
*/
|
|
677
|
+
constructor(ctx: Context);
|
|
678
|
+
/**
|
|
679
|
+
* Processes a single CSS class and generates its AST and CSS representation
|
|
680
|
+
*
|
|
681
|
+
* This method performs the complete pipeline for a single class:
|
|
682
|
+
* 1. Checks if the class has already been processed
|
|
683
|
+
* 2. Parses the class name to extract utility information
|
|
684
|
+
* 3. Generates the Abstract Syntax Tree (AST)
|
|
685
|
+
* 4. Converts the AST to CSS rules
|
|
686
|
+
* 5. Marks the class as processed to avoid future duplicates
|
|
687
|
+
*
|
|
688
|
+
* @param className - The CSS class name to process (e.g., 'bg-blue-500')
|
|
689
|
+
* @returns Object containing AST and CSS, or null if processing failed or class was already processed
|
|
690
|
+
*/
|
|
691
|
+
processClass(className: string): GenerateCssRulesResult | null;
|
|
692
|
+
/**
|
|
693
|
+
* Processes multiple CSS classes in batches for optimal performance
|
|
694
|
+
*
|
|
695
|
+
* This method handles multiple classes efficiently by:
|
|
696
|
+
* - Filtering out already processed classes to avoid redundant work
|
|
697
|
+
* - Processing classes in configurable batch sizes
|
|
698
|
+
* - Returning comprehensive results for each processed class
|
|
699
|
+
*
|
|
700
|
+
* @param classes - Array of CSS class names to process
|
|
701
|
+
* @returns Array of processing results, each containing className, AST, and CSS
|
|
702
|
+
*/
|
|
703
|
+
processClasses(classes: string[]): Array<GenerateCssRulesResult>;
|
|
704
|
+
/**
|
|
705
|
+
* Adds classes to the pending queue for asynchronous batch processing
|
|
706
|
+
*
|
|
707
|
+
* This method is used by the ChangeDetector when new classes are discovered
|
|
708
|
+
* in the DOM. Classes are queued and processed together to minimize
|
|
709
|
+
* performance impact from frequent DOM mutations.
|
|
710
|
+
*
|
|
711
|
+
* @param classes - Array of CSS class names to queue for processing
|
|
712
|
+
*/
|
|
713
|
+
addToPending(classes: string[]): void;
|
|
714
|
+
/**
|
|
715
|
+
* Schedule batch processing with debouncing
|
|
716
|
+
*
|
|
717
|
+
* This method uses setTimeout to debounce rapid class additions
|
|
718
|
+
* and process them in batches for better performance.
|
|
719
|
+
*/
|
|
720
|
+
private scheduleBatchProcessing;
|
|
721
|
+
/**
|
|
722
|
+
* Process pending classes from the queue
|
|
723
|
+
*
|
|
724
|
+
* This method is called by the debounced timer to process
|
|
725
|
+
* all classes that have been added to the pending queue.
|
|
726
|
+
*/
|
|
727
|
+
private processPendingClasses;
|
|
728
|
+
/**
|
|
729
|
+
* Core method that processes classes and marks them as processed
|
|
730
|
+
*
|
|
731
|
+
* This is the common processing logic used by both pending and synchronous
|
|
732
|
+
* processing methods. It:
|
|
733
|
+
* 1. Processes the provided classes using the batch processor
|
|
734
|
+
* 2. Marks classes as processed to prevent duplicates
|
|
735
|
+
*
|
|
736
|
+
* @param classes - Array of CSS class names to process
|
|
737
|
+
*/
|
|
738
|
+
private applyClasses;
|
|
739
|
+
/**
|
|
740
|
+
* Returns comprehensive statistics about the incremental parser's state
|
|
741
|
+
*
|
|
742
|
+
* This method provides detailed metrics including:
|
|
743
|
+
* - Number of processed classes
|
|
744
|
+
* - Number of pending classes
|
|
745
|
+
* - Cache statistics from AST and CSS caches
|
|
746
|
+
*
|
|
747
|
+
* @returns Object containing processing statistics and cache information
|
|
748
|
+
*/
|
|
749
|
+
getStats(): {
|
|
750
|
+
processedClasses: number;
|
|
751
|
+
pendingClasses: number;
|
|
752
|
+
cacheStats: {
|
|
753
|
+
ast: {
|
|
754
|
+
size: number;
|
|
755
|
+
maxSize: number;
|
|
756
|
+
hitRate: number;
|
|
757
|
+
};
|
|
758
|
+
css: {};
|
|
759
|
+
};
|
|
760
|
+
};
|
|
761
|
+
/**
|
|
762
|
+
* Clears all processed classes and pending queue
|
|
763
|
+
*
|
|
764
|
+
* This method is useful when the theme or configuration changes,
|
|
765
|
+
* requiring all classes to be reprocessed. It:
|
|
766
|
+
* - Clears the processed classes set
|
|
767
|
+
* - Clears the pending classes queue
|
|
768
|
+
* - Cancels any pending batch processing timer
|
|
769
|
+
*/
|
|
770
|
+
clearProcessed(): void;
|
|
771
|
+
/**
|
|
772
|
+
* Checks if a specific class has been processed
|
|
773
|
+
*
|
|
774
|
+
* @param cls - The CSS class name to check
|
|
775
|
+
* @returns True if the class has been processed, false otherwise
|
|
776
|
+
*/
|
|
777
|
+
isProcessed(cls: string): boolean;
|
|
778
|
+
/**
|
|
779
|
+
* Marks a class as processed to prevent future duplicate processing
|
|
780
|
+
*
|
|
781
|
+
* @param cls - The CSS class name to mark as processed
|
|
782
|
+
*/
|
|
783
|
+
markProcessed(cls: string): void;
|
|
784
|
+
/**
|
|
785
|
+
* Forgets that a class was processed, so a later request generates it again
|
|
786
|
+
* (used when the browser runtime reclaims an unused class's rules, #269).
|
|
787
|
+
*
|
|
788
|
+
* @param cls - The CSS class name to forget
|
|
789
|
+
*/
|
|
790
|
+
unmarkProcessed(cls: string): void;
|
|
791
|
+
/**
|
|
792
|
+
* Process classes synchronously and update BrowserRuntime cache
|
|
793
|
+
* This method is used by ChangeDetector for scan operations
|
|
794
|
+
*/
|
|
795
|
+
processClassesSync(classes: string[]): void;
|
|
796
|
+
/**
|
|
797
|
+
* Returns all currently processed class names
|
|
798
|
+
*
|
|
799
|
+
* This method is useful for debugging and monitoring purposes,
|
|
800
|
+
* providing visibility into which classes have been processed.
|
|
801
|
+
*
|
|
802
|
+
* @returns Array of all processed class names
|
|
803
|
+
*/
|
|
804
|
+
getProcessedClasses(): string[];
|
|
805
|
+
}
|
|
596
806
|
|
|
597
|
-
|
|
807
|
+
/**
|
|
808
|
+
* #332: true when an emitted selector or at-rule prelude has balanced, correctly nested `()`, `[]` and `{}` and
|
|
809
|
+
* no open quote. CSS escapes (backslash pairs) and quoted strings are skipped, so escaped brackets from a class
|
|
810
|
+
* name never count. Top-level commas are allowed (selector lists, `:is(a, b)`). Checked on the final composed
|
|
811
|
+
* string: an unbalanced prelude in concatenated CSS text would swallow the rules that follow it.
|
|
812
|
+
*/
|
|
813
|
+
export declare function isBalancedPrelude(text: string): boolean;
|
|
598
814
|
|
|
599
|
-
|
|
600
|
-
prop?: string;
|
|
601
|
-
};
|
|
815
|
+
export declare function isDebug(): boolean;
|
|
602
816
|
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
817
|
+
/**
|
|
818
|
+
* #221: isSafeVariantValue for a whole variant token, except that has-[…]/not-[…] (optionally group-/peer-) may
|
|
819
|
+
* carry a comma at the top level of their bracket value: those variants wrap the value in `:has()`/`:not()`.
|
|
820
|
+
* The value itself must still be balanced and free of `{`, `}` and `;`, so it cannot close the pseudo-class.
|
|
821
|
+
*/
|
|
822
|
+
export declare function isSafeVariantToken(value: string): boolean;
|
|
606
823
|
|
|
607
|
-
|
|
608
|
-
source?: string;
|
|
609
|
-
};
|
|
824
|
+
export declare function isSafeVariantValue(value: string, allowTopLevelComma?: boolean): boolean;
|
|
610
825
|
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
826
|
+
export declare function isStructureSafeValue(value: string): boolean;
|
|
827
|
+
|
|
828
|
+
/**
|
|
829
|
+
* #224: true when a utility value (or a whole utility token) cannot change the structure of the declaration block it
|
|
830
|
+
* is pasted into. Rejects, outside quotes: `{`, `}`, `;`, unbalanced or mismatched ()/[], and a quote left open.
|
|
831
|
+
* Commas are allowed (values are not selector lists), so this is isSafeVariantValue with top-level commas allowed.
|
|
832
|
+
*/
|
|
833
|
+
/**
|
|
834
|
+
* #332: a variant token's bracket groups must be well formed. An empty group (`[]`, as in an empty
|
|
835
|
+
* `has-[]`/`group-has-[]`/`[]` variant) has nothing to select and emits nothing. A token that opens with `[`
|
|
836
|
+
* is one arbitrary variant: its first group must close at the token's last character, so two adjacent groups
|
|
837
|
+
* are never read as a single variant whose inner text is unbalanced. CSS escapes and quoted strings are skipped.
|
|
838
|
+
*/
|
|
839
|
+
export declare function isWellFormedVariantBrackets(value: string): boolean;
|
|
840
|
+
|
|
841
|
+
/**
|
|
842
|
+
* Converts a single BaroJsonInput object into an AST tree.
|
|
843
|
+
* Bypasses string parsing and directly invokes utility/modifier handlers.
|
|
844
|
+
*
|
|
845
|
+
* @param input BaroJsonInput object
|
|
846
|
+
* @param ctx Context
|
|
847
|
+
* @returns AstNode[]
|
|
848
|
+
*/
|
|
849
|
+
export declare function jsonToAst(input: BaroJsonInput, ctx: Context): AstNode[];
|
|
614
850
|
|
|
615
|
-
|
|
616
|
-
|
|
851
|
+
/**
|
|
852
|
+
* mergeAstTreeList
|
|
853
|
+
* Takes a list of declPathToAst results (AstNode[][]), merges same at-rule(name, params) etc., and returns the final AST tree.
|
|
854
|
+
* - Input: AstNode[][] (nested ASTs of multiple decl-to-root paths)
|
|
855
|
+
* @returns AstNode[]
|
|
856
|
+
* - Usage: Used in optimizeAst for final AST merging/optimization
|
|
857
|
+
*
|
|
858
|
+
* @param astList AstNode[][]
|
|
859
|
+
* @returns AstNode[]
|
|
860
|
+
*/
|
|
861
|
+
export declare function mergeAstTreeList(astList: AstNode[][]): AstNode[];
|
|
862
|
+
|
|
863
|
+
export declare type ModifierRegistration = {
|
|
864
|
+
match: (mod: string, context: Context) => boolean;
|
|
865
|
+
modifySelector?: (params: {
|
|
866
|
+
selector: string;
|
|
867
|
+
fullClassName: string;
|
|
868
|
+
mod: ParsedModifier;
|
|
869
|
+
context: Context;
|
|
870
|
+
variantChain?: ParsedModifier[];
|
|
871
|
+
index?: number;
|
|
872
|
+
}) => string | ModifierSelector | ModifierSelector[] | null;
|
|
873
|
+
wrap?: (mod: ParsedModifier, context: Context) => AstNode[];
|
|
874
|
+
astHandler?: (ast: AstNode[], mod: ParsedModifier, context: Context, variantChain?: ParsedModifier[], index?: number) => AstNode[];
|
|
875
|
+
sort?: number;
|
|
876
|
+
description?: string;
|
|
877
|
+
source?: string;
|
|
878
|
+
/** Static variant name; lets the parser tell `placeholder-shown:` (variant) from a `placeholder-*` utility (#307). */
|
|
879
|
+
name?: string;
|
|
880
|
+
};
|
|
881
|
+
|
|
882
|
+
export declare const modifierRegistry: ModifierRegistration[];
|
|
883
|
+
|
|
884
|
+
export declare type ModifierSelector = {
|
|
885
|
+
selector: string;
|
|
886
|
+
flatten?: boolean;
|
|
887
|
+
wrappingType?: 'rule' | 'style-rule' | 'at-rule';
|
|
888
|
+
override?: boolean;
|
|
889
|
+
source?: string;
|
|
890
|
+
};
|
|
891
|
+
|
|
892
|
+
export declare function normalizeMathSpacing(value: string): string;
|
|
893
|
+
|
|
894
|
+
/**
|
|
895
|
+
* optimizeAst
|
|
896
|
+
* Merges/organizes AST generated by parseClassToAst into an optimized AST tree based on decl-to-root path.
|
|
897
|
+
* - Input: AstNode[] (result of parseClassToAst)
|
|
898
|
+
* - Output: Optimized AST tree (AstNode[])
|
|
899
|
+
* - Uses collectDeclPaths, declPathToAst, mergeAstTreeList internally
|
|
900
|
+
* - Reflects all variant wrapping structures (nesting, siblings, merging, etc.)
|
|
901
|
+
*
|
|
902
|
+
* @param ast AstNode[]
|
|
903
|
+
* @returns AstNode[]
|
|
904
|
+
*/
|
|
905
|
+
export declare function optimizeAst(ast: AstNode[]): AstNode[];
|
|
906
|
+
|
|
907
|
+
/**
|
|
908
|
+
* Parses a class name string into modifiers and utility using tokenization
|
|
909
|
+
* Supports both directions:
|
|
910
|
+
* - modifier:utility (traditional CSS)
|
|
911
|
+
* - utility:modifier (Master CSS style)
|
|
912
|
+
*
|
|
913
|
+
* Examples:
|
|
914
|
+
* - 'group-hover:sm:bg-[red]' → modifier:utility
|
|
915
|
+
* - 'bg-red-500:hover' → utility:modifier
|
|
916
|
+
* - 'text-[color:var(--foo)]' → utility only
|
|
917
|
+
*
|
|
918
|
+
* @param className e.g. 'group-hover:sm:bg-[red]', 'text-[color:var(--foo)]'
|
|
919
|
+
* @returns { modifiers, utility }
|
|
920
|
+
*/
|
|
921
|
+
export declare function parseClassName(className: string, ctx?: Context): {
|
|
922
|
+
modifiers: ParsedModifier[];
|
|
923
|
+
utility: ParsedUtility | null;
|
|
617
924
|
};
|
|
618
925
|
|
|
619
926
|
/**
|
|
620
|
-
*
|
|
621
|
-
*
|
|
622
|
-
*
|
|
623
|
-
* -
|
|
624
|
-
* -
|
|
625
|
-
* -
|
|
626
|
-
*
|
|
627
|
-
* ## Usage Patterns
|
|
628
|
-
*
|
|
629
|
-
* ### Universal Usage (Node.js & Browser)
|
|
630
|
-
* ```typescript
|
|
631
|
-
* const parser = new IncrementalParser(ctx);
|
|
632
|
-
*
|
|
633
|
-
* // Process classes synchronously
|
|
634
|
-
* const results = parser.processClasses(['bg-blue-500', 'text-lg']);
|
|
635
|
-
*
|
|
636
|
-
* // Process single class
|
|
637
|
-
* const result = parser.processClass('bg-red-500');
|
|
927
|
+
* parseClassToAst
|
|
928
|
+
* Parses className(including variant chain) to generate AST tree.
|
|
929
|
+
* - Input: className(string), Context
|
|
930
|
+
* - Output: AstNode[] (multiple roots possible for variant wrapping path)
|
|
931
|
+
* - Perfectly supports variant wrapping structure (Cartesian product, nesting, siblings, etc.)
|
|
932
|
+
* - Accumulates wrappers in wrappers and applies them from right to left.
|
|
933
|
+
* - Can return multiple root asts.
|
|
638
934
|
*
|
|
639
|
-
*
|
|
640
|
-
*
|
|
641
|
-
*
|
|
642
|
-
*
|
|
643
|
-
* ### Browser Integration
|
|
644
|
-
* ```typescript
|
|
645
|
-
* const parser = new IncrementalParser(ctx);
|
|
646
|
-
* const BrowserRuntime = new BrowserRuntime();
|
|
647
|
-
*
|
|
648
|
-
* // Process classes and manually inject CSS
|
|
649
|
-
* const results = parser.processClasses(['bg-blue-500', 'text-lg']);
|
|
650
|
-
* results.forEach(result => {
|
|
651
|
-
* if (result.css) {
|
|
652
|
-
* BrowserRuntime.insertRule(result.css);
|
|
653
|
-
* }
|
|
654
|
-
* });
|
|
655
|
-
*
|
|
656
|
-
* // Use with ChangeDetector for automatic DOM monitoring
|
|
657
|
-
* const detector = new ChangeDetector(parser);
|
|
658
|
-
* detector.observe(document.body, { scan: true });
|
|
659
|
-
* ```
|
|
660
|
-
*
|
|
661
|
-
* ## Architecture
|
|
935
|
+
* @param fullClassName string (e.g., 'sm:dark:hover:bg-red-500')
|
|
936
|
+
* @param ctx Context
|
|
937
|
+
* @returns AstNode[]
|
|
662
938
|
*
|
|
663
|
-
*
|
|
664
|
-
*
|
|
665
|
-
*
|
|
939
|
+
* @example
|
|
940
|
+
* const ast = parseClassToAst('sm:dark:hover:bg-red-500', ctx);
|
|
941
|
+
* // ast is an AST tree with sm, dark, hover variants nested
|
|
666
942
|
*/
|
|
667
|
-
export declare
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
* 1. Checks if the class has already been processed
|
|
691
|
-
* 2. Parses the class name to extract utility information
|
|
692
|
-
* 3. Generates the Abstract Syntax Tree (AST)
|
|
693
|
-
* 4. Converts the AST to CSS rules
|
|
694
|
-
* 5. Marks the class as processed to avoid future duplicates
|
|
695
|
-
*
|
|
696
|
-
* @param className - The CSS class name to process (e.g., 'bg-blue-500')
|
|
697
|
-
* @returns Object containing AST and CSS, or null if processing failed or class was already processed
|
|
698
|
-
*/
|
|
699
|
-
processClass(className: string): GenerateCssRulesResult | null;
|
|
700
|
-
/**
|
|
701
|
-
* Processes multiple CSS classes in batches for optimal performance
|
|
702
|
-
*
|
|
703
|
-
* This method handles multiple classes efficiently by:
|
|
704
|
-
* - Filtering out already processed classes to avoid redundant work
|
|
705
|
-
* - Processing classes in configurable batch sizes
|
|
706
|
-
* - Returning comprehensive results for each processed class
|
|
707
|
-
*
|
|
708
|
-
* @param classes - Array of CSS class names to process
|
|
709
|
-
* @returns Array of processing results, each containing className, AST, and CSS
|
|
710
|
-
*/
|
|
711
|
-
processClasses(classes: string[]): Array<GenerateCssRulesResult>;
|
|
712
|
-
/**
|
|
713
|
-
* Adds classes to the pending queue for asynchronous batch processing
|
|
714
|
-
*
|
|
715
|
-
* This method is used by the ChangeDetector when new classes are discovered
|
|
716
|
-
* in the DOM. Classes are queued and processed together to minimize
|
|
717
|
-
* performance impact from frequent DOM mutations.
|
|
718
|
-
*
|
|
719
|
-
* @param classes - Array of CSS class names to queue for processing
|
|
720
|
-
*/
|
|
721
|
-
addToPending(classes: string[]): void;
|
|
722
|
-
/**
|
|
723
|
-
* Schedule batch processing with debouncing
|
|
724
|
-
*
|
|
725
|
-
* This method uses setTimeout to debounce rapid class additions
|
|
726
|
-
* and process them in batches for better performance.
|
|
727
|
-
*/
|
|
728
|
-
private scheduleBatchProcessing;
|
|
729
|
-
/**
|
|
730
|
-
* Process pending classes from the queue
|
|
731
|
-
*
|
|
732
|
-
* This method is called by the debounced timer to process
|
|
733
|
-
* all classes that have been added to the pending queue.
|
|
734
|
-
*/
|
|
735
|
-
private processPendingClasses;
|
|
736
|
-
/**
|
|
737
|
-
* Core method that processes classes and marks them as processed
|
|
738
|
-
*
|
|
739
|
-
* This is the common processing logic used by both pending and synchronous
|
|
740
|
-
* processing methods. It:
|
|
741
|
-
* 1. Processes the provided classes using the batch processor
|
|
742
|
-
* 2. Marks classes as processed to prevent duplicates
|
|
743
|
-
*
|
|
744
|
-
* @param classes - Array of CSS class names to process
|
|
745
|
-
*/
|
|
746
|
-
private applyClasses;
|
|
747
|
-
/**
|
|
748
|
-
* Returns comprehensive statistics about the incremental parser's state
|
|
749
|
-
*
|
|
750
|
-
* This method provides detailed metrics including:
|
|
751
|
-
* - Number of processed classes
|
|
752
|
-
* - Number of pending classes
|
|
753
|
-
* - Cache statistics from AST and CSS caches
|
|
754
|
-
*
|
|
755
|
-
* @returns Object containing processing statistics and cache information
|
|
756
|
-
*/
|
|
757
|
-
getStats(): {
|
|
758
|
-
processedClasses: number;
|
|
759
|
-
pendingClasses: number;
|
|
760
|
-
cacheStats: {
|
|
761
|
-
ast: {
|
|
762
|
-
size: number;
|
|
763
|
-
maxSize: number;
|
|
764
|
-
hitRate: number;
|
|
765
|
-
};
|
|
766
|
-
css: {};
|
|
767
|
-
};
|
|
768
|
-
};
|
|
769
|
-
/**
|
|
770
|
-
* Clears all processed classes and pending queue
|
|
771
|
-
*
|
|
772
|
-
* This method is useful when the theme or configuration changes,
|
|
773
|
-
* requiring all classes to be reprocessed. It:
|
|
774
|
-
* - Clears the processed classes set
|
|
775
|
-
* - Clears the pending classes queue
|
|
776
|
-
* - Cancels any pending batch processing timer
|
|
777
|
-
*/
|
|
778
|
-
clearProcessed(): void;
|
|
779
|
-
/**
|
|
780
|
-
* Checks if a specific class has been processed
|
|
781
|
-
*
|
|
782
|
-
* @param cls - The CSS class name to check
|
|
783
|
-
* @returns True if the class has been processed, false otherwise
|
|
784
|
-
*/
|
|
785
|
-
isProcessed(cls: string): boolean;
|
|
786
|
-
/**
|
|
787
|
-
* Marks a class as processed to prevent future duplicate processing
|
|
788
|
-
*
|
|
789
|
-
* @param cls - The CSS class name to mark as processed
|
|
790
|
-
*/
|
|
791
|
-
markProcessed(cls: string): void;
|
|
792
|
-
/**
|
|
793
|
-
* Forgets that a class was processed, so a later request generates it again
|
|
794
|
-
* (used when the browser runtime reclaims an unused class's rules, #269).
|
|
795
|
-
*
|
|
796
|
-
* @param cls - The CSS class name to forget
|
|
797
|
-
*/
|
|
798
|
-
unmarkProcessed(cls: string): void;
|
|
799
|
-
/**
|
|
800
|
-
* Process classes synchronously and update BrowserRuntime cache
|
|
801
|
-
* This method is used by ChangeDetector for scan operations
|
|
802
|
-
*/
|
|
803
|
-
processClassesSync(classes: string[]): void;
|
|
804
|
-
/**
|
|
805
|
-
* Returns all currently processed class names
|
|
806
|
-
*
|
|
807
|
-
* This method is useful for debugging and monitoring purposes,
|
|
808
|
-
* providing visibility into which classes have been processed.
|
|
809
|
-
*
|
|
810
|
-
* @returns Array of all processed class names
|
|
811
|
-
*/
|
|
812
|
-
getProcessedClasses(): string[];
|
|
943
|
+
export declare function parseClassToAst(fullClassName: string, ctx: Context): AstNode[];
|
|
944
|
+
|
|
945
|
+
export declare interface ParsedModifier {
|
|
946
|
+
type: string;
|
|
947
|
+
value?: string;
|
|
948
|
+
negative?: boolean;
|
|
949
|
+
arbitrary?: boolean;
|
|
950
|
+
[key: string]: unknown;
|
|
951
|
+
}
|
|
952
|
+
|
|
953
|
+
export declare interface ParsedUtility {
|
|
954
|
+
category?: string;
|
|
955
|
+
prefix: string;
|
|
956
|
+
value?: string;
|
|
957
|
+
arbitrary?: boolean;
|
|
958
|
+
customProperty?: boolean;
|
|
959
|
+
negative?: boolean;
|
|
960
|
+
opacity?: string;
|
|
961
|
+
priority?: number;
|
|
962
|
+
important?: boolean;
|
|
963
|
+
/** Set for an arbitrary property class (`[prop:value]`); `value` holds the raw value. */
|
|
964
|
+
property?: string;
|
|
965
|
+
[key: string]: unknown;
|
|
813
966
|
}
|
|
814
967
|
|
|
815
968
|
/**
|
|
816
|
-
*
|
|
817
|
-
* no open quote. CSS escapes (backslash pairs) and quoted strings are skipped, so escaped brackets from a class
|
|
818
|
-
* name never count. Top-level commas are allowed (selector lists, `:is(a, b)`). Checked on the final composed
|
|
819
|
-
* string: an unbalanced prelude in concatenated CSS text would swallow the rules that follow it.
|
|
969
|
+
* Parse result cache management
|
|
820
970
|
*/
|
|
821
|
-
export declare
|
|
971
|
+
export declare class ParseResultCache {
|
|
972
|
+
private cache;
|
|
973
|
+
private maxSize;
|
|
974
|
+
set(key: string, result: {
|
|
975
|
+
modifiers: ParsedModifier[];
|
|
976
|
+
utility: ParsedUtility | null;
|
|
977
|
+
}): void;
|
|
978
|
+
get(key: string): {
|
|
979
|
+
modifiers: ParsedModifier[];
|
|
980
|
+
utility: ParsedUtility | null;
|
|
981
|
+
} | undefined;
|
|
982
|
+
has(key: string): boolean;
|
|
983
|
+
clear(): void;
|
|
984
|
+
getStats(): {
|
|
985
|
+
size: number;
|
|
986
|
+
maxSize: number;
|
|
987
|
+
hitRate: number;
|
|
988
|
+
};
|
|
989
|
+
}
|
|
822
990
|
|
|
823
|
-
export declare
|
|
991
|
+
export declare const parseResultCache: ParseResultCache;
|
|
824
992
|
|
|
825
993
|
/**
|
|
826
|
-
*
|
|
827
|
-
* carry a comma at the top level of their bracket value: those variants wrap the value in `:has()`/`:not()`.
|
|
828
|
-
* The value itself must still be balanced and free of `{`, `}` and `;`, so it cannot close the pseudo-class.
|
|
994
|
+
* decl-to-root path collection function (reused in normalizeAstOrder, etc.)
|
|
829
995
|
*/
|
|
830
|
-
export declare
|
|
996
|
+
export declare type PathNode = Partial<AstNode>;
|
|
831
997
|
|
|
832
|
-
|
|
998
|
+
declare type PreflightLevel = 'minimal' | 'standard' | 'full' | true | false;
|
|
833
999
|
|
|
834
|
-
export declare function
|
|
1000
|
+
export declare function property(name: string, initialValue?: string, syntax?: string, source?: string): AstNode;
|
|
1001
|
+
|
|
1002
|
+
export declare function raw(value: string, source?: string): AstNode;
|
|
1003
|
+
|
|
1004
|
+
export declare function registerModifier(modifier: ModifierRegistration, ctx?: Context): void;
|
|
1005
|
+
|
|
1006
|
+
export declare function registerUtility(util: UtilityRegistration, ctx?: Context): void;
|
|
1007
|
+
|
|
1008
|
+
export declare function resolveTheme(config: Config): Theme;
|
|
1009
|
+
|
|
1010
|
+
export declare function rootToCss(nodes: AstNode[], opts?: {
|
|
1011
|
+
minify?: boolean;
|
|
1012
|
+
}): string;
|
|
1013
|
+
|
|
1014
|
+
export declare function rule(selector: string, nodes: AstNode[], source?: string): AstNode;
|
|
835
1015
|
|
|
836
1016
|
/**
|
|
837
|
-
*
|
|
838
|
-
*
|
|
839
|
-
*
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
*
|
|
843
|
-
* `
|
|
844
|
-
*
|
|
845
|
-
*
|
|
1017
|
+
* Tailwind-compatible cascade order for runtime-inserted rules (#254); shared by @barocss/server (#267).
|
|
1018
|
+
*
|
|
1019
|
+
* The runtime discovers classes in DOM order, so without sorting `lg:px-8`
|
|
1020
|
+
* seen before `sm:px-6` would land earlier and lose at >= 1024px. Each rule
|
|
1021
|
+
* gets a sort key derived from its leading `@media` / `@container` preludes:
|
|
1022
|
+
*
|
|
1023
|
+
* 0 base, negated media (`not-md:` → `@media not (…)`, as Tailwind 4.3.3 orders them, #352),
|
|
1024
|
+
* state media (hover), motion/contrast, unknown
|
|
1025
|
+
* 1 max-* breakpoints (larger width first)
|
|
1026
|
+
* 2 min-* breakpoints (smaller width first)
|
|
1027
|
+
* 3 @max-* container queries (larger width first)
|
|
1028
|
+
* 4 @min-* container queries (smaller width first)
|
|
1029
|
+
* 5 orientation, dark (prefers-color-scheme), print, forced-colors
|
|
1030
|
+
*
|
|
1031
|
+
* Nested at-rules (e.g. `sm:dark:`) contribute one key pair per level, so
|
|
1032
|
+
* `sm:` < `sm:dark:` < `md:`. Equal keys keep discovery order.
|
|
846
1033
|
*/
|
|
847
|
-
export declare
|
|
1034
|
+
export declare type RuleKey = number[];
|
|
1035
|
+
|
|
1036
|
+
export declare function ruleSortKey(rule: string): RuleKey;
|
|
1037
|
+
|
|
1038
|
+
/** Internal hook for caches owned by contexts. */
|
|
1039
|
+
export declare function setContextCacheReset(reset: () => void): void;
|
|
1040
|
+
|
|
1041
|
+
export declare function setDebug(enabled: boolean): void;
|
|
848
1042
|
|
|
849
1043
|
/**
|
|
850
|
-
*
|
|
851
|
-
* Bypasses string parsing and directly invokes utility/modifier handlers.
|
|
1044
|
+
* staticModifier: A helper that registers a modifier name and an array of CSS selectors directly to the registry
|
|
852
1045
|
*
|
|
853
|
-
* @
|
|
854
|
-
*
|
|
855
|
-
*
|
|
1046
|
+
* @example
|
|
1047
|
+
* ```
|
|
1048
|
+
* staticModifier('disabled', ['&:disabled'], { source: 'pseudo' });
|
|
1049
|
+
* ```
|
|
1050
|
+
*
|
|
1051
|
+
* @param name The name of the modifier
|
|
1052
|
+
* @param selectors The selectors of the modifier
|
|
1053
|
+
* @param options The options of the modifier
|
|
1054
|
+
*
|
|
1055
|
+
* @returns {void}
|
|
856
1056
|
*/
|
|
857
|
-
export declare function
|
|
1057
|
+
export declare function staticModifier(name: string, selectors: string[], options?: any, ctx?: Context): void;
|
|
858
1058
|
|
|
859
1059
|
/**
|
|
860
|
-
*
|
|
861
|
-
* Takes a list of declPathToAst results (AstNode[][]), merges same at-rule(name, params) etc., and returns the final AST tree.
|
|
862
|
-
* - Input: AstNode[][] (nested ASTs of multiple decl-to-root paths)
|
|
863
|
-
* @returns AstNode[]
|
|
864
|
-
* - Usage: Used in optimizeAst for final AST merging/optimization
|
|
1060
|
+
* staticUtility: A helper that registers a utility name and an array of CSS declaration pairs directly to the registry
|
|
865
1061
|
*
|
|
866
|
-
* @
|
|
867
|
-
*
|
|
1062
|
+
* @example
|
|
1063
|
+
* ```
|
|
1064
|
+
* staticUtility('block', [['display', 'block']]);
|
|
1065
|
+
* staticUtility('hidden', [['display', 'none']]);
|
|
1066
|
+
* staticUtility('space-x-px', [
|
|
1067
|
+
* [
|
|
1068
|
+
* '& > :not([hidden]) ~ :not([hidden])', // selector
|
|
1069
|
+
* [
|
|
1070
|
+
* ['margin-inline-start', '1px'], // [prop, value]
|
|
1071
|
+
* ['margin-inline-end', '1px'], // [prop, value]
|
|
1072
|
+
* ],
|
|
1073
|
+
* ],
|
|
1074
|
+
* ]);
|
|
1075
|
+
* ```
|
|
1076
|
+
*
|
|
1077
|
+
* @param name The name of the utility
|
|
1078
|
+
* @param decls The declarations of the utility
|
|
1079
|
+
* @param opts The options of the utility
|
|
1080
|
+
*
|
|
1081
|
+
* @returns {void}
|
|
868
1082
|
*/
|
|
869
|
-
export declare function
|
|
870
|
-
|
|
871
|
-
export declare type ModifierRegistration = {
|
|
872
|
-
match: (mod: string, context: Context) => boolean;
|
|
873
|
-
modifySelector?: (params: {
|
|
874
|
-
selector: string;
|
|
875
|
-
fullClassName: string;
|
|
876
|
-
mod: ParsedModifier;
|
|
877
|
-
context: Context;
|
|
878
|
-
variantChain?: ParsedModifier[];
|
|
879
|
-
index?: number;
|
|
880
|
-
}) => string | ModifierSelector | ModifierSelector[];
|
|
881
|
-
wrap?: (mod: ParsedModifier, context: Context) => AstNode[];
|
|
882
|
-
astHandler?: (ast: AstNode[], mod: ParsedModifier, context: Context, variantChain?: ParsedModifier[], index?: number) => AstNode[];
|
|
883
|
-
sort?: number;
|
|
1083
|
+
export declare function staticUtility(name: string, decls: StaticUtilityValue[], opts?: {
|
|
884
1084
|
description?: string;
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
};
|
|
1085
|
+
category?: string;
|
|
1086
|
+
priority?: number;
|
|
1087
|
+
}, ctx?: Context): void;
|
|
889
1088
|
|
|
890
|
-
|
|
1089
|
+
declare type StaticUtilityValue = AstNode | [string, string] | [string, [string, string][]] | ((value: string) => AstNode);
|
|
891
1090
|
|
|
892
|
-
export declare
|
|
893
|
-
selector: string;
|
|
894
|
-
flatten?: boolean;
|
|
895
|
-
wrappingType?: 'rule' | 'style-rule' | 'at-rule';
|
|
896
|
-
override?: boolean;
|
|
897
|
-
source?: string;
|
|
898
|
-
};
|
|
1091
|
+
export declare function styleRule(selector: string, nodes: AstNode[], source?: string): AstNode;
|
|
899
1092
|
|
|
900
|
-
export declare
|
|
1093
|
+
export declare interface Theme {
|
|
1094
|
+
extend?: Theme;
|
|
1095
|
+
[namespace: string]: unknown;
|
|
1096
|
+
}
|
|
901
1097
|
|
|
902
|
-
|
|
903
|
-
* optimizeAst
|
|
904
|
-
* Merges/organizes AST generated by parseClassToAst into an optimized AST tree based on decl-to-root path.
|
|
905
|
-
* - Input: AstNode[] (result of parseClassToAst)
|
|
906
|
-
* - Output: Optimized AST tree (AstNode[])
|
|
907
|
-
* - Uses collectDeclPaths, declPathToAst, mergeAstTreeList internally
|
|
908
|
-
* - Reflects all variant wrapping structures (nesting, siblings, merging, etc.)
|
|
909
|
-
*
|
|
910
|
-
* @param ast AstNode[]
|
|
911
|
-
* @returns AstNode[]
|
|
912
|
-
*/
|
|
913
|
-
export declare function optimizeAst(ast: AstNode[]): AstNode[];
|
|
1098
|
+
export declare type ThemeGetter = (...path: (string | number)[]) => unknown;
|
|
914
1099
|
|
|
915
1100
|
/**
|
|
916
|
-
*
|
|
917
|
-
* Supports both directions:
|
|
918
|
-
* - modifier:utility (traditional CSS)
|
|
919
|
-
* - utility:modifier (Master CSS style)
|
|
1101
|
+
* Modern theme getter for BAROCSS
|
|
920
1102
|
*
|
|
921
|
-
*
|
|
922
|
-
*
|
|
923
|
-
*
|
|
924
|
-
*
|
|
1103
|
+
* - Supports category-level (first path segment) function values only.
|
|
1104
|
+
* - If the category (e.g., 'spacing', 'colors') is a function, it will be executed with the theme getter as argument.
|
|
1105
|
+
* - This allows dynamic theme extension and plugin-style patterns, e.g.:
|
|
1106
|
+
* spacing: (theme) => ({ ...theme('spacing'), '72': '18rem' })
|
|
1107
|
+
* - Leaf (property) functions are NOT supported and will be ignored (returns undefined).
|
|
1108
|
+
* - Infinite recursion is prevented: If the exact same path is being resolved recursively (directly or indirectly), undefined is returned for that call.
|
|
1109
|
+
* - Category-level functions can safely call theme('category.otherKey') for dynamic references.
|
|
1110
|
+
* - Only true recursion on the same path is blocked.
|
|
1111
|
+
* - All theme lookups (theme('category.key')) will always re-execute the category function if present, ensuring dynamic resolution.
|
|
925
1112
|
*
|
|
926
|
-
* @param
|
|
927
|
-
* @
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
}
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
* @param ctx Context
|
|
945
|
-
* @returns AstNode[]
|
|
946
|
-
*
|
|
947
|
-
* @example
|
|
948
|
-
* const ast = parseClassToAst('sm:dark:hover:bg-red-500', ctx);
|
|
949
|
-
* // ast is an AST tree with sm, dark, hover variants nested
|
|
950
|
-
*/
|
|
951
|
-
export declare function parseClassToAst(fullClassName: string, ctx: Context): AstNode[];
|
|
952
|
-
|
|
953
|
-
export declare interface ParsedModifier {
|
|
954
|
-
type: string;
|
|
955
|
-
value?: string;
|
|
956
|
-
negative?: boolean;
|
|
957
|
-
arbitrary?: boolean;
|
|
958
|
-
[key: string]: unknown;
|
|
959
|
-
}
|
|
960
|
-
|
|
961
|
-
export declare interface ParsedUtility {
|
|
962
|
-
category?: string;
|
|
963
|
-
prefix: string;
|
|
964
|
-
value?: string;
|
|
965
|
-
arbitrary?: boolean;
|
|
966
|
-
customProperty?: boolean;
|
|
967
|
-
negative?: boolean;
|
|
968
|
-
opacity?: string;
|
|
969
|
-
priority?: number;
|
|
970
|
-
important?: boolean;
|
|
971
|
-
/** Set for an arbitrary property class (`[prop:value]`); `value` holds the raw value. */
|
|
972
|
-
property?: string;
|
|
973
|
-
[key: string]: unknown;
|
|
974
|
-
}
|
|
975
|
-
|
|
976
|
-
/**
|
|
977
|
-
* Parse result cache management
|
|
978
|
-
*/
|
|
979
|
-
export declare class ParseResultCache {
|
|
980
|
-
private cache;
|
|
981
|
-
private maxSize;
|
|
982
|
-
set(key: string, result: {
|
|
983
|
-
modifiers: ParsedModifier[];
|
|
984
|
-
utility: ParsedUtility | null;
|
|
985
|
-
}): void;
|
|
986
|
-
get(key: string): {
|
|
987
|
-
modifiers: ParsedModifier[];
|
|
988
|
-
utility: ParsedUtility | null;
|
|
989
|
-
} | undefined;
|
|
990
|
-
has(key: string): boolean;
|
|
991
|
-
clear(): void;
|
|
992
|
-
getStats(): {
|
|
993
|
-
size: number;
|
|
994
|
-
maxSize: number;
|
|
995
|
-
hitRate: number;
|
|
996
|
-
};
|
|
997
|
-
}
|
|
998
|
-
|
|
999
|
-
export declare const parseResultCache: ParseResultCache;
|
|
1000
|
-
|
|
1001
|
-
/**
|
|
1002
|
-
* decl-to-root path collection function (reused in normalizeAstOrder, etc.)
|
|
1003
|
-
*/
|
|
1004
|
-
export declare type PathNode = Partial<AstNode>;
|
|
1113
|
+
* @param themeObj - The theme object (possibly with category functions)
|
|
1114
|
+
* @param path - Path segments (string or number), or dot-path string (e.g. 'colors.red.500')
|
|
1115
|
+
* @returns The resolved theme value, or undefined if not found or if a leaf function is encountered
|
|
1116
|
+
*
|
|
1117
|
+
* @example
|
|
1118
|
+
* const theme = {
|
|
1119
|
+
* spacing: (theme) => ({ 1: '0.25rem', 2: theme('spacing.1') }),
|
|
1120
|
+
* };
|
|
1121
|
+
* themeGetter(theme, 'spacing.2'); // '0.25rem'
|
|
1122
|
+
*
|
|
1123
|
+
* @example
|
|
1124
|
+
* // Infinite recursion is prevented:
|
|
1125
|
+
* const theme = {
|
|
1126
|
+
* spacing: (theme) => theme('spacing.1'),
|
|
1127
|
+
* };
|
|
1128
|
+
* themeGetter(theme, 'spacing.1'); // undefined
|
|
1129
|
+
*/
|
|
1130
|
+
export declare function themeGetter(themeObj: Theme, ...path: (string | number)[]): unknown;
|
|
1005
1131
|
|
|
1006
|
-
|
|
1132
|
+
/** #300: the literal value of `theme.<namespace>.<key>` when it is a string, else null. */
|
|
1133
|
+
export declare function themeKeyValue(ctx: Context, namespace: string, key: string): string | null;
|
|
1007
1134
|
|
|
1008
|
-
|
|
1135
|
+
/** #300: `var(--<varPrefix>-<key>)` when `theme.<namespace>.<key>` exists (the :root var BaroCSS emits for it), else null. */
|
|
1136
|
+
export declare function themeKeyVar(ctx: Context, namespace: string, key: string, varPrefix: string): string | null;
|
|
1009
1137
|
|
|
1010
|
-
|
|
1138
|
+
export declare function themeToCssVars(theme: Theme): string;
|
|
1011
1139
|
|
|
1012
|
-
|
|
1140
|
+
export declare interface Token {
|
|
1141
|
+
value: string;
|
|
1142
|
+
start: number;
|
|
1143
|
+
end: number;
|
|
1144
|
+
}
|
|
1013
1145
|
|
|
1014
|
-
|
|
1146
|
+
/**
|
|
1147
|
+
* Tokenizes a class name string into an array of tokens
|
|
1148
|
+
* Only handles separation by ':' while respecting brackets and parentheses
|
|
1149
|
+
*
|
|
1150
|
+
* Examples:
|
|
1151
|
+
* - 'hover:bg-red-500' → [{ value: 'hover' }, { value: 'bg-red-500' }]
|
|
1152
|
+
* - 'bg-[#ff0000]:hover' → [{ value: 'bg-[#ff0000]' }, { value: 'hover' }]
|
|
1153
|
+
* - 'text-[color:var(--foo)]' → [{ value: 'text-[color:var(--foo)]' }]
|
|
1154
|
+
* - '!bg-[red]' → [{ value: '!bg-[red]' }]
|
|
1155
|
+
*/
|
|
1156
|
+
export declare function tokenize(className: string): Token[];
|
|
1015
1157
|
|
|
1016
|
-
|
|
1158
|
+
/** Index after the last key <= `key` (stable upper bound) in sorted `keys`. */
|
|
1159
|
+
export declare function upperBound(keys: RuleKey[], key: RuleKey): number;
|
|
1017
1160
|
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1161
|
+
/**
|
|
1162
|
+
* Utility cache management
|
|
1163
|
+
*/
|
|
1164
|
+
export declare class UtilityCache {
|
|
1165
|
+
private cache;
|
|
1166
|
+
private maxSize;
|
|
1167
|
+
set(key: string, value: boolean): void;
|
|
1168
|
+
get(key: string): boolean | undefined;
|
|
1169
|
+
has(key: string): boolean;
|
|
1170
|
+
clear(): void;
|
|
1171
|
+
getStats(): {
|
|
1172
|
+
size: number;
|
|
1173
|
+
maxSize: number;
|
|
1174
|
+
hitRate: number;
|
|
1175
|
+
};
|
|
1176
|
+
}
|
|
1021
1177
|
|
|
1022
|
-
|
|
1178
|
+
export declare const utilityCache: UtilityCache;
|
|
1023
1179
|
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
* @example
|
|
1070
|
-
* ```
|
|
1071
|
-
* staticUtility('block', [['display', 'block']]);
|
|
1072
|
-
* staticUtility('hidden', [['display', 'none']]);
|
|
1073
|
-
* staticUtility('space-x-px', [
|
|
1074
|
-
* [
|
|
1075
|
-
* '& > :not([hidden]) ~ :not([hidden])', // selector
|
|
1076
|
-
* [
|
|
1077
|
-
* ['margin-inline-start', '1px'], // [prop, value]
|
|
1078
|
-
* ['margin-inline-end', '1px'], // [prop, value]
|
|
1079
|
-
* ],
|
|
1080
|
-
* ],
|
|
1081
|
-
* ]);
|
|
1082
|
-
* ```
|
|
1083
|
-
*
|
|
1084
|
-
* @param name The name of the utility
|
|
1085
|
-
* @param decls The declarations of the utility
|
|
1086
|
-
* @param opts The options of the utility
|
|
1087
|
-
*
|
|
1088
|
-
* @returns {void}
|
|
1089
|
-
*/
|
|
1090
|
-
export declare function staticUtility(name: string, decls: StaticUtilityValue[], opts?: {
|
|
1091
|
-
description?: string;
|
|
1092
|
-
category?: string;
|
|
1093
|
-
priority?: number;
|
|
1094
|
-
}, ctx?: Context): void;
|
|
1095
|
-
|
|
1096
|
-
declare type StaticUtilityValue = AstNode | [string, string] | [string, [string, string][]] | ((value: string) => AstNode);
|
|
1097
|
-
|
|
1098
|
-
export declare function styleRule(selector: string, nodes: AstNode[], source?: string): AstNode;
|
|
1099
|
-
|
|
1100
|
-
export declare interface Theme {
|
|
1101
|
-
extend?: Theme;
|
|
1102
|
-
[namespace: string]: unknown;
|
|
1103
|
-
}
|
|
1104
|
-
|
|
1105
|
-
export declare type ThemeGetter = (...path: (string | number)[]) => unknown;
|
|
1106
|
-
|
|
1107
|
-
/**
|
|
1108
|
-
* Modern theme getter for BAROCSS
|
|
1109
|
-
*
|
|
1110
|
-
* - Supports category-level (first path segment) function values only.
|
|
1111
|
-
* - If the category (e.g., 'spacing', 'colors') is a function, it will be executed with the theme getter as argument.
|
|
1112
|
-
* - This allows dynamic theme extension and plugin-style patterns, e.g.:
|
|
1113
|
-
* spacing: (theme) => ({ ...theme('spacing'), '72': '18rem' })
|
|
1114
|
-
* - Leaf (property) functions are NOT supported and will be ignored (returns undefined).
|
|
1115
|
-
* - Infinite recursion is prevented: If the exact same path is being resolved recursively (directly or indirectly), undefined is returned for that call.
|
|
1116
|
-
* - Category-level functions can safely call theme('category.otherKey') for dynamic references.
|
|
1117
|
-
* - Only true recursion on the same path is blocked.
|
|
1118
|
-
* - All theme lookups (theme('category.key')) will always re-execute the category function if present, ensuring dynamic resolution.
|
|
1119
|
-
*
|
|
1120
|
-
* @param themeObj - The theme object (possibly with category functions)
|
|
1121
|
-
* @param path - Path segments (string or number), or dot-path string (e.g. 'colors.red.500')
|
|
1122
|
-
* @returns The resolved theme value, or undefined if not found or if a leaf function is encountered
|
|
1123
|
-
*
|
|
1124
|
-
* @example
|
|
1125
|
-
* const theme = {
|
|
1126
|
-
* spacing: (theme) => ({ 1: '0.25rem', 2: theme('spacing.1') }),
|
|
1127
|
-
* };
|
|
1128
|
-
* themeGetter(theme, 'spacing.2'); // '0.25rem'
|
|
1129
|
-
*
|
|
1130
|
-
* @example
|
|
1131
|
-
* // Infinite recursion is prevented:
|
|
1132
|
-
* const theme = {
|
|
1133
|
-
* spacing: (theme) => theme('spacing.1'),
|
|
1134
|
-
* };
|
|
1135
|
-
* themeGetter(theme, 'spacing.1'); // undefined
|
|
1136
|
-
*/
|
|
1137
|
-
export declare function themeGetter(themeObj: Theme, ...path: (string | number)[]): unknown;
|
|
1138
|
-
|
|
1139
|
-
export declare function themeToCssVars(theme: Theme): string;
|
|
1140
|
-
|
|
1141
|
-
export declare interface Token {
|
|
1142
|
-
value: string;
|
|
1143
|
-
start: number;
|
|
1144
|
-
end: number;
|
|
1145
|
-
}
|
|
1146
|
-
|
|
1147
|
-
/**
|
|
1148
|
-
* Tokenizes a class name string into an array of tokens
|
|
1149
|
-
* Only handles separation by ':' while respecting brackets and parentheses
|
|
1150
|
-
*
|
|
1151
|
-
* Examples:
|
|
1152
|
-
* - 'hover:bg-red-500' → [{ value: 'hover' }, { value: 'bg-red-500' }]
|
|
1153
|
-
* - 'bg-[#ff0000]:hover' → [{ value: 'bg-[#ff0000]' }, { value: 'hover' }]
|
|
1154
|
-
* - 'text-[color:var(--foo)]' → [{ value: 'text-[color:var(--foo)]' }]
|
|
1155
|
-
* - '!bg-[red]' → [{ value: '!bg-[red]' }]
|
|
1156
|
-
*/
|
|
1157
|
-
export declare function tokenize(className: string): Token[];
|
|
1180
|
+
export declare interface UtilityRegistration {
|
|
1181
|
+
/**
|
|
1182
|
+
* The name of the utility
|
|
1183
|
+
*/
|
|
1184
|
+
name: string;
|
|
1185
|
+
/**
|
|
1186
|
+
* The match function for the utility
|
|
1187
|
+
* @param className The class name of the utility
|
|
1188
|
+
* @returns {boolean} Whether the utility matches the class name
|
|
1189
|
+
*/
|
|
1190
|
+
match: (className: string) => boolean;
|
|
1191
|
+
/**
|
|
1192
|
+
* Handler for utility value
|
|
1193
|
+
* @param value Utility value (e.g. 'red-500')
|
|
1194
|
+
* @param ctx Context
|
|
1195
|
+
* @param token Parsed token
|
|
1196
|
+
* @param options Registration options
|
|
1197
|
+
*/
|
|
1198
|
+
handler: (value: string, ctx: Context, token: ParsedUtility, options: UtilityRegistration) => AstNode[] | null | undefined;
|
|
1199
|
+
/**
|
|
1200
|
+
* The description of the utility
|
|
1201
|
+
* @example
|
|
1202
|
+
* ```
|
|
1203
|
+
* description: 'Custom utility description',
|
|
1204
|
+
* ```
|
|
1205
|
+
*/
|
|
1206
|
+
description?: string;
|
|
1207
|
+
/**
|
|
1208
|
+
* The category of the utility
|
|
1209
|
+
* @example
|
|
1210
|
+
* ```
|
|
1211
|
+
* category: 'background',
|
|
1212
|
+
* ```
|
|
1213
|
+
*/
|
|
1214
|
+
category?: string;
|
|
1215
|
+
/**
|
|
1216
|
+
* The priority of the utility
|
|
1217
|
+
* @example
|
|
1218
|
+
* ```
|
|
1219
|
+
* priority: 10,
|
|
1220
|
+
* ```
|
|
1221
|
+
*/
|
|
1222
|
+
priority?: number;
|
|
1223
|
+
[key: string]: unknown;
|
|
1224
|
+
}
|
|
1158
1225
|
|
|
1159
|
-
|
|
1160
|
-
|
|
1226
|
+
/**
|
|
1227
|
+
* WeakMap-based cache for memory optimization
|
|
1228
|
+
*/
|
|
1229
|
+
export declare class WeakCache<T> {
|
|
1230
|
+
private cache;
|
|
1231
|
+
private keyMap;
|
|
1232
|
+
private maxSize;
|
|
1233
|
+
set(key: string, value: T): void;
|
|
1234
|
+
get(key: string): T | undefined;
|
|
1235
|
+
has(key: string): boolean;
|
|
1236
|
+
clear(): void;
|
|
1237
|
+
getStats(): {
|
|
1238
|
+
size: number;
|
|
1239
|
+
maxSize: number;
|
|
1240
|
+
hitRate: number;
|
|
1241
|
+
};
|
|
1242
|
+
}
|
|
1161
1243
|
|
|
1162
|
-
|
|
1163
|
-
* Utility cache management
|
|
1164
|
-
*/
|
|
1165
|
-
export declare class UtilityCache {
|
|
1166
|
-
private cache;
|
|
1167
|
-
private maxSize;
|
|
1168
|
-
set(key: string, value: boolean): void;
|
|
1169
|
-
get(key: string): boolean | undefined;
|
|
1170
|
-
has(key: string): boolean;
|
|
1171
|
-
clear(): void;
|
|
1172
|
-
getStats(): {
|
|
1173
|
-
size: number;
|
|
1174
|
-
maxSize: number;
|
|
1175
|
-
hitRate: number;
|
|
1176
|
-
};
|
|
1177
|
-
}
|
|
1178
|
-
|
|
1179
|
-
export declare const utilityCache: UtilityCache;
|
|
1180
|
-
|
|
1181
|
-
export declare interface UtilityRegistration {
|
|
1182
|
-
/**
|
|
1183
|
-
* The name of the utility
|
|
1184
|
-
*/
|
|
1185
|
-
name: string;
|
|
1186
|
-
/**
|
|
1187
|
-
* The match function for the utility
|
|
1188
|
-
* @param className The class name of the utility
|
|
1189
|
-
* @returns {boolean} Whether the utility matches the class name
|
|
1190
|
-
*/
|
|
1191
|
-
match: (className: string) => boolean;
|
|
1192
|
-
/**
|
|
1193
|
-
* Handler for utility value
|
|
1194
|
-
* @param value Utility value (e.g. 'red-500')
|
|
1195
|
-
* @param ctx Context
|
|
1196
|
-
* @param token Parsed token
|
|
1197
|
-
* @param options Registration options
|
|
1198
|
-
*/
|
|
1199
|
-
handler: (value: string, ctx: Context, token: ParsedUtility, options: UtilityRegistration) => AstNode[] | null | undefined;
|
|
1200
|
-
/**
|
|
1201
|
-
* The description of the utility
|
|
1202
|
-
* @example
|
|
1203
|
-
* ```
|
|
1204
|
-
* description: 'Custom utility description',
|
|
1205
|
-
* ```
|
|
1206
|
-
*/
|
|
1207
|
-
description?: string;
|
|
1208
|
-
/**
|
|
1209
|
-
* The category of the utility
|
|
1210
|
-
* @example
|
|
1211
|
-
* ```
|
|
1212
|
-
* category: 'background',
|
|
1213
|
-
* ```
|
|
1214
|
-
*/
|
|
1215
|
-
category?: string;
|
|
1216
|
-
/**
|
|
1217
|
-
* The priority of the utility
|
|
1218
|
-
* @example
|
|
1219
|
-
* ```
|
|
1220
|
-
* priority: 10,
|
|
1221
|
-
* ```
|
|
1222
|
-
*/
|
|
1223
|
-
priority?: number;
|
|
1224
|
-
[key: string]: unknown;
|
|
1225
|
-
}
|
|
1226
|
-
|
|
1227
|
-
/**
|
|
1228
|
-
* WeakMap-based cache for memory optimization
|
|
1229
|
-
*/
|
|
1230
|
-
export declare class WeakCache<T> {
|
|
1231
|
-
private cache;
|
|
1232
|
-
private keyMap;
|
|
1233
|
-
private maxSize;
|
|
1234
|
-
set(key: string, value: T): void;
|
|
1235
|
-
get(key: string): T | undefined;
|
|
1236
|
-
has(key: string): boolean;
|
|
1237
|
-
clear(): void;
|
|
1238
|
-
getStats(): {
|
|
1239
|
-
size: number;
|
|
1240
|
-
maxSize: number;
|
|
1241
|
-
hitRate: number;
|
|
1242
|
-
};
|
|
1243
|
-
}
|
|
1244
|
-
|
|
1245
|
-
export { }
|
|
1244
|
+
export { }
|