diff --git a/packages/core/src/css-types.ts b/packages/core/src/css-types.ts index b391b9b3..1f1e2528 100644 --- a/packages/core/src/css-types.ts +++ b/packages/core/src/css-types.ts @@ -6385,7 +6385,7 @@ export type BorderBlockEndColorProperty = Globals | Color; export type BorderBlockEndStyleProperty = Globals | LineStyle; -export type BorderBlockEndWidthProperty = Globals | LineWidth; +export type BorderBlockEndWidthProperty = Globals | LineWidth | number | (string & {}); export type BorderBlockStartProperty = Globals | LineWidth | LineStyle | Color | (string & {}); @@ -6393,67 +6393,79 @@ export type BorderBlockStartColorProperty = Globals | Color; export type BorderBlockStartStyleProperty = Globals | LineStyle; -export type BorderBlockStartWidthProperty = Globals | LineWidth; +export type BorderBlockStartWidthProperty = Globals | LineWidth | number | (string & {}); export type BorderBlockStyleProperty = Globals | LineStyle; -export type BorderBlockWidthProperty = Globals | LineWidth; +export type BorderBlockWidthProperty = Globals | LineWidth | number | (string & {}); export type BorderBottomProperty = Globals | LineWidth | LineStyle | Color | (string & {}); export type BorderBottomColorProperty = Globals | Color; -export type BorderBottomLeftRadiusProperty = Globals | TLength | (string & {}); +export type BorderBottomLeftRadiusProperty = Globals | TLength | number | (string & {}); -export type BorderBottomRightRadiusProperty = Globals | TLength | (string & {}); +export type BorderBottomRightRadiusProperty = Globals | TLength | number | (string & {}); export type BorderBottomStyleProperty = Globals | LineStyle; -export type BorderBottomWidthProperty = Globals | LineWidth; +export type BorderBottomWidthProperty = Globals | LineWidth | number | (string & {}); export type BorderCollapseProperty = Globals | 'collapse' | 'separate'; export type BorderColorProperty = Globals | Color | (string & {}); -export type BorderEndEndRadiusProperty = Globals | TLength | (string & {}); +export type BorderEndEndRadiusProperty = Globals | TLength | number | (string & {}); -export type BorderEndStartRadiusProperty = Globals | TLength | (string & {}); +export type BorderEndStartRadiusProperty = Globals | TLength | number | (string & {}); -export type BorderImageProperty = Globals | 'none' | 'repeat' | 'round' | 'space' | 'stretch' | (string & {}) | number; +export type BorderImageProperty = Globals | 'none' | 'repeat' | 'round' | 'space' | 'stretch' | number | (string & {}); -export type BorderImageOutsetProperty = Globals | TLength | (string & {}) | number; +export type BorderImageOutsetProperty = Globals | TLength | number | (string & {}); export type BorderImageRepeatProperty = Globals | 'repeat' | 'round' | 'space' | 'stretch' | (string & {}); -export type BorderImageSliceProperty = Globals | (string & {}) | number; +export type BorderImageSliceProperty = Globals | number | (string & {}); export type BorderImageSourceProperty = Globals | 'none' | (string & {}); -export type BorderImageWidthProperty = Globals | TLength | 'auto' | (string & {}) | number; +export type BorderImageWidthProperty = Globals | TLength | 'auto' | number | (string & {}); export type BorderInlineProperty = Globals | LineWidth | LineStyle | Color | (string & {}); export type BorderInlineColorProperty = Globals | Color | (string & {}); -export type BorderInlineEndProperty = Globals | LineWidth | LineStyle | Color | (string & {}); +export type BorderInlineEndProperty = + | Globals + | LineWidth + | LineStyle + | Color + | number + | (string & {}); export type BorderInlineEndColorProperty = Globals | Color; export type BorderInlineEndStyleProperty = Globals | LineStyle; -export type BorderInlineEndWidthProperty = Globals | LineWidth; +export type BorderInlineEndWidthProperty = Globals | LineWidth | number | (string & {}); -export type BorderInlineStartProperty = Globals | LineWidth | LineStyle | Color | (string & {}); +export type BorderInlineStartProperty = + | Globals + | LineWidth + | LineStyle + | Color + | number + | (string & {}); export type BorderInlineStartColorProperty = Globals | Color; export type BorderInlineStartStyleProperty = Globals | LineStyle; -export type BorderInlineStartWidthProperty = Globals | LineWidth; +export type BorderInlineStartWidthProperty = Globals | LineWidth | number | (string & {}); export type BorderInlineStyleProperty = Globals | LineStyle; -export type BorderInlineWidthProperty = Globals | LineWidth; +export type BorderInlineWidthProperty = Globals | LineWidth | number | (string & {}); export type BorderLeftProperty = Globals | LineWidth | LineStyle | Color | (string & {}); @@ -6461,41 +6473,48 @@ export type BorderLeftColorProperty = Globals | Color; export type BorderLeftStyleProperty = Globals | LineStyle; -export type BorderLeftWidthProperty = Globals | LineWidth; +export type BorderLeftWidthProperty = Globals | LineWidth | number | (string & {}); -export type BorderRadiusProperty = Globals | TLength | (string & {}); +export type BorderRadiusProperty = Globals | TLength | number | (string & {}); -export type BorderRightProperty = Globals | LineWidth | LineStyle | Color | (string & {}); +export type BorderRightProperty = Globals | LineWidth | LineStyle | Color | number | (string & {}); export type BorderRightColorProperty = Globals | Color; export type BorderRightStyleProperty = Globals | LineStyle; -export type BorderRightWidthProperty = Globals | LineWidth; +export type BorderRightWidthProperty = Globals | LineWidth | number | (string & {}); -export type BorderSpacingProperty = Globals | TLength | (string & {}); +export type BorderSpacingProperty = Globals | TLength | number | (string & {}); -export type BorderStartEndRadiusProperty = Globals | TLength | (string & {}); +export type BorderStartEndRadiusProperty = Globals | TLength | number | (string & {}); -export type BorderStartStartRadiusProperty = Globals | TLength | (string & {}); +export type BorderStartStartRadiusProperty = Globals | TLength | number | (string & {}); export type BorderStyleProperty = Globals | LineStyle | (string & {}); -export type BorderTopProperty = Globals | LineWidth | LineStyle | Color | (string & {}); +export type BorderTopProperty = + | Globals + | LineWidth + | LineStyle + | Color + | number + | number + | (string & {}); export type BorderTopColorProperty = Globals | Color; -export type BorderTopLeftRadiusProperty = Globals | TLength | (string & {}); +export type BorderTopLeftRadiusProperty = Globals | TLength | number | (string & {}); -export type BorderTopRightRadiusProperty = Globals | TLength | (string & {}); +export type BorderTopRightRadiusProperty = Globals | TLength | number | (string & {}); export type BorderTopStyleProperty = Globals | LineStyle; -export type BorderTopWidthProperty = Globals | LineWidth; +export type BorderTopWidthProperty = Globals | LineWidth | number | (string & {}); -export type BorderWidthProperty = Globals | LineWidth | (string & {}); +export type BorderWidthProperty = Globals | LineWidth | number | (string & {}); -export type BottomProperty = Globals | TLength | 'auto' | (string & {}); +export type BottomProperty = Globals | TLength | 'auto' | number | (string & {}); export type BoxAlignProperty = Globals | 'baseline' | 'center' | 'end' | 'start' | 'stretch'; @@ -6734,7 +6753,14 @@ export type FontLanguageOverrideProperty = Globals | 'normal' | (string & {}); export type FontOpticalSizingProperty = Globals | 'auto' | 'none'; -export type FontSizeProperty = Globals | AbsoluteSize | TLength | 'larger' | 'smaller' | (string & {}); +export type FontSizeProperty = + | Globals + | AbsoluteSize + | TLength + | 'larger' + | 'smaller' + | number + | (string & {}); export type FontSizeAdjustProperty = Globals | 'none' | number; @@ -6829,9 +6855,9 @@ export type FontVariantPositionProperty = Globals | 'normal' | 'sub' | 'super'; export type FontVariationSettingsProperty = Globals | 'normal' | (string & {}); -export type FontWeightProperty = Globals | FontWeightAbsolute | 'bolder' | 'lighter'; +export type FontWeightProperty = Globals | FontWeightAbsolute | 'bolder' | 'lighter' | (string & {}); -export type GapProperty = Globals | TLength | 'normal' | (string & {}); +export type GapProperty = Globals | TLength | 'normal' | number | (string & {}); export type GridProperty = Globals | 'none' | (string & {}); @@ -6847,17 +6873,17 @@ export type GridColumnProperty = Globals | GridLine | (string & {}); export type GridColumnEndProperty = Globals | GridLine; -export type GridColumnGapProperty = Globals | TLength | (string & {}); +export type GridColumnGapProperty = Globals | TLength | number | (string & {}); export type GridColumnStartProperty = Globals | GridLine; -export type GridGapProperty = Globals | TLength | (string & {}); +export type GridGapProperty = Globals | TLength | number | (string & {}); export type GridRowProperty = Globals | GridLine | (string & {}); export type GridRowEndProperty = Globals | GridLine; -export type GridRowGapProperty = Globals | TLength | (string & {}); +export type GridRowGapProperty = Globals | TLength | number | (string & {}); export type GridRowStartProperty = Globals | GridLine; @@ -6971,15 +6997,15 @@ export type JustifySelfProperty = | 'stretch' | (string & {}); -export type LeftProperty = Globals | TLength | 'auto' | (string & {}); +export type LeftProperty = Globals | TLength | 'auto' | number | (string & {}); -export type LetterSpacingProperty = Globals | TLength | 'normal'; +export type LetterSpacingProperty = Globals | TLength | 'normal' | number | (string & {}); export type LineBreakProperty = Globals | 'anywhere' | 'auto' | 'loose' | 'normal' | 'strict'; export type LineClampProperty = Globals | 'none' | number; -export type LineHeightProperty = Globals | TLength | 'normal' | (string & {}) | number; +export type LineHeightProperty = Globals | TLength | 'normal' | number | (string & {}); export type LineHeightStepProperty = Globals | TLength; @@ -6995,39 +7021,40 @@ export type MarginProperty = | Globals | TLength | 'auto' + | number | (string & {}) - | [Globals | TLength | 'auto' | (string & {}), Globals | TLength | 'auto' | (string & {})] + | [Globals | TLength | 'auto' | number | (string & {}), Globals | TLength | 'auto' | number | (string & {})] | [ - Globals | TLength | 'auto' | (string & {}), - Globals | TLength | 'auto' | (string & {}), - Globals | TLength | 'auto' | (string & {}) + Globals | TLength | 'auto' | number | (string & {}), + Globals | TLength | 'auto' | number | (string & {}), + Globals | TLength | 'auto' | number | (string & {}) ] | [ - Globals | TLength | 'auto' | (string & {}), - Globals | TLength | 'auto' | (string & {}), - Globals | TLength | 'auto' | (string & {}), - Globals | TLength | 'auto' | (string & {}) + Globals | TLength | 'auto' | number | (string & {}), + Globals | TLength | 'auto' | number | (string & {}), + Globals | TLength | 'auto' | number | (string & {}), + Globals | TLength | 'auto' | number | (string & {}) ]; -export type MarginBlockProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginBlockProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginBlockEndProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginBlockEndProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginBlockStartProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginBlockStartProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginBottomProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginBottomProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginInlineProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginInlineProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginInlineEndProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginInlineEndProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginInlineStartProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginInlineStartProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginLeftProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginLeftProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginRightProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginRightProperty = Globals | TLength | 'auto' | number | (string & {}); -export type MarginTopProperty = Globals | TLength | 'auto' | (string & {}); +export type MarginTopProperty = Globals | TLength | 'auto' | number | (string & {}); export type MaskProperty = Globals | MaskLayer | (string & {}); @@ -7084,6 +7111,7 @@ export type MaxBlockSizeProperty = | 'max-content' | 'min-content' | 'none' + | number | (string & {}); export type MaxHeightProperty = @@ -7101,6 +7129,7 @@ export type MaxHeightProperty = | 'max-content' | 'min-content' | 'none' + | number | (string & {}); export type MaxInlineSizeProperty = @@ -7115,6 +7144,7 @@ export type MaxInlineSizeProperty = | 'max-content' | 'min-content' | 'none' + | number | (string & {}); export type MaxLinesProperty = Globals | 'none' | number; @@ -7134,6 +7164,7 @@ export type MaxWidthProperty = | 'max-content' | 'min-content' | 'none' + | number | (string & {}); export type MinBlockSizeProperty = @@ -7147,6 +7178,7 @@ export type MinBlockSizeProperty = | 'fit-content' | 'max-content' | 'min-content' + | number | (string & {}); export type MinHeightProperty = @@ -7164,6 +7196,7 @@ export type MinHeightProperty = | 'intrinsic' | 'max-content' | 'min-content' + | number | (string & {}); export type MinInlineSizeProperty = @@ -7178,6 +7211,7 @@ export type MinInlineSizeProperty = | 'fit-content' | 'max-content' | 'min-content' + | number | (string & {}); export type MinWidthProperty = @@ -7197,13 +7231,21 @@ export type MinWidthProperty = | 'max-content' | 'min-content' | 'min-intrinsic' + | number | (string & {}); export type MixBlendModeProperty = Globals | BlendMode; -export type OffsetProperty = Globals | Position | GeometryBox | 'auto' | 'none' | (string & {}); +export type OffsetProperty = + | Globals + | Position + | GeometryBox + | 'auto' + | 'none' + | number + | (string & {}); -export type OffsetDistanceProperty = Globals | TLength | (string & {}); +export type OffsetDistanceProperty = Globals | TLength | number | (string & {}); export type OffsetPathProperty = Globals | GeometryBox | 'none' | (string & {}); @@ -7261,35 +7303,40 @@ export type OverscrollBehaviorYProperty = Globals | 'auto' | 'contain' | 'none'; export type PaddingProperty = | Globals | TLength + | number | (string & {}) - | [Globals | TLength | (string & {}), Globals | TLength | (string & {})] - | [Globals | TLength | (string & {}), Globals | TLength | (string & {}), Globals | TLength | (string & {})] + | [Globals | TLength | number | (string & {}), Globals | TLength | number | (string & {})] + | [ + Globals | TLength | number | (string & {}), + Globals | TLength | number | (string & {}), + Globals | TLength | number | (string & {}) + ] | [ - Globals | TLength | (string & {}), - Globals | TLength | (string & {}), - Globals | TLength | (string & {}), - Globals | TLength | (string & {}) + Globals | TLength | number | (string & {}), + Globals | TLength | number | (string & {}), + Globals | TLength | number | (string & {}), + Globals | TLength | number | (string & {}) ]; -export type PaddingBlockProperty = Globals | TLength | (string & {}); +export type PaddingBlockProperty = Globals | TLength | number | (string & {}); -export type PaddingBlockEndProperty = Globals | TLength | (string & {}); +export type PaddingBlockEndProperty = Globals | TLength | number | (string & {}); -export type PaddingBlockStartProperty = Globals | TLength | (string & {}); +export type PaddingBlockStartProperty = Globals | TLength | number | (string & {}); -export type PaddingBottomProperty = Globals | TLength | (string & {}); +export type PaddingBottomProperty = Globals | TLength | number | (string & {}); -export type PaddingInlineProperty = Globals | TLength | (string & {}); +export type PaddingInlineProperty = Globals | TLength | number | (string & {}); -export type PaddingInlineEndProperty = Globals | TLength | (string & {}); +export type PaddingInlineEndProperty = Globals | TLength | number | (string & {}); -export type PaddingInlineStartProperty = Globals | TLength | (string & {}); +export type PaddingInlineStartProperty = Globals | TLength | number | (string & {}); -export type PaddingLeftProperty = Globals | TLength | (string & {}); +export type PaddingLeftProperty = Globals | TLength | number | (string & {}); -export type PaddingRightProperty = Globals | TLength | (string & {}); +export type PaddingRightProperty = Globals | TLength | number | (string & {}); -export type PaddingTopProperty = Globals | TLength | (string & {}); +export type PaddingTopProperty = Globals | TLength | number | (string & {}); export type PageBreakAfterProperty = Globals | 'always' | 'auto' | 'avoid' | 'left' | 'recto' | 'right' | 'verso'; @@ -7335,7 +7382,7 @@ export type QuotesProperty = Globals | 'auto' | 'none' | (string & {}); export type ResizeProperty = Globals | 'block' | 'both' | 'horizontal' | 'inline' | 'none' | 'vertical'; -export type RightProperty = Globals | TLength | 'auto' | (string & {}); +export type RightProperty = Globals | TLength | 'auto' | number | (string & {}); export type RotateProperty = Globals | 'none' | (string & {}); @@ -7510,7 +7557,7 @@ export type TextEmphasisStyleProperty = | 'triangle' | (string & {}); -export type TextIndentProperty = Globals | TLength | (string & {}); +export type TextIndentProperty = Globals | TLength | number | (string & {}); export type TextJustifyProperty = Globals | 'auto' | 'inter-character' | 'inter-word' | 'none'; @@ -7537,7 +7584,7 @@ export type TextUnderlineOffsetProperty = Globals | TLength | 'auto' | export type TextUnderlinePositionProperty = Globals | 'auto' | 'left' | 'right' | 'under' | (string & {}); -export type TopProperty = Globals | TLength | 'auto' | (string & {}); +export type TopProperty = Globals | TLength | 'auto' | number | (string & {}); export type TouchActionProperty = | Globals diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 67c66504..5fa8c103 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -1,4 +1,90 @@ -import { Color, FlexProperty, LineStyle, LineWidth, Properties } from './css-types'; +import { + Color, + LineStyle, + LineWidth, + Properties, + MarginProperty, + MarginTopProperty, + MarginLeftProperty, + MarginRightProperty, + MarginBottomProperty, + PaddingProperty, + PaddingTopProperty, + PaddingLeftProperty, + PaddingRightProperty, + PaddingBottomProperty, + GridGapProperty, + GridColumnGapProperty, + GridRowGapProperty, + FontSizeProperty, + BorderColorProperty, + BorderTopColorProperty, + BorderLeftColorProperty, + BorderRightColorProperty, + BorderBottomColorProperty, + FontFamilyProperty, + FontWeightProperty, + LineHeightProperty, + LetterSpacingProperty, + FlexBasisProperty, + WidthProperty, + HeightProperty, + MinWidthProperty, + MaxWidthProperty, + MinHeightProperty, + MaxHeightProperty, + BorderWidthProperty, + BorderTopWidthProperty, + BorderLeftWidthProperty, + BorderRightWidthProperty, + BorderBottomWidthProperty, + BorderStyleProperty, + BorderTopStyleProperty, + BorderLeftStyleProperty, + BorderRightStyleProperty, + BorderBottomStyleProperty, + BorderRadiusProperty, + BorderTopLeftRadiusProperty, + BorderTopRightRadiusProperty, + BorderBottomRightRadiusProperty, + BorderBottomLeftRadiusProperty, + TextShadowProperty, + ZIndexProperty, + InsetProperty, + InsetBlockProperty, + InsetBlockEndProperty, + InsetBlockStartProperty, + InsetInlineEndProperty, + InsetInlineStartProperty, + MarginInlineEndProperty, + MarginInlineProperty, + MarginInlineStartProperty, + MarginBlockProperty, + MarginBlockEndProperty, + MarginBlockStartProperty, + PaddingInlineProperty, + PaddingInlineEndProperty, + PaddingInlineStartProperty, + PaddingBlockProperty, + PaddingBlockEndProperty, + PaddingBlockStartProperty, + TopProperty, + RightProperty, + BottomProperty, + LeftProperty, + BackgroundColorProperty, + CaretColorProperty, + ColumnRuleColorProperty, + OutlineColorProperty, + FillProperty, + StrokeProperty, + BlockSizeProperty, + MinBlockSizeProperty, + MaxBlockSizeProperty, + InlineSizeProperty, + MinInlineSizeProperty, + MaxInlineSizeProperty, +} from './css-types'; export interface IBreakpoints { [key: string]: (css: string) => string; @@ -46,20 +132,21 @@ export type TTopCss = { : Properties[K] | number; }; -export type TRecursiveCss = - | TTopCss +export type TRecursiveCss> = ( + | D | { - [selector: string]: TRecursiveCss; - }; + [pseudo: string]: (D | { [pseudo: string]: (D | { [pseudo: string]: D }) & D }) & D; + } +) & + D; -export type TFlatCSS< - T extends TConfig, - D = { - [K in keyof Properties]?: K extends keyof ICssPropToToken - ? ICssPropToToken[K] | Properties[K] - : Properties[K]; - } -> = D; +export type TFlatCSS = { + [K in keyof Properties]?: K extends keyof ICssPropToToken + ? T extends { strict: true } + ? ICssPropToToken[K] + : ICssPropToToken[K] | Properties[K] + : Properties[K]; +}; export type TFlatUtils< T extends TConfig, @@ -90,19 +177,25 @@ export type TUtility = (config: T) => (arg: A) export type ICssPropToToken = T['tokens'] extends object ? { - gap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - gridGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - columnGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - gridColumnGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - rowGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - gridRowGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - inset: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - insetBlock: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - insetBlockEnd: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - insetBlockStart: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - insetInline: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - insetInlineEnd: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - insetInlineStart: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; + gap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridGapProperty; + gridGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridGapProperty; + columnGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridColumnGapProperty; + gridColumnGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridColumnGapProperty; + rowGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridRowGapProperty; + gridRowGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridRowGapProperty; + inset: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetProperty; + insetBlock: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetBlockProperty; + insetBlockEnd: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetBlockEndProperty; + insetBlockStart: T['tokens']['colors'] extends object + ? keyof T['tokens']['colors'] + : InsetBlockStartProperty; + insetInline: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetInlineEndProperty; + insetInlineEnd: T['tokens']['colors'] extends object + ? keyof T['tokens']['colors'] + : InsetInlineEndProperty; + insetInlineStart: T['tokens']['colors'] extends object + ? keyof T['tokens']['colors'] + : InsetInlineStartProperty; margin: T['tokens']['space'] extends object ? | keyof T['tokens']['space'] @@ -114,17 +207,23 @@ export type ICssPropToToken = T['tokens'] extends object keyof T['tokens']['space'], keyof T['tokens']['space'] ] - : never; - marginTop: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginRight: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginBottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginLeft: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginInline: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginInlineEnd: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginInlineStart: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginBlock: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginBlockEnd: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - marginBlockStart: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; + : MarginProperty; + marginTop: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginTopProperty; + marginRight: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginRightProperty; + marginBottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginBottomProperty; + marginLeft: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginLeftProperty; + marginInline: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginInlineProperty; + marginInlineEnd: T['tokens']['space'] extends object + ? keyof T['tokens']['space'] + : MarginInlineEndProperty; + marginInlineStart: T['tokens']['space'] extends object + ? keyof T['tokens']['space'] + : MarginInlineStartProperty; + marginBlock: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginBlockProperty; + marginBlockEnd: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginBlockEndProperty; + marginBlockStart: T['tokens']['space'] extends object + ? keyof T['tokens']['space'] + : MarginBlockStartProperty; padding: T['tokens']['space'] extends object ? | keyof T['tokens']['space'] @@ -136,76 +235,114 @@ export type ICssPropToToken = T['tokens'] extends object keyof T['tokens']['space'], keyof T['tokens']['space'] ] - : never; - paddingTop: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingRight: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingBottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingLeft: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingInline: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingInlineEnd: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingInlineStart: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingBlock: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingBlockEnd: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - paddingBlockStart: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - top: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - right: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - bottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - left: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never; - fontSize: T['tokens']['fontSizes'] extends object ? keyof T['tokens']['fontSizes'] : never; - backgroundColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; + : PaddingProperty; + paddingTop: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingTopProperty; + paddingRight: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingRightProperty; + paddingBottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingBottomProperty; + paddingLeft: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingLeftProperty; + paddingInline: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingInlineProperty; + paddingInlineEnd: T['tokens']['space'] extends object + ? keyof T['tokens']['space'] + : PaddingInlineEndProperty; + paddingInlineStart: T['tokens']['space'] extends object + ? keyof T['tokens']['space'] + : PaddingInlineStartProperty; + paddingBlock: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingBlockProperty; + paddingBlockEnd: T['tokens']['space'] extends object + ? keyof T['tokens']['space'] + : PaddingBlockEndProperty; + paddingBlockStart: T['tokens']['space'] extends object + ? keyof T['tokens']['space'] + : PaddingBlockStartProperty; + top: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : TopProperty; + right: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : RightProperty; + bottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : BottomProperty; + left: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : LeftProperty; + fontSize: T['tokens']['fontSizes'] extends object ? keyof T['tokens']['fontSizes'] : FontSizeProperty; + backgroundColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : BackgroundColorProperty; border: [ LineWidth<(string & {}) | 0>, T['tokens']['borderStyles'] extends object ? keyof T['tokens']['borderStyles'] : LineStyle, T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : Color ]; - borderColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - borderTopColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - borderRightColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - borderBottomColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - borderLeftColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - caretColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - color: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - columnRuleColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - outlineColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - fill: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - stroke: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : never; - fontFamily: T['tokens']['fonts'] extends object ? keyof T['tokens']['fonts'] : never; - fontWeight: T['tokens']['fontWeights'] extends object ? keyof T['tokens']['fontWeights'] : never; - lineHeight: T['tokens']['lineHeights'] extends object ? keyof T['tokens']['lineHeights'] : never; - letterSpacing: T['tokens']['letterSpacings'] extends object ? keyof T['tokens']['letterSpacings'] : never; - blockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - minBlockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - maxBlockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - inlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - minInlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - maxInlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - width: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - minWidth: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - maxWidth: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - height: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - minHeight: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - maxHeight: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; - flexBasis: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : never; + borderColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : BorderColorProperty; + borderTopColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : BorderTopColorProperty; + borderRightColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : BorderRightColorProperty; + borderBottomColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : BorderBottomColorProperty; + borderLeftColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : BorderLeftColorProperty; + caretColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : CaretColorProperty; + color: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : Color; + columnRuleColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : ColumnRuleColorProperty; + outlineColor: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : OutlineColorProperty; + fill: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : FillProperty; + stroke: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : StrokeProperty; + fontFamily: T['tokens']['fonts'] extends object ? keyof T['tokens']['fonts'] : FontFamilyProperty; + fontWeight: T['tokens']['fontWeights'] extends object ? keyof T['tokens']['fontWeights'] : FontWeightProperty; + lineHeight: T['tokens']['lineHeights'] extends object + ? keyof T['tokens']['lineHeights'] + : LineHeightProperty; + letterSpacing: T['tokens']['letterSpacings'] extends object + ? keyof T['tokens']['letterSpacings'] + : LetterSpacingProperty; + blockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : BlockSizeProperty; + minBlockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinBlockSizeProperty; + maxBlockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxBlockSizeProperty; + inlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : InlineSizeProperty; + minInlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinInlineSizeProperty; + maxInlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxInlineSizeProperty; + width: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : WidthProperty; + minWidth: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinWidthProperty; + maxWidth: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxWidthProperty; + height: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : HeightProperty; + minHeight: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinHeightProperty; + maxHeight: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxHeightProperty; + flexBasis: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : FlexBasisProperty; flex: | (T['tokens']['space'] extends object ? keyof T['tokens']['space'] : never) | [number, T['tokens']['space'] extends object ? keyof T['tokens']['space'] : string | number] | [number, number, T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : string | number]; - borderWidth: T['tokens']['borderWidths'] extends object ? keyof T['tokens']['borderWidths'] : never; - borderTopWidth: T['tokens']['borderWidths'] extends object ? keyof T['tokens']['borderWidths'] : never; - borderLeftWidth: T['tokens']['borderWidths'] extends object ? keyof T['tokens']['borderWidths'] : never; - borderRightWidth: T['tokens']['borderWidths'] extends object ? keyof T['tokens']['borderWidths'] : never; - borderBottomWidth: T['tokens']['borderWidths'] extends object ? keyof T['tokens']['borderWidths'] : never; - borderStyle: T['tokens']['borderStyles'] extends object ? keyof T['tokens']['borderStyles'] : never; - borderTopStyle: T['tokens']['borderStyles'] extends object ? keyof T['tokens']['borderStyles'] : never; - borderRightStyle: T['tokens']['borderStyles'] extends object ? keyof T['tokens']['borderStyles'] : never; - borderBottomStyle: T['tokens']['borderStyles'] extends object ? keyof T['tokens']['borderStyles'] : never; - borderLeftStyle: T['tokens']['borderStyles'] extends object ? keyof T['tokens']['borderStyles'] : never; - borderRadius: T['tokens']['radii'] extends object ? keyof T['tokens']['radii'] : never; - borderTopLeftRadius: T['tokens']['radii'] extends object ? keyof T['tokens']['radii'] : never; - borderTopRightRadius: T['tokens']['radii'] extends object ? keyof T['tokens']['radii'] : never; - borderBottomRightRadius: T['tokens']['radii'] extends object ? keyof T['tokens']['radii'] : never; - borderBottomLeftRadius: T['tokens']['radii'] extends object ? keyof T['tokens']['radii'] : never; + borderWidth: T['tokens']['borderWidths'] extends object + ? keyof T['tokens']['borderWidths'] + : BorderWidthProperty; + borderTopWidth: T['tokens']['borderWidths'] extends object + ? keyof T['tokens']['borderWidths'] + : BorderTopWidthProperty; + borderLeftWidth: T['tokens']['borderWidths'] extends object + ? keyof T['tokens']['borderWidths'] + : BorderLeftWidthProperty; + borderRightWidth: T['tokens']['borderWidths'] extends object + ? keyof T['tokens']['borderWidths'] + : BorderRightWidthProperty; + borderBottomWidth: T['tokens']['borderWidths'] extends object + ? keyof T['tokens']['borderWidths'] + : BorderBottomWidthProperty; + borderStyle: T['tokens']['borderStyles'] extends object ? keyof T['tokens']['borderStyles'] : BorderStyleProperty; + borderTopStyle: T['tokens']['borderStyles'] extends object + ? keyof T['tokens']['borderStyles'] + : BorderTopStyleProperty; + borderRightStyle: T['tokens']['borderStyles'] extends object + ? keyof T['tokens']['borderStyles'] + : BorderRightStyleProperty; + borderBottomStyle: T['tokens']['borderStyles'] extends object + ? keyof T['tokens']['borderStyles'] + : BorderBottomStyleProperty; + borderLeftStyle: T['tokens']['borderStyles'] extends object + ? keyof T['tokens']['borderStyles'] + : BorderLeftStyleProperty; + borderRadius: T['tokens']['radii'] extends object ? keyof T['tokens']['radii'] : BorderRadiusProperty; + borderTopLeftRadius: T['tokens']['radii'] extends object + ? keyof T['tokens']['radii'] + : BorderTopLeftRadiusProperty; + borderTopRightRadius: T['tokens']['radii'] extends object + ? keyof T['tokens']['radii'] + : BorderTopRightRadiusProperty; + borderBottomRightRadius: T['tokens']['radii'] extends object + ? keyof T['tokens']['radii'] + : BorderBottomRightRadiusProperty; + borderBottomLeftRadius: T['tokens']['radii'] extends object + ? keyof T['tokens']['radii'] + : BorderBottomLeftRadiusProperty; boxShadow: T['tokens']['shadows'] extends object ? keyof T['tokens']['shadows'] : [ @@ -214,8 +351,8 @@ export type ICssPropToToken = T['tokens'] extends object string | number, T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : Color ]; - textShadow: T['tokens']['shadows'] extends object ? keyof T['tokens']['shadows'] : never; - zIndex: T['tokens']['zIndices'] extends object ? keyof T['tokens']['zIndices'] : never; + textShadow: T['tokens']['shadows'] extends object ? keyof T['tokens']['shadows'] : TextShadowProperty; + zIndex: T['tokens']['zIndices'] extends object ? keyof T['tokens']['zIndices'] : ZIndexProperty; transition: T['tokens']['transitions'] extends object ? keyof T['tokens']['transitions'] : never; } : {}; @@ -248,6 +385,7 @@ export interface IUtils { export type TConfig = { showFriendlyClassnames?: boolean; prefix?: string; + strict?: boolean; } & (STRICT_MODE extends true ? { breakpoints: IBreakpoints; tokens: ITokensDefinition; utils: IUtils } : { diff --git a/packages/core/tests/index.test.ts b/packages/core/tests/index.test.ts index f86bce82..83fc6507 100644 --- a/packages/core/tests/index.test.ts +++ b/packages/core/tests/index.test.ts @@ -1610,3 +1610,49 @@ describe('createCss: mixed(SSR & Client)', () => { `); }); }); + +describe('strict mode', () => { + test('should not yield type errors when raw values are used even though tokens are defined', () => { + const css = createCss({ + tokens: { + colors: { + primary: 'red', + }, + }, + }); + css({ + color: 'lime', + }); + }); + + test('should yield type errors in strict mode when tokens are defined but raw values are used', () => { + const css = createCss({ + strict: true, + tokens: { + colors: { + primary: 'red', + }, + }, + }); + css({ + color: 'primary', + // @ts-expect-error + backgroundColor: 'red', + }); + }); + + test('should not yield type errors when a token category is missing', () => { + const css = createCss({ + strict: true, + tokens: { + radii: { + tiny: '3px', + }, + }, + }); + css({ + borderRadius: 'tiny', + color: 'lime', // allowed since no color tokens are defined + }); + }); +});