@stylexjs/stylex 0.5.1 → 0.6.1

package/lib/StyleXCSSTypes.d.ts

@@ -48,29 +48,54 @@ type CSSCursor =
   | '-webkit-grab'
   | '-webkit-grabbing';
 type alignContent =
+  | 'center'
+  | 'start'
+  | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'normal'
+  | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
   | 'space-between'
   | 'space-around'
+  | 'space-evenly'
   | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
   | all;
 type alignItems =
+  | 'normal'
+  | 'stretch'
+  | 'center'
   | 'start'
   | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'self-start'
+  | 'self-end'
   | 'baseline'
-  | 'stretch'
+  | 'first baseline'
+  | 'last baseline'
+  | 'safe center'
+  | 'unsafe center'
   | all;
 type alignSelf =
   | 'auto'
+  | 'normal'
+  | 'center'
+  | 'start'
+  | 'end'
+  | 'self-start'
+  | 'self-end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
   | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
   | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
   | all;
 type all = null | 'initial' | 'inherit' | 'unset';
 type animationDelay = time;
@@ -136,7 +161,7 @@ type borderRightColor = color;
 type borderRightStyle = brStyle;
 type borderRightWidth = borderWidth;
 type borderRadius = lengthPercentage;
-type borderSpacing = number;
+type borderSpacing = number | string;
 type borderStyle = brStyle;
 type borderTopLeftRadius = lengthPercentage;
 type borderTopRightRadius = lengthPercentage;
@@ -145,10 +170,10 @@ type borderTopWidth = borderWidth;
 type boxAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 type boxDecorationBreak = 'slice' | 'clone';
 type boxDirection = 'normal' | 'reverse' | 'inherit';
-type boxFlex = number;
-type boxFlexGroup = number;
+type boxFlex = number | string;
+type boxFlexGroup = number | string;
 type boxLines = 'single' | 'multiple';
-type boxOrdinalGroup = number;
+type boxOrdinalGroup = number | string;
 type boxOrient =
   | 'horizontal'
   | 'vertical'
@@ -200,7 +225,7 @@ type captionSide =
 type clear = 'none' | 'left' | 'right' | 'both' | 'inline-start' | 'inline-end';
 type clip = string | 'auto';
 type clipPath = string | 'none';
-type columnCount = number | 'auto';
+type columnCount = number | 'auto' | string;
 type columnFill = 'auto' | 'balance';
 type columnGap = number | string | 'normal';
 type columnRule = columnRuleWidth | columnRuleStyle | columnRuleColor;
@@ -208,7 +233,7 @@ type columnRuleColor = color;
 type columnRuleStyle = brStyle;
 type columnRuleWidth = borderWidth;
 type columnSpan = 'none' | 'all';
-type columnWidth = number | 'auto';
+type columnWidth = number | 'auto' | string;
 type columns = columnWidth | columnCount;
 type contain = 'none' | 'strict' | 'content' | string;
 type content = string;
@@ -276,8 +301,8 @@ type flexDirection =
   | 'column-reverse'
   | 'inherit';
 type flexFlow = flexDirection | flexWrap;
-type flexGrow = number | 'inherit';
-type flexShrink = number | 'inherit';
+type flexGrow = all | number | string;
+type flexShrink = all | number | string;
 type flexWrap = 'nowrap' | 'wrap' | 'wrap-reverse' | 'inherit';
 type float =
   | 'left'
@@ -372,33 +397,63 @@ type initialLetterAlign = string;
 type inlineSize = width;
 type isolation = 'auto' | 'isolate';
 type justifyContent =
+  | 'center'
+  | 'start'
+  | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'left'
+  | 'right'
+  | 'normal'
   | 'space-between'
   | 'space-around'
   | 'space-evenly'
+  | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
   | 'inherit';
 type justifyItems =
+  | 'normal'
+  | 'stretch'
+  | 'center'
   | 'start'
   | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'self-start'
+  | 'self-end'
+  | 'left'
+  | 'right'
   | 'baseline'
-  | 'stretch'
+  | 'first baseline'
+  | 'last baseline'
+  | 'safe center'
+  | 'unsafe center'
+  | 'legacy right'
+  | 'legacy left'
+  | 'legacy center'
   | all;
 type justifySelf =
   | 'auto'
   | 'normal'
   | 'stretch'
-  | baselinePosition
-  | selfPosition
+  | 'center'
+  | 'start'
+  | 'end'
+  | 'flex-start'
+  | 'flex-end'
+  | 'self-start'
+  | 'self-end'
   | 'left'
-  | 'right';
+  | 'right'
+  | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
+  | 'safe center'
+  | 'unsafe center';
 type letterSpacing = 'normal' | lengthPercentage;
 type lineBreak = 'auto' | 'loose' | 'normal' | 'strict';
-type lineHeight = 'inherit' | number;
+type lineHeight = 'inherit' | number | string;
 type listStyle = listStyleType | listStylePosition | listStyleImage;
 type listStyleImage = string | 'none';
 type listStylePosition = 'inside' | 'outside';
@@ -412,7 +467,7 @@ type marginInlineStart = marginLeft;
 type marginLeft = number | string | 'auto';
 type marginRight = number | string | 'auto';
 type marginTop = number | string | 'auto';
-type markerOffset = number | 'auto';
+type markerOffset = number | 'auto' | string;
 type mask = maskLayer;
 type maskClip = string;
 type maskComposite = compositeOperator;
@@ -471,11 +526,11 @@ type MsOverflowStyle =
 type objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 type objectPosition = string;
 type opacity = number | string;
-type order = number;
-type orphans = number;
+type order = number | string;
+type orphans = number | string;
 type outline = string;
 type outlineColor = color | 'invert';
-type outlineOffset = number;
+type outlineOffset = number | string;
 type outlineStyle = 'auto' | brStyle;
 type outlineWidth = borderWidth;
 type overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
@@ -520,18 +575,10 @@ type rubyPosition = 'over' | 'under' | 'inter-character';
 type scrollBehavior = 'auto' | 'smooth';
 type scrollSnapAlign = 'none' | 'start' | 'end' | 'center';
 type scrollSnapType = 'none' | 'x mandatory' | 'y mandatory';
-type selfPosition =
-  | 'center'
-  | 'start'
-  | 'end'
-  | 'self-start'
-  | 'self-end'
-  | 'flex-start'
-  | 'flex-end';
-type shapeImageThreshold = number;
+type shapeImageThreshold = number | string;
 type shapeMargin = lengthPercentage;
 type shapeOutside = 'none' | shapeBox | string;
-type tabSize = number;
+type tabSize = number | string;
 type tableLayout = 'auto' | 'fixed';
 type textAlign =
   | 'start'
@@ -619,7 +666,7 @@ type whiteSpace =
   | 'pre-line'
   | 'initial'
   | 'inherit';
-type widows = number;
+type widows = number | string;
 type width =
   | string
   | number
@@ -653,7 +700,6 @@ type alignmentBaseline =
   | 'alphabetic'
   | 'hanging'
   | 'mathematical';
-type baselinePosition = 'baseline' | 'first baseline' | 'last baseline';
 type baselineShift = 'baseline' | 'sub' | 'super' | svgLength;
 type behavior = string;
 type clipRule = 'nonzero' | 'evenodd';
@@ -674,10 +720,10 @@ type dominantBaseline =
   | 'text-after-edge'
   | 'text-before-edge';
 type fill = paint;
-type fillOpacity = number;
+type fillOpacity = number | string;
 type fillRule = 'nonzero' | 'evenodd';
-type glyphOrientationHorizontal = number;
-type glyphOrientationVertical = number;
+type glyphOrientationHorizontal = number | string;
+type glyphOrientationVertical = number | string;
 type kerning = 'auto' | svgLength;
 type marker = 'none' | string;
 type markerEnd = 'none' | string;
@@ -730,8 +776,8 @@ type strokeDasharray = 'none' | string;
 type strokeDashoffset = svgLength;
 type strokeLinecap = 'butt' | 'round' | 'square';
 type strokeLinejoin = 'miter' | 'round' | 'bevel';
-type strokeMiterlimit = number;
-type strokeOpacity = number;
+type strokeMiterlimit = number | string;
+type strokeOpacity = number | string;
 type strokeWidth = svgLength;
 type textAnchor = 'start' | 'middle' | 'end';
 type unicodeRange = string;
@@ -867,20 +913,20 @@ export type CSSProperties = Readonly<{
     | 'padding-box'
     | 'content-box'
     | 'text';
-  backgroundClip?: all | 'border-box' | 'padding-box' | 'content-box' | 'text';
   WebkitBoxOrient?:
     | null
     | 'vertical'
     | 'horizontal'
     | 'inline-axis'
     | 'block-axis';
-  WebkitLineClamp?: all | number;
+  WebkitLineClamp?: all | number | string;
   accentColor?: all | color;
   aspectRatio?: all | number | string;
   placeContent?: all | string;
   alignContent?: all | alignContent;
   justifyContent?: all | justifyContent;
   placeItems?: all | string;
+  placeSelf?: all | string;
   alignItems?: all | alignItems;
   justifyItems?: all | justifyItems;
   alignSelf?: all | alignSelf;
@@ -1095,9 +1141,6 @@ export type CSSProperties = Readonly<{
   fontVariantNumeric?: all | fontVariantNumeric;
   fontVariantPosition?: all | fontVariantPosition;
   fontWeight?: all | fontWeight;
-  fontFeatureSettings?: all | string;
-  fontKerning?: all | 'auto' | 'normal' | 'none';
-  fontLanguageOverride?: all | string;
   fontOpticalSizing?: all | 'auto' | 'none';
   fontPalette?: all | 'light' | 'dark' | string;
   fontVariationSettings?: all | string;

package/lib/StyleXCSSTypes.js.flow

@@ -49,29 +49,54 @@ type CSSCursor =
   | '-webkit-grabbing';
 
 type alignContent =
+  | 'center'
+  | 'start'
+  | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'normal'
+  | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
   | 'space-between'
   | 'space-around'
+  | 'space-evenly'
   | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
   | all;
 type alignItems =
+  | 'normal'
+  | 'stretch'
+  | 'center'
   | 'start'
   | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'self-start'
+  | 'self-end'
   | 'baseline'
-  | 'stretch'
+  | 'first baseline'
+  | 'last baseline'
+  | 'safe center'
+  | 'unsafe center'
   | all;
 type alignSelf =
   | 'auto'
+  | 'normal'
+  | 'center'
+  | 'start'
+  | 'end'
+  | 'self-start'
+  | 'self-end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
   | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
   | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
   | all;
 type all = null | 'initial' | 'inherit' | 'unset';
 type animationDelay = time;
@@ -138,7 +163,7 @@ type borderRightColor = color;
 type borderRightStyle = brStyle;
 type borderRightWidth = borderWidth;
 type borderRadius = lengthPercentage;
-type borderSpacing = number;
+type borderSpacing = number | string;
 type borderStyle = brStyle;
 type borderTopLeftRadius = lengthPercentage;
 type borderTopRightRadius = lengthPercentage;
@@ -147,10 +172,10 @@ type borderTopWidth = borderWidth;
 type boxAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 type boxDecorationBreak = 'slice' | 'clone';
 type boxDirection = 'normal' | 'reverse' | 'inherit';
-type boxFlex = number;
-type boxFlexGroup = number;
+type boxFlex = number | string;
+type boxFlexGroup = number | string;
 type boxLines = 'single' | 'multiple';
-type boxOrdinalGroup = number;
+type boxOrdinalGroup = number | string;
 type boxOrient =
   | 'horizontal'
   | 'vertical'
@@ -202,7 +227,7 @@ type captionSide =
 type clear = 'none' | 'left' | 'right' | 'both' | 'inline-start' | 'inline-end';
 type clip = string | 'auto';
 type clipPath = string | 'none';
-type columnCount = number | 'auto';
+type columnCount = number | 'auto' | string;
 type columnFill = 'auto' | 'balance';
 type columnGap = number | string | 'normal';
 type columnRule = columnRuleWidth | columnRuleStyle | columnRuleColor;
@@ -210,7 +235,7 @@ type columnRuleColor = color;
 type columnRuleStyle = brStyle;
 type columnRuleWidth = borderWidth;
 type columnSpan = 'none' | 'all';
-type columnWidth = number | 'auto';
+type columnWidth = number | 'auto' | string;
 type columns = columnWidth | columnCount;
 type contain = 'none' | 'strict' | 'content' | string;
 type content = string;
@@ -278,8 +303,8 @@ type flexDirection =
   | 'column-reverse'
   | 'inherit';
 type flexFlow = flexDirection | flexWrap;
-type flexGrow = number | 'inherit';
-type flexShrink = number | 'inherit';
+type flexGrow = all | number | string;
+type flexShrink = all | number | string;
 type flexWrap = 'nowrap' | 'wrap' | 'wrap-reverse' | 'inherit';
 type float =
   | 'left'
@@ -374,21 +399,41 @@ type initialLetterAlign = string;
 type inlineSize = width;
 type isolation = 'auto' | 'isolate';
 type justifyContent =
+  | 'center'
+  | 'start'
+  | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'left'
+  | 'right'
+  | 'normal'
   | 'space-between'
   | 'space-around'
   | 'space-evenly'
+  | 'stretch'
+  | 'safe center'
+  | 'unsafe center'
   | 'inherit';
 type justifyItems =
+  | 'normal'
+  | 'stretch'
+  | 'center'
   | 'start'
   | 'end'
   | 'flex-start'
   | 'flex-end'
-  | 'center'
+  | 'self-start'
+  | 'self-end'
+  | 'left'
+  | 'right'
   | 'baseline'
-  | 'stretch'
+  | 'first baseline'
+  | 'last baseline'
+  | 'safe center'
+  | 'unsafe center'
+  | 'legacy right'
+  | 'legacy left'
+  | 'legacy center'
   | all;
 // There's an optional overflowPosition (safe vs unsafe) prefix to
 // [selfPosition | 'left' | 'right']. It's not used on www, so, it's not added
@@ -397,13 +442,24 @@ type justifySelf =
   | 'auto'
   | 'normal'
   | 'stretch'
-  | baselinePosition
-  | selfPosition
+  | 'center'
+  | 'start'
+  | 'end'
+  | 'flex-start'
+  | 'flex-end'
+  | 'self-start'
+  | 'self-end'
   | 'left'
-  | 'right';
+  | 'right'
+  | 'baseline'
+  | 'first baseline'
+  | 'last baseline'
+  | 'safe center'
+  | 'unsafe center';
+
 type letterSpacing = 'normal' | lengthPercentage;
 type lineBreak = 'auto' | 'loose' | 'normal' | 'strict';
-type lineHeight = 'inherit' | number;
+type lineHeight = 'inherit' | number | string;
 type listStyle = listStyleType | listStylePosition | listStyleImage;
 type listStyleImage = string | 'none';
 type listStylePosition = 'inside' | 'outside';
@@ -417,7 +473,7 @@ type marginInlineStart = marginLeft;
 type marginLeft = number | string | 'auto';
 type marginRight = number | string | 'auto';
 type marginTop = number | string | 'auto';
-type markerOffset = number | 'auto';
+type markerOffset = number | 'auto' | string;
 type mask = maskLayer;
 type maskClip = string;
 type maskComposite = compositeOperator;
@@ -476,11 +532,11 @@ type MsOverflowStyle =
 type objectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
 type objectPosition = string;
 type opacity = number | string;
-type order = number;
-type orphans = number;
+type order = number | string;
+type orphans = number | string;
 type outline = string;
 type outlineColor = color | 'invert';
-type outlineOffset = number;
+type outlineOffset = number | string;
 type outlineStyle = 'auto' | brStyle;
 type outlineWidth = borderWidth;
 type overflow = 'visible' | 'hidden' | 'scroll' | 'auto';
@@ -525,18 +581,10 @@ type rubyPosition = 'over' | 'under' | 'inter-character';
 type scrollBehavior = 'auto' | 'smooth';
 type scrollSnapAlign = 'none' | 'start' | 'end' | 'center';
 type scrollSnapType = 'none' | 'x mandatory' | 'y mandatory';
-type selfPosition =
-  | 'center'
-  | 'start'
-  | 'end'
-  | 'self-start'
-  | 'self-end'
-  | 'flex-start'
-  | 'flex-end';
-type shapeImageThreshold = number;
+type shapeImageThreshold = number | string;
 type shapeMargin = lengthPercentage;
 type shapeOutside = 'none' | shapeBox | string;
-type tabSize = number;
+type tabSize = number | string;
 type tableLayout = 'auto' | 'fixed';
 type textAlign =
   | 'start'
@@ -624,7 +672,7 @@ type whiteSpace =
   | 'pre-line'
   | 'initial'
   | 'inherit';
-type widows = number;
+type widows = number | string;
 type width =
   | string
   | number
@@ -658,7 +706,6 @@ type alignmentBaseline =
   | 'alphabetic'
   | 'hanging'
   | 'mathematical';
-type baselinePosition = 'baseline' | 'first baseline' | 'last baseline';
 type baselineShift = 'baseline' | 'sub' | 'super' | svgLength;
 type behavior = string;
 type clipRule = 'nonzero' | 'evenodd';
@@ -679,10 +726,10 @@ type dominantBaseline =
   | 'text-after-edge'
   | 'text-before-edge';
 type fill = paint;
-type fillOpacity = number;
+type fillOpacity = number | string;
 type fillRule = 'nonzero' | 'evenodd';
-type glyphOrientationHorizontal = number;
-type glyphOrientationVertical = number;
+type glyphOrientationHorizontal = number | string;
+type glyphOrientationVertical = number | string;
 type kerning = 'auto' | svgLength;
 type marker = 'none' | string;
 type markerEnd = 'none' | string;
@@ -735,8 +782,8 @@ type strokeDasharray = 'none' | string;
 type strokeDashoffset = svgLength;
 type strokeLinecap = 'butt' | 'round' | 'square';
 type strokeLinejoin = 'miter' | 'round' | 'bevel';
-type strokeMiterlimit = number;
-type strokeOpacity = number;
+type strokeMiterlimit = number | string;
+type strokeOpacity = number | string;
 type strokeWidth = svgLength;
 type textAnchor = 'start' | 'middle' | 'end';
 type unicodeRange = string;
@@ -887,7 +934,6 @@ export type CSSProperties = $ReadOnly<{
     | 'padding-box'
     | 'content-box'
     | 'text',
-  backgroundClip?: all | 'border-box' | 'padding-box' | 'content-box' | 'text',
 
   WebkitBoxOrient?:
     | null
@@ -895,7 +941,7 @@ export type CSSProperties = $ReadOnly<{
     | 'horizontal'
     | 'inline-axis'
     | 'block-axis',
-  WebkitLineClamp?: all | number,
+  WebkitLineClamp?: all | number | string,
   // ENDOF ...$Exact<SupportedVendorSpecificCSSProperties>,
 
   accentColor?: all | color,
@@ -906,6 +952,7 @@ export type CSSProperties = $ReadOnly<{
   alignContent?: all | alignContent,
   justifyContent?: all | justifyContent,
   placeItems?: all | string,
+  placeSelf?: all | string,
   alignItems?: all | alignItems,
   justifyItems?: all | justifyItems,
   alignSelf?: all | alignSelf,
@@ -1142,9 +1189,6 @@ export type CSSProperties = $ReadOnly<{
   fontWeight?: all | fontWeight,
   // fontHeight?: all | number | string,
   // fontWidth?: all | number | string,
-  fontFeatureSettings?: all | string,
-  fontKerning?: all | 'auto' | 'normal' | 'none',
-  fontLanguageOverride?: all | string,
   fontOpticalSizing?: all | 'auto' | 'none',
   fontPalette?: all | 'light' | 'dark' | string,
   fontVariationSettings?: all | string,

package/lib/StyleXTypes.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type { CSSType } from './VarTypes';
 import type { CSSProperties } from './StyleXCSSTypes';
 
 // Using an opaque type to declare ClassNames generated by stylex.
@@ -86,15 +87,16 @@ export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
 export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
 export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
 
-type ComplexStyleValueType<T> = T extends StyleXVar<infer U>
-  ? U
-  : T extends string | number | null
-    ? T
-    : T extends ReadonlyArray<infer U>
-      ? U
-      : T extends Readonly<{ default: infer A; [cond: CondStr]: infer B }>
-        ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
-        : T;
+type ComplexStyleValueType<T> =
+  T extends StyleXVar<infer U>
+    ? U
+    : T extends string | number | null
+      ? T
+      : T extends ReadonlyArray<infer U>
+        ? U
+        : T extends Readonly<{ default: infer A; [cond: CondStr]: infer B }>
+          ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+          : T;
 
 export type MapNamespace<CSS> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>;
@@ -143,7 +145,7 @@ type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
 // Replace `XStyle` with this.
 export type StaticStyles<
   CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
-> = StyleXArray<false | null | GenStylePropType<CSS>>;
+> = StyleXArray<false | null | undefined | GenStylePropType<CSS>>;
 
 export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
   Omit<CSSPropertiesWithExtras, keyof CSS>
@@ -153,6 +155,7 @@ export type StyleXStyles<
   CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
 > = StyleXArray<
   | null
+  | undefined
   | false
   | GenStylePropType<CSS>
   | Readonly<[GenStylePropType<CSS>, InlineStyles]>
@@ -181,7 +184,7 @@ export type IDFromVarGroup<T extends VarGroup<unknown, unknown>> =
   T['__opaqueId'];
 
 type TTokens = Readonly<{
-  [key: string]: string | { [key: string]: string };
+  [key: string]: CSSType | string | { [key: string]: string };
 }>;
 
 type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;

package/lib/StyleXTypes.js.flow

@@ -7,6 +7,7 @@
  * @flow strict
  */
 
+import type { CSSType } from './VarTypes';
 import type { CSSProperties } from './StyleXCSSTypes';
 
 // Using an opaque type to declare ClassNames generated by stylex.
@@ -61,15 +62,16 @@ export type LegacyThemeStyles = $ReadOnly<{
   ...
 }>;
 
-type ComplexStyleValueType<+T> = T extends StyleXVar<infer U>
-  ? U
-  : T extends string | number | null
-    ? T
-    : T extends $ReadOnlyArray<infer U>
-      ? U
-      : T extends $ReadOnly<{ default: infer A, +[string]: infer B }>
-        ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
-        : $ReadOnly<T>;
+type ComplexStyleValueType<+T> =
+  T extends StyleXVar<infer U>
+    ? U
+    : T extends string | number | null
+      ? T
+      : T extends $ReadOnlyArray<infer U>
+        ? U
+        : T extends $ReadOnly<{ default: infer A, +[string]: infer B }>
+          ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+          : $ReadOnly<T>;
 
 type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
@@ -128,35 +130,41 @@ export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
 // This is the type for the variables object
 declare export opaque type StyleXVar<+Val: mixed>;
 
-declare export opaque type VarGroup<
+export type VarGroup<
   +Tokens: { +[string]: mixed },
   +_ID: string = string,
->: $ReadOnly<{ [Key in keyof Tokens]: StyleXVar<Tokens[Key]> }>;
-
-export type TokensFromVarGroup<T: VarGroup<{ +[string]: mixed }>> =
-  T extends VarGroup<infer Tokens extends { +[string]: mixed }>
-    ? Tokens
-    : empty;
-type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = T extends VarGroup<
-  { +[string]: mixed },
-  infer ID,
->
-  ? ID
-  : empty;
+> = $ReadOnly<{
+  [Key in keyof Tokens]: StyleXVar<Tokens[Key]>,
+}>;
+
+export type TokensFromVarGroup<T: VarGroup<{ +[string]: mixed }>> = $ReadOnly<{
+  [Key in keyof T]: T[Key] extends StyleXVar<infer U> ? U : empty,
+}>;
+
+type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> =
+  T extends VarGroup<{ +[string]: mixed }, infer ID> ? ID : empty;
+
+type NestedVarObject<+T> =
+  | T
+  | $ReadOnly<{
+      default: NestedVarObject<T>,
+      [string]: NestedVarObject<T>,
+    }>;
 
 type TTokens = $ReadOnly<{
   [string]:
-    | number
-    | string
-    | $ReadOnly<{ default: number | string, [string]: number | string }>
-    | StyleXVar<string | number>,
+    | NestedVarObject<string | number>
+    | StyleXVar<string | number>
+    | CSSType<string | number>,
 }>;
 
 type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
 export type FlattenTokens<T: TTokens> = {
-  +[Key in keyof T]: T[Key] extends { +default: infer X, +[string]: infer Y }
-    ? UnwrapVars<X | Y>
-    : UnwrapVars<T[Key]>,
+  +[Key in keyof T]: T[Key] extends CSSType<string | number>
+    ? UnwrapVars<T[Key]>
+    : T[Key] extends { +default: infer X, +[string]: infer Y }
+      ? UnwrapVars<X | Y>
+      : UnwrapVars<T[Key]>,
 };
 
 export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(

package/lib/VarTypes.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+export type ValueWithDefault<T> =
+  | T
+  | Readonly<{
+      default: ValueWithDefault<T>;
+      [$$Key$$: string]: ValueWithDefault<T>;
+    }>;
+export type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+type CSSSyntaxType = CSSSyntax;
+interface ICSSType<_T extends string | number> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Angle<T extends string | 0> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Color<T extends string> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Url<T extends string> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Image<T extends string> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Integer<T extends string | number> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class LengthPercentage<T extends string | number>
+  implements ICSSType<T>
+{
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Length<T extends string | number> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Percentage<T extends string | number>
+  implements ICSSType<T>
+{
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Num<T extends string | number> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Resolution<T extends string> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class Time<T extends string | 0> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class TransformFunction<T extends string>
+  implements ICSSType<T>
+{
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export declare class TransformList<T extends string> implements ICSSType<T> {
+  readonly value: ValueWithDefault<string>;
+  readonly syntax: CSSSyntaxType;
+}
+export type CSSType<T extends string | number> =
+  | Angle<T>
+  | Color<T>
+  | Url<T>
+  | Image<T>
+  | Integer<T>
+  | LengthPercentage<T>
+  | Length<T>
+  | Percentage<T>
+  | Num<T>
+  | Resolution<T>
+  | Time<T>
+  | TransformFunction<T>
+  | TransformList<T>;

package/lib/VarTypes.js

@@ -0,0 +1 @@
+"use strict";

package/lib/VarTypes.js.flow

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+export type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: ValueWithDefault<T>,
+      [string]: ValueWithDefault<T>,
+    }>;
+
+export type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+
+type CSSSyntaxType = CSSSyntax;
+
+interface ICSSType<+_T: string | number> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+
+declare export class Angle<+T: string | 0> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Color<+T: string> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Url<+T: string> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Image<+T: string> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Integer<+T: string | number> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class LengthPercentage<+T: string | number>
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Length<+T: string | number> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Percentage<+T: string | number> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Num<+T: string | number> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Resolution<+T: string> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class Time<+T: string | 0> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class TransformFunction<+T: string> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+declare export class TransformList<+T: string> implements ICSSType<T> {
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+}
+
+export type CSSType<+T: string | number> =
+  | Angle<T>
+  | Color<T>
+  | Url<T>
+  | Image<T>
+  | Integer<T>
+  | LengthPercentage<T>
+  | Length<T>
+  | Percentage<T>
+  | Num<T>
+  | Resolution<T>
+  | Time<T>
+  | TransformFunction<T>
+  | TransformList<T>;

package/lib/stylex.d.ts

@@ -17,6 +17,22 @@ import type {
   InlineStyles,
   StyleXClassNameFor,
 } from './StyleXTypes';
+import type {
+  ValueWithDefault,
+  Angle,
+  Color,
+  Url,
+  Image,
+  Integer,
+  LengthPercentage,
+  Length,
+  Percentage,
+  Num,
+  Resolution,
+  Time,
+  TransformFunction,
+  TransformList,
+} from './VarTypes';
 export type {
   VarGroup,
   Theme,
@@ -65,57 +81,38 @@ export declare const create: Stylex$Create;
 export declare const defineVars: StyleX$DefineVars;
 export declare const createTheme: StyleX$CreateTheme;
 export declare const include: Stylex$Include;
-type ValueWithDefault<T> =
-  | T
-  | Readonly<{
-      readonly default: T;
-      readonly [$$Key$$: string]: ValueWithDefault<T>;
-    }>;
-type CSSSyntax =
-  | '*'
-  | '<length>'
-  | '<number>'
-  | '<percentage>'
-  | '<length-percentage>'
-  | '<color>'
-  | '<image>'
-  | '<url>'
-  | '<integer>'
-  | '<angle>'
-  | '<time>'
-  | '<resolution>'
-  | '<transform-function>'
-  | '<custom-ident>'
-  | '<transform-list>';
-type CSSSyntaxType = CSSSyntax | ReadonlyArray<CSSSyntax>;
-interface ICSSType<T extends string | number> {
-  readonly value: ValueWithDefault<T>;
-  readonly syntax: CSSSyntaxType;
-}
 export declare const types: {
-  angle: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  color: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  url: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  image: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  integer: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  lengthPercentage: <T extends number | string>(
+  angle: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Angle<T>;
+  color: <T extends string = string>(_v: ValueWithDefault<T>) => Color<T>;
+  url: <T extends string = string>(_v: ValueWithDefault<T>) => Url<T>;
+  image: <T extends string = string>(_v: ValueWithDefault<T>) => Image<T>;
+  integer: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Integer<T>;
+  lengthPercentage: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => LengthPercentage<T>;
+  length: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Length<T>;
+  percentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
-  length: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  percentage: <T extends number | string>(
+  ) => Percentage<T>;
+  number: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
-  number: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  resolution: <T extends number | string>(
+  ) => Num<T>;
+  resolution: <T extends string = string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
-  time: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  transformFunction: <T extends number | string>(
+  ) => Resolution<T>;
+  time: <T extends string | 0 = string | 0>(_v: ValueWithDefault<T>) => Time<T>;
+  transformFunction: <T extends string = string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
-  transformList: <T extends number | string>(
+  ) => TransformFunction<T>;
+  transformList: <T extends string = string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
+  ) => TransformList<T>;
 };
 export declare const keyframes: (keyframes: Keyframes) => string;
 export declare const firstThatWorks: <T extends string | number>(

package/lib/stylex.js.flow

@@ -17,6 +17,22 @@ import type {
   InlineStyles,
   StyleXClassNameFor,
 } from './StyleXTypes';
+import type {
+  ValueWithDefault,
+  Angle,
+  Color,
+  Url,
+  Image,
+  Integer,
+  LengthPercentage,
+  Length,
+  Percentage,
+  Num,
+  Resolution,
+  Time,
+  TransformFunction,
+  TransformList,
+} from './VarTypes';
 
 export type {
   VarGroup,
@@ -70,55 +86,34 @@ declare export const createTheme: StyleX$CreateTheme;
 
 declare export const include: Stylex$Include;
 
-type ValueWithDefault<+T> =
-  | T
-  | $ReadOnly<{
-      +default: T,
-      +[string]: ValueWithDefault<T>,
-    }>;
-
-type CSSSyntax =
-  | '*'
-  | '<length>'
-  | '<number>'
-  | '<percentage>'
-  | '<length-percentage>'
-  | '<color>'
-  | '<image>'
-  | '<url>'
-  | '<integer>'
-  | '<angle>'
-  | '<time>'
-  | '<resolution>'
-  | '<transform-function>'
-  | '<custom-ident>'
-  | '<transform-list>';
-
-type CSSSyntaxType = CSSSyntax | $ReadOnlyArray<CSSSyntax>;
-
-interface ICSSType<+T: string | number> {
-  +value: ValueWithDefault<T>;
-  +syntax: CSSSyntaxType;
-}
-
 declare export const types: {
-  angle: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  color: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  url: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  image: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  integer: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  lengthPercentage: <T: number | string>(
+  angle: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Angle<T>,
+  color: <T: string = string>(_v: ValueWithDefault<T>) => Color<T>,
+  url: <T: string = string>(_v: ValueWithDefault<T>) => Url<T>,
+  image: <T: string = string>(_v: ValueWithDefault<T>) => Image<T>,
+  integer: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Integer<T>,
+  lengthPercentage: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => LengthPercentage<T>,
+  length: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Length<T>,
+  percentage: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Percentage<T>,
+  number: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Num<T>,
+  resolution: <T: string = string>(_v: ValueWithDefault<T>) => Resolution<T>,
+  time: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Time<T>,
+  transformFunction: <T: string = string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>,
-  length: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  percentage: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  number: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  resolution: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  time: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
-  transformFunction: <T: number | string>(
+  ) => TransformFunction<T>,
+  transformList: <T: string = string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>,
-  transformList: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
+  ) => TransformList<T>,
 };
 
 declare export const keyframes: (keyframes: Keyframes) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -32,8 +32,8 @@
   "license": "MIT",
   "scripts": {
     "prebuild": "gen-types -i src/ -o lib/",
-    "build:cjs": "BABEL_ENV=cjs babel src/ --out-dir lib/ --copy-files",
-    "build:esm": "BABEL_ENV=esm babel src/ --out-dir lib/es --out-file-extension .mjs",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src/ --out-dir lib/ --copy-files",
+    "build:esm": "cross-env BABEL_ENV=esm babel src/ --out-dir lib/es --out-file-extension .mjs",
     "postbuild:esm": "rollup -c ./rollup.config.mjs",
     "build": "npm run build:cjs && npm run build:esm",
     "build-haste": "rewrite-imports -i src/ -o lib/",
@@ -42,11 +42,11 @@
   "dependencies": {
     "css-mediaquery": "^0.1.2",
     "invariant": "^2.2.4",
-    "styleq": "0.1.3",
-    "utility-types": "^3.10.0"
+    "styleq": "0.1.3"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.5.1"
+    "@stylexjs/scripts": "0.6.1",
+    "cross-env": "^7.0.3"
   },
   "jest": {},
   "files": [