From d8033f658b7da9ab7c7e409ddab022ae58084817 Mon Sep 17 00:00:00 2001
From: Pedro Duarte <contact@peduarte.com>
Date: Thu, 10 Sep 2020 16:12:22 +0200
Subject: [PATCH] Strict mode and review CSS Types

---
 packages/core/src/css-types.ts    | 203 +++++++++++-------
 packages/core/src/types.ts        | 336 +++++++++++++++++++++---------
 packages/core/tests/index.test.ts |  46 ++++
 3 files changed, 408 insertions(+), 177 deletions(-)

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<TLength> = Globals | LineWidth<TLength>;
+export type BorderBlockEndWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
 export type BorderBlockStartProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
 
@@ -6393,67 +6393,79 @@ export type BorderBlockStartColorProperty = Globals | Color;
 
 export type BorderBlockStartStyleProperty = Globals | LineStyle;
 
-export type BorderBlockStartWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderBlockStartWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
 export type BorderBlockStyleProperty = Globals | LineStyle;
 
-export type BorderBlockWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderBlockWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
 export type BorderBottomProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
 
 export type BorderBottomColorProperty = Globals | Color;
 
-export type BorderBottomLeftRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderBottomLeftRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type BorderBottomRightRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderBottomRightRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
 export type BorderBottomStyleProperty = Globals | LineStyle;
 
-export type BorderBottomWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderBottomWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
 export type BorderCollapseProperty = Globals | 'collapse' | 'separate';
 
 export type BorderColorProperty = Globals | Color | (string & {});
 
-export type BorderEndEndRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderEndEndRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type BorderEndStartRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderEndStartRadiusProperty<TLength> = 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<TLength> = Globals | TLength | (string & {}) | number;
+export type BorderImageOutsetProperty<TLength> = 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<TLength> = Globals | TLength | 'auto' | (string & {}) | number;
+export type BorderImageWidthProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
 export type BorderInlineProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
 
 export type BorderInlineColorProperty = Globals | Color | (string & {});
 
-export type BorderInlineEndProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
+export type BorderInlineEndProperty<TLength> =
+  | Globals
+  | LineWidth<TLength>
+  | LineStyle
+  | Color
+  | number
+  | (string & {});
 
 export type BorderInlineEndColorProperty = Globals | Color;
 
 export type BorderInlineEndStyleProperty = Globals | LineStyle;
 
-export type BorderInlineEndWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderInlineEndWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
-export type BorderInlineStartProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
+export type BorderInlineStartProperty<TLength> =
+  | Globals
+  | LineWidth<TLength>
+  | LineStyle
+  | Color
+  | number
+  | (string & {});
 
 export type BorderInlineStartColorProperty = Globals | Color;
 
 export type BorderInlineStartStyleProperty = Globals | LineStyle;
 
-export type BorderInlineStartWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderInlineStartWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
 export type BorderInlineStyleProperty = Globals | LineStyle;
 
-export type BorderInlineWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderInlineWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
 export type BorderLeftProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
 
@@ -6461,41 +6473,48 @@ export type BorderLeftColorProperty = Globals | Color;
 
 export type BorderLeftStyleProperty = Globals | LineStyle;
 
-export type BorderLeftWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderLeftWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
-export type BorderRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type BorderRightProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
+export type BorderRightProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | number | (string & {});
 
 export type BorderRightColorProperty = Globals | Color;
 
 export type BorderRightStyleProperty = Globals | LineStyle;
 
-export type BorderRightWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderRightWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
-export type BorderSpacingProperty<TLength> = Globals | TLength | (string & {});
+export type BorderSpacingProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type BorderStartEndRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderStartEndRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type BorderStartStartRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderStartStartRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
 export type BorderStyleProperty = Globals | LineStyle | (string & {});
 
-export type BorderTopProperty<TLength> = Globals | LineWidth<TLength> | LineStyle | Color | (string & {});
+export type BorderTopProperty<TLength> =
+  | Globals
+  | LineWidth<TLength>
+  | LineStyle
+  | Color
+  | number
+  | number
+  | (string & {});
 
 export type BorderTopColorProperty = Globals | Color;
 
-export type BorderTopLeftRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderTopLeftRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type BorderTopRightRadiusProperty<TLength> = Globals | TLength | (string & {});
+export type BorderTopRightRadiusProperty<TLength> = Globals | TLength | number | (string & {});
 
 export type BorderTopStyleProperty = Globals | LineStyle;
 
-export type BorderTopWidthProperty<TLength> = Globals | LineWidth<TLength>;
+export type BorderTopWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
-export type BorderWidthProperty<TLength> = Globals | LineWidth<TLength> | (string & {});
+export type BorderWidthProperty<TLength> = Globals | LineWidth<TLength> | number | (string & {});
 
-export type BottomProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type BottomProperty<TLength> = 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<TLength> = Globals | AbsoluteSize | TLength | 'larger' | 'smaller' | (string & {});
+export type FontSizeProperty<TLength> =
+  | 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<TLength> = Globals | TLength | 'normal' | (string & {});
+export type GapProperty<TLength> = 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<TLength> = Globals | TLength | (string & {});
+export type GridColumnGapProperty<TLength> = Globals | TLength | number | (string & {});
 
 export type GridColumnStartProperty = Globals | GridLine;
 
-export type GridGapProperty<TLength> = Globals | TLength | (string & {});
+export type GridGapProperty<TLength> = Globals | TLength | number | (string & {});
 
 export type GridRowProperty = Globals | GridLine | (string & {});
 
 export type GridRowEndProperty = Globals | GridLine;
 
-export type GridRowGapProperty<TLength> = Globals | TLength | (string & {});
+export type GridRowGapProperty<TLength> = Globals | TLength | number | (string & {});
 
 export type GridRowStartProperty = Globals | GridLine;
 
@@ -6971,15 +6997,15 @@ export type JustifySelfProperty =
   | 'stretch'
   | (string & {});
 
-export type LeftProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type LeftProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type LetterSpacingProperty<TLength> = Globals | TLength | 'normal';
+export type LetterSpacingProperty<TLength> = Globals | TLength | 'normal' | number | (string & {});
 
 export type LineBreakProperty = Globals | 'anywhere' | 'auto' | 'loose' | 'normal' | 'strict';
 
 export type LineClampProperty = Globals | 'none' | number;
 
-export type LineHeightProperty<TLength> = Globals | TLength | 'normal' | (string & {}) | number;
+export type LineHeightProperty<TLength> = Globals | TLength | 'normal' | number | (string & {});
 
 export type LineHeightStepProperty<TLength> = Globals | TLength;
 
@@ -6995,39 +7021,40 @@ export type MarginProperty<TLength> =
   | 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<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginBlockProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginBlockEndProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginBlockEndProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginBlockStartProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginBlockStartProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginBottomProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginBottomProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginInlineProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginInlineProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginInlineEndProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginInlineEndProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginInlineStartProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginInlineStartProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginLeftProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginLeftProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginRightProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginRightProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
-export type MarginTopProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type MarginTopProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
 export type MaskProperty<TLength> = Globals | MaskLayer<TLength> | (string & {});
 
@@ -7084,6 +7111,7 @@ export type MaxBlockSizeProperty<TLength> =
   | 'max-content'
   | 'min-content'
   | 'none'
+  | number
   | (string & {});
 
 export type MaxHeightProperty<TLength> =
@@ -7101,6 +7129,7 @@ export type MaxHeightProperty<TLength> =
   | 'max-content'
   | 'min-content'
   | 'none'
+  | number
   | (string & {});
 
 export type MaxInlineSizeProperty<TLength> =
@@ -7115,6 +7144,7 @@ export type MaxInlineSizeProperty<TLength> =
   | 'max-content'
   | 'min-content'
   | 'none'
+  | number
   | (string & {});
 
 export type MaxLinesProperty = Globals | 'none' | number;
@@ -7134,6 +7164,7 @@ export type MaxWidthProperty<TLength> =
   | 'max-content'
   | 'min-content'
   | 'none'
+  | number
   | (string & {});
 
 export type MinBlockSizeProperty<TLength> =
@@ -7147,6 +7178,7 @@ export type MinBlockSizeProperty<TLength> =
   | 'fit-content'
   | 'max-content'
   | 'min-content'
+  | number
   | (string & {});
 
 export type MinHeightProperty<TLength> =
@@ -7164,6 +7196,7 @@ export type MinHeightProperty<TLength> =
   | 'intrinsic'
   | 'max-content'
   | 'min-content'
+  | number
   | (string & {});
 
 export type MinInlineSizeProperty<TLength> =
@@ -7178,6 +7211,7 @@ export type MinInlineSizeProperty<TLength> =
   | 'fit-content'
   | 'max-content'
   | 'min-content'
+  | number
   | (string & {});
 
 export type MinWidthProperty<TLength> =
@@ -7197,13 +7231,21 @@ export type MinWidthProperty<TLength> =
   | 'max-content'
   | 'min-content'
   | 'min-intrinsic'
+  | number
   | (string & {});
 
 export type MixBlendModeProperty = Globals | BlendMode;
 
-export type OffsetProperty<TLength> = Globals | Position<TLength> | GeometryBox | 'auto' | 'none' | (string & {});
+export type OffsetProperty<TLength> =
+  | Globals
+  | Position<TLength>
+  | GeometryBox
+  | 'auto'
+  | 'none'
+  | number
+  | (string & {});
 
-export type OffsetDistanceProperty<TLength> = Globals | TLength | (string & {});
+export type OffsetDistanceProperty<TLength> = 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<TLength> =
   | 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<TLength> = Globals | TLength | (string & {});
+export type PaddingBlockProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingBlockEndProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingBlockEndProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingBlockStartProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingBlockStartProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingBottomProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingBottomProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingInlineProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingInlineProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingInlineEndProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingInlineEndProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingInlineStartProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingInlineStartProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingLeftProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingLeftProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingRightProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingRightProperty<TLength> = Globals | TLength | number | (string & {});
 
-export type PaddingTopProperty<TLength> = Globals | TLength | (string & {});
+export type PaddingTopProperty<TLength> = 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<TLength> = Globals | TLength | 'auto' | (string & {});
+export type RightProperty<TLength> = Globals | TLength | 'auto' | number | (string & {});
 
 export type RotateProperty = Globals | 'none' | (string & {});
 
@@ -7510,7 +7557,7 @@ export type TextEmphasisStyleProperty =
   | 'triangle'
   | (string & {});
 
-export type TextIndentProperty<TLength> = Globals | TLength | (string & {});
+export type TextIndentProperty<TLength> = Globals | TLength | number | (string & {});
 
 export type TextJustifyProperty = Globals | 'auto' | 'inter-character' | 'inter-word' | 'none';
 
@@ -7537,7 +7584,7 @@ export type TextUnderlineOffsetProperty<TLength> = Globals | TLength | 'auto' |
 
 export type TextUnderlinePositionProperty = Globals | 'auto' | 'left' | 'right' | 'under' | (string & {});
 
-export type TopProperty<TLength> = Globals | TLength | 'auto' | (string & {});
+export type TopProperty<TLength> = 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<T extends TConfig> = {
     : Properties[K] | number;
 };
 
-export type TRecursiveCss<T extends TConfig> =
-  | TTopCss<T>
+export type TRecursiveCss<T extends TConfig, D = TFlatCSS<T>> = (
+  | D
   | {
-      [selector: string]: TRecursiveCss<T>;
-    };
+      [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<T>
-      ? ICssPropToToken<T>[K] | Properties[K]
-      : Properties[K];
-  }
-> = D;
+export type TFlatCSS<T extends TConfig> = {
+  [K in keyof Properties]?: K extends keyof ICssPropToToken<T>
+    ? T extends { strict: true }
+      ? ICssPropToToken<T>[K]
+      : ICssPropToToken<T>[K] | Properties[K]
+    : Properties[K];
+};
 
 export type TFlatUtils<
   T extends TConfig,
@@ -90,19 +177,25 @@ export type TUtility<A extends any, T extends TConfig> = (config: T) => (arg: A)
 
 export type ICssPropToToken<T extends TConfig> = 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<never>;
+      gridGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridGapProperty<never>;
+      columnGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridColumnGapProperty<never>;
+      gridColumnGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridColumnGapProperty<never>;
+      rowGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridRowGapProperty<never>;
+      gridRowGap: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : GridRowGapProperty<never>;
+      inset: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetProperty<never>;
+      insetBlock: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetBlockProperty<never>;
+      insetBlockEnd: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetBlockEndProperty<never>;
+      insetBlockStart: T['tokens']['colors'] extends object
+        ? keyof T['tokens']['colors']
+        : InsetBlockStartProperty<never>;
+      insetInline: T['tokens']['colors'] extends object ? keyof T['tokens']['colors'] : InsetInlineEndProperty<never>;
+      insetInlineEnd: T['tokens']['colors'] extends object
+        ? keyof T['tokens']['colors']
+        : InsetInlineEndProperty<never>;
+      insetInlineStart: T['tokens']['colors'] extends object
+        ? keyof T['tokens']['colors']
+        : InsetInlineStartProperty<never>;
       margin: T['tokens']['space'] extends object
         ?
             | keyof T['tokens']['space']
@@ -114,17 +207,23 @@ export type ICssPropToToken<T extends TConfig> = 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<never>;
+      marginTop: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginTopProperty<never>;
+      marginRight: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginRightProperty<never>;
+      marginBottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginBottomProperty<never>;
+      marginLeft: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginLeftProperty<never>;
+      marginInline: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginInlineProperty<never>;
+      marginInlineEnd: T['tokens']['space'] extends object
+        ? keyof T['tokens']['space']
+        : MarginInlineEndProperty<never>;
+      marginInlineStart: T['tokens']['space'] extends object
+        ? keyof T['tokens']['space']
+        : MarginInlineStartProperty<never>;
+      marginBlock: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginBlockProperty<never>;
+      marginBlockEnd: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : MarginBlockEndProperty<never>;
+      marginBlockStart: T['tokens']['space'] extends object
+        ? keyof T['tokens']['space']
+        : MarginBlockStartProperty<never>;
       padding: T['tokens']['space'] extends object
         ?
             | keyof T['tokens']['space']
@@ -136,76 +235,114 @@ export type ICssPropToToken<T extends TConfig> = 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<never>;
+      paddingTop: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingTopProperty<never>;
+      paddingRight: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingRightProperty<never>;
+      paddingBottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingBottomProperty<never>;
+      paddingLeft: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingLeftProperty<never>;
+      paddingInline: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingInlineProperty<never>;
+      paddingInlineEnd: T['tokens']['space'] extends object
+        ? keyof T['tokens']['space']
+        : PaddingInlineEndProperty<never>;
+      paddingInlineStart: T['tokens']['space'] extends object
+        ? keyof T['tokens']['space']
+        : PaddingInlineStartProperty<never>;
+      paddingBlock: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : PaddingBlockProperty<never>;
+      paddingBlockEnd: T['tokens']['space'] extends object
+        ? keyof T['tokens']['space']
+        : PaddingBlockEndProperty<never>;
+      paddingBlockStart: T['tokens']['space'] extends object
+        ? keyof T['tokens']['space']
+        : PaddingBlockStartProperty<never>;
+      top: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : TopProperty<never>;
+      right: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : RightProperty<never>;
+      bottom: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : BottomProperty<never>;
+      left: T['tokens']['space'] extends object ? keyof T['tokens']['space'] : LeftProperty<never>;
+      fontSize: T['tokens']['fontSizes'] extends object ? keyof T['tokens']['fontSizes'] : FontSizeProperty<never>;
+      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<never>;
+      letterSpacing: T['tokens']['letterSpacings'] extends object
+        ? keyof T['tokens']['letterSpacings']
+        : LetterSpacingProperty<never>;
+      blockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : BlockSizeProperty<never>;
+      minBlockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinBlockSizeProperty<never>;
+      maxBlockSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxBlockSizeProperty<never>;
+      inlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : InlineSizeProperty<never>;
+      minInlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinInlineSizeProperty<never>;
+      maxInlineSize: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxInlineSizeProperty<never>;
+      width: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : WidthProperty<never>;
+      minWidth: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinWidthProperty<never>;
+      maxWidth: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxWidthProperty<never>;
+      height: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : HeightProperty<never>;
+      minHeight: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MinHeightProperty<never>;
+      maxHeight: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : MaxHeightProperty<never>;
+      flexBasis: T['tokens']['sizes'] extends object ? keyof T['tokens']['sizes'] : FlexBasisProperty<never>;
       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<never>;
+      borderTopWidth: T['tokens']['borderWidths'] extends object
+        ? keyof T['tokens']['borderWidths']
+        : BorderTopWidthProperty<never>;
+      borderLeftWidth: T['tokens']['borderWidths'] extends object
+        ? keyof T['tokens']['borderWidths']
+        : BorderLeftWidthProperty<never>;
+      borderRightWidth: T['tokens']['borderWidths'] extends object
+        ? keyof T['tokens']['borderWidths']
+        : BorderRightWidthProperty<never>;
+      borderBottomWidth: T['tokens']['borderWidths'] extends object
+        ? keyof T['tokens']['borderWidths']
+        : BorderBottomWidthProperty<never>;
+      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<never>;
+      borderTopLeftRadius: T['tokens']['radii'] extends object
+        ? keyof T['tokens']['radii']
+        : BorderTopLeftRadiusProperty<never>;
+      borderTopRightRadius: T['tokens']['radii'] extends object
+        ? keyof T['tokens']['radii']
+        : BorderTopRightRadiusProperty<never>;
+      borderBottomRightRadius: T['tokens']['radii'] extends object
+        ? keyof T['tokens']['radii']
+        : BorderBottomRightRadiusProperty<never>;
+      borderBottomLeftRadius: T['tokens']['radii'] extends object
+        ? keyof T['tokens']['radii']
+        : BorderBottomLeftRadiusProperty<never>;
       boxShadow: T['tokens']['shadows'] extends object
         ? keyof T['tokens']['shadows']
         : [
@@ -214,8 +351,8 @@ export type ICssPropToToken<T extends TConfig> = 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<STRICT_MODE extends boolean = false> = {
   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
+    });
+  });
+});