@stylexjs/stylex - npm Package Compare versions

Comparing version 0.2.0-beta.20 to 0.2.0-beta.21

lib/native/__tests__/stylex-test.js

@@ -135,2 +135,9 @@ "use strict";
         height: 100
+      },
+      auto: {
+        boxSizing: "content-box",
+        borderWidth: 2,
+        padding: 10,
+        height: 50,
+        width: "auto"
       }
@@ -146,2 +153,3 @@ });
     expect(_stylex.stylex.spread(styles.allDifferent, mockOptions)).toMatchSnapshot("allDifferent");
+    expect(_stylex.stylex.spread(styles.auto, mockOptions)).toMatchSnapshot("auto");
   });
@@ -148,0 +156,0 @@ test("direction", () => {

lib/native/CSSCustomPropertyValue.d.ts

@@ -10,6 +10,18 @@ /**
 
-export declare function isCustomPropertyValue(value: unknown): boolean;
+/**
+ * Either create a custom property value or return null if the input is not a string
+ * containing a 'var(--name)' or 'var(--name, default)' sequence.
+ *
+ * Made this a single function to test and create to avoid parsing the RegExp twice.
+ */
+export declare function createCSSCustomPropertyValue(
+  value: string,
+): CSSCustomPropertyValue | null;
+/**
+ * Class representing a custom property value with an optional fallback.
+ */
 export declare class CSSCustomPropertyValue {
   name: string;
-  constructor(value: string);
+  defaultValue: unknown;
+  constructor(kebabCasePropName: string, fallback: unknown);
 }

lib/native/CSSCustomPropertyValue.js

@@ -7,20 +7,22 @@ "use strict";
 exports.CSSCustomPropertyValue = void 0;
-exports.isCustomPropertyValue = isCustomPropertyValue;
-const CUSTOM_PROPERTY_REGEX = /^var\(--(.+)\)$/;
+exports.createCSSCustomPropertyValue = createCSSCustomPropertyValue;
+const CUSTOM_PROPERTY_REGEX = /^var\(--([\w-]+) *(?:\)|, *(.+)\))$/;
 function camelize(s) {
   return s.replace(/-./g, x => x.toUpperCase()[1]);
 }
-function isCustomPropertyValue(value) {
-  return typeof value === "string" && CUSTOM_PROPERTY_REGEX.test(value);
+function createCSSCustomPropertyValue(value) {
+  if (typeof value === "string") {
+    const match = CUSTOM_PROPERTY_REGEX.exec(value);
+    if (match) {
+      return new CSSCustomPropertyValue(match[1], match[2]);
+    }
+  }
+  return null;
 }
 class CSSCustomPropertyValue {
-  constructor(value) {
-    const found = value.match(CUSTOM_PROPERTY_REGEX);
-    if (found == null) {
-      throw new Error("[stylex]: Unable to find custom property reference in input string");
-    }
-    const [, kebabCasePropName] = found;
+  constructor(kebabCasePropName, fallback) {
     this.name = camelize(kebabCasePropName);
+    this.defaultValue = fallback ?? null;
   }
 }
 exports.CSSCustomPropertyValue = CSSCustomPropertyValue;

lib/native/CSSLengthUnitValue.d.ts

@@ -10,2 +10,3 @@ /**
 
+import type { SpreadOptions } from './SpreadOptions';
 type CSSLengthUnitType = 'em' | 'px' | 'rem' | 'vh' | 'vmax' | 'vmin' | 'vw';
@@ -17,8 +18,3 @@ export declare class CSSLengthUnitValue {
   constructor(value: number, unit: CSSLengthUnitType);
-  resolvePixelValue(
-    viewportWidth: number,
-    viewportHeight: number,
-    fontScale: number,
-    inheritedFontSize: null | undefined | number,
-  ): number;
+  resolvePixelValue(options: SpreadOptions): number;
 }

lib/native/CSSLengthUnitValue.js

@@ -22,3 +22,9 @@ "use strict";
   }
-  resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize) {
+  resolvePixelValue(options) {
+    const {
+      viewportWidth,
+      viewportHeight,
+      fontScale = 1,
+      inheritedFontSize
+    } = options;
     const unit = this.unit;
@@ -25,0 +31,0 @@ const value = this.value;

lib/native/fixContentBox.js

@@ -45,2 +45,6 @@ "use strict";
       }
+      if (styleValue === "auto") {
+        nextStyle[styleProp] = styleValue;
+        continue;
+      }
       if (typeof styleValue !== "number") {
@@ -47,0 +51,0 @@ (0, _errorMsg.warnMsg)(`"boxSizing:'content-box'" does not support value "${String(styleValue)}" for property "${styleProp}". Expected a value that resolves to a number. Percentage values can only be used with "boxSizing:'border-box'".`);

lib/native/stylex.d.ts

@@ -10,2 +10,3 @@ /**
 
+import { type SpreadOptions } from './SpreadOptions';
 /**
@@ -27,17 +28,6 @@ * The create method shim should do initial transforms like
  */
-/**
- * The spread method shim
- */
-type SpreadOptions = {
-  customProperties: {};
-  inheritedFontSize: null | undefined | number;
-  fontScale: number | void;
-  passthroughProperties: Array<string>;
-  viewportHeight: number;
-  viewportWidth: number;
-  writingDirection: 'ltr' | 'rtl';
-};
+
 export declare function spread(
   style: null | undefined | { [key: string]: unknown },
-  $$PARAM_1$$: SpreadOptions,
+  options: SpreadOptions,
 ): { [$$Key$$: string]: {} };
@@ -44,0 +34,0 @@ export type IStyleX = {

lib/native/stylex.js

@@ -42,8 +42,9 @@ "use strict";
   if (typeof propValue === "string") {
-    if ((0, _CSSCustomPropertyValue.isCustomPropertyValue)(propValue)) {
-      return new _CSSCustomPropertyValue.CSSCustomPropertyValue(propValue);
+    const customPropValue = (0, _CSSCustomPropertyValue.createCSSCustomPropertyValue)(propValue);
+    if (customPropValue != null) {
+      return customPropValue;
     }
     const maybeLengthUnitValue = _CSSLengthUnitValue.CSSLengthUnitValue.parse(propValue);
     if (maybeLengthUnitValue != null) {
-      return new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
+      return maybeLengthUnitValue[1] === "px" ? maybeLengthUnitValue[0] : new _CSSLengthUnitValue.CSSLengthUnitValue(...maybeLengthUnitValue);
     }
@@ -119,2 +120,18 @@ }
 }
+function finalizeValue(unfinalizedValue, options) {
+  let styleValue = unfinalizedValue;
+  while (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
+    const customProperties = options.customProperties || {};
+    const resolvedValue = customProperties[styleValue.name] ?? styleValue.defaultValue;
+    if (resolvedValue == null) {
+      (0, _errorMsg.errorMsg)(`Unrecognized custom property "--${styleValue.name}"`);
+      return null;
+    }
+    styleValue = preprocessPropertyValue(resolvedValue);
+  }
+  if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
+    styleValue = styleValue.resolvePixelValue(options);
+  }
+  return styleValue;
+}
 function create(styles) {
@@ -135,13 +152,4 @@ const result = {};
 const timeValuedProperties = ["animationDelay", "animationDuration", "transitionDelay", "transitionDuration"];
-function spread(style, _ref) {
+function spread(style, options) {
   let {
-    customProperties = {},
-    inheritedFontSize,
-    fontScale = 1,
-    passthroughProperties = [],
-    viewportHeight,
-    viewportWidth,
-    writingDirection
-  } = _ref;
-  let {
     lineClamp,
@@ -153,2 +161,8 @@ ...flatStyle
   };
+  const {
+    passthroughProperties = [],
+    viewportHeight,
+    viewportWidth,
+    writingDirection
+  } = options;
   const nativeProps = {};
@@ -167,15 +181,7 @@ for (const styleProp in flatStyle) {
     }
-    if (styleValue instanceof _CSSCustomPropertyValue.CSSCustomPropertyValue) {
-      const resolvedValue = customProperties[styleValue.name];
-      if (resolvedValue == null) {
-        (0, _errorMsg.errorMsg)(`Unrecognized custom property "--${styleValue.name}"`);
-        delete flatStyle[styleProp];
-        continue;
-      }
-      styleValue = resolvedValue;
+    styleValue = finalizeValue(styleValue, options);
+    if (styleValue == null) {
+      delete flatStyle[styleProp];
+      continue;
     }
-    if (styleValue instanceof _CSSLengthUnitValue.CSSLengthUnitValue) {
-      const resolvedValue = styleValue.resolvePixelValue(viewportWidth, viewportHeight, fontScale, inheritedFontSize);
-      styleValue = resolvedValue;
-    }
     if (!isReactNativeStyleProp(styleProp) && passthroughProperties.indexOf(styleProp) === -1) {
@@ -182,0 +188,0 @@ if (styleProp === "blockSize") {

lib/StyleXCSSTypes.d.ts

@@ -850,11 +850,398 @@ /**
 export type SupportedVendorSpecificCSSProperties = Readonly<{
-  MozOsxFontSmoothing?: 'grayscale';
-  WebkitAppearance?: appearance;
-  WebkitFontSmoothing?: 'antialiased';
-  WebkitTapHighlightColor?: color;
+  MozOsxFontSmoothing?: null | 'grayscale';
+  WebkitAppearance?: null | appearance;
+  WebkitFontSmoothing?: null | 'antialiased';
+  WebkitTapHighlightColor?: null | color;
 }>;
-export type CSSProperties = Readonly</**
- * > 874 |   ...$Exact<SupportedVendorSpecificCSSProperties>,
- *       |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with spreads in the middle or at the end" is currently not supported.
- **/
-any>;
+export type CSSProperties = Readonly<{
+  theme?: null | string;
+  MozOsxFontSmoothing?: null | 'grayscale';
+  WebkitAppearance?: null | appearance;
+  WebkitFontSmoothing?: null | 'antialiased';
+  WebkitTapHighlightColor?: null | color;
+  alignContent?: null | alignContent;
+  alignItems?: null | alignItems;
+  alignSelf?: null | alignSelf;
+  alignmentBaseline?: null | alignmentBaseline;
+  all?: null | all;
+  animationDelay?: null | OptionalArray<animationDelay>;
+  animationDirection?: null | OptionalArray<animationDirection>;
+  animationDuration?: null | OptionalArray<animationDuration>;
+  animationFillMode?: null | OptionalArray<animationFillMode>;
+  animationIterationCount?: null | OptionalArray<animationIterationCount>;
+  animationName?: null | OptionalArray<animationName>;
+  animationPlayState?: null | OptionalArray<animationPlayState>;
+  animationTimingFunction?: null | OptionalArray<animationTimingFunction>;
+  appearance?: null | appearance;
+  backdropFilter?: null | backdropFilter;
+  backfaceVisibility?: null | backfaceVisibility;
+  backgroundAttachment?: null | OptionalArray<backgroundAttachment>;
+  backgroundBlendMode?: null | OptionalArray<backgroundBlendMode>;
+  backgroundClip?: null | OptionalArray<backgroundClip>;
+  backgroundColor?: null | backgroundColor;
+  backgroundImage?: null | OptionalArray<backgroundImage>;
+  backgroundOrigin?: null | OptionalArray<backgroundOrigin>;
+  backgroundPosition?: null | OptionalArray<backgroundPosition>;
+  backgroundPositionX?: null | OptionalArray<backgroundPositionX>;
+  backgroundPositionY?: null | OptionalArray<backgroundPositionY>;
+  backgroundRepeat?: null | OptionalArray<backgroundRepeat>;
+  backgroundSize?: null | OptionalArray<backgroundSize>;
+  baselineShift?: null | baselineShift;
+  behavior?: null | behavior;
+  blockSize?: null | blockSize;
+  border?: null | border;
+  borderBlockEnd?: null | borderBlockEnd;
+  borderBlockEndColor?: null | borderBlockEndColor;
+  borderBlockEndStyle?: null | borderBlockEndStyle;
+  borderBlockEndWidth?: null | borderBlockEndWidth;
+  borderBlockStart?: null | borderBlockStart;
+  borderBlockStartColor?: null | borderBlockStartColor;
+  borderBlockStartStyle?: null | borderBlockStartStyle;
+  borderBlockStartWidth?: null | borderBlockStartWidth;
+  borderBottom?: null | border;
+  borderBottomColor?: null | color;
+  borderBottomEndRadius?: null | borderBottomRightRadius;
+  borderBottomLeftRadius?: null | borderBottomLeftRadius;
+  borderBottomRightRadius?: null | borderBottomRightRadius;
+  borderBottomStartRadius?: null | borderBottomLeftRadius;
+  borderBottomStyle?: null | borderBottomStyle;
+  borderBottomWidth?: null | borderBottomWidth;
+  borderCollapse?: null | borderCollapse;
+  borderColor?: null | borderColor;
+  borderEnd?: null | border;
+  borderEndColor?: null | borderRightColor;
+  borderEndStyle?: null | borderRightStyle;
+  borderEndWidth?: null | borderRightWidth;
+  borderImage?: null | borderImage;
+  borderImageOutset?: null | borderImageOutset;
+  borderImageRepeat?: null | borderImageRepeat;
+  borderImageSlice?: null | borderImageSlice;
+  borderImageSource?: null | borderImageSource;
+  borderImageWidth?: null | borderImageWidth;
+  borderInlineEnd?: null | borderInlineEnd;
+  borderInlineEndColor?: null | borderInlineEndColor;
+  borderInlineEndStyle?: null | borderInlineEndStyle;
+  borderInlineEndWidth?: null | borderInlineEndWidth;
+  borderInlineStart?: null | borderInlineStart;
+  borderInlineStartColor?: null | borderInlineStartColor;
+  borderInlineStartStyle?: null | borderInlineStartStyle;
+  borderInlineStartWidth?: null | borderInlineStartWidth;
+  borderLeft?: null | border;
+  borderLeftColor?: null | borderLeftColor;
+  borderLeftStyle?: null | borderLeftStyle;
+  borderLeftWidth?: null | borderLeftWidth;
+  borderRadius?: null | borderRadius;
+  borderRight?: null | border;
+  borderRightColor?: null | borderRightColor;
+  borderRightStyle?: null | borderRightStyle;
+  borderRightWidth?: null | borderRightWidth;
+  borderSpacing?: null | borderSpacing;
+  borderStart?: null | border;
+  borderStartColor?: null | borderLeftColor;
+  borderStartStyle?: null | borderLeftStyle;
+  borderStartWidth?: null | borderLeftWidth;
+  borderStyle?: null | borderStyle;
+  borderTop?: null | border;
+  borderTopColor?: null | color;
+  borderTopEndRadius?: null | borderTopRightRadius;
+  borderTopLeftRadius?: null | borderTopLeftRadius;
+  borderTopRightRadius?: null | borderTopRightRadius;
+  borderTopStartRadius?: null | borderTopLeftRadius;
+  borderTopStyle?: null | borderTopStyle;
+  borderTopWidth?: null | borderTopWidth;
+  borderWidth?: null | borderWidth;
+  bottom?: null | number | string;
+  boxAlign?: null | boxAlign;
+  boxDecorationBreak?: null | boxDecorationBreak;
+  boxDirection?: null | boxDirection;
+  boxFlex?: null | boxFlex;
+  boxFlexGroup?: null | boxFlexGroup;
+  boxLines?: null | boxLines;
+  boxOrdinalGroup?: null | boxOrdinalGroup;
+  boxOrient?: null | boxOrient;
+  boxShadow?: null | OptionalArray<boxShadow>;
+  boxSizing?: null | boxSizing;
+  boxSuppress?: null | boxSuppress;
+  breakAfter?: null | breakAfter;
+  breakBefore?: null | breakBefore;
+  breakInside?: null | breakInside;
+  captionSide?: null | captionSide;
+  clear?: null | clear;
+  clip?: null | clip;
+  clipPath?: null | clipPath;
+  clipRule?: null | clipRule;
+  color?: null | color;
+  columnCount?: null | columnCount;
+  columnFill?: null | columnFill;
+  columnGap?: null | columnGap;
+  columnRule?: null | columnRule;
+  columnRuleColor?: null | columnRuleColor;
+  columnRuleStyle?: null | columnRuleStyle;
+  columnRuleWidth?: null | columnRuleWidth;
+  columnSpan?: null | columnSpan;
+  columnWidth?: null | columnWidth;
+  columns?: null | columns;
+  contain?: null | contain;
+  content?: null | content;
+  counterIncrement?: null | counterIncrement;
+  counterReset?: null | counterReset;
+  cue?: null | cue;
+  cueAfter?: null | cueAfter;
+  cueBefore?: null | cueBefore;
+  cursor?: null | OptionalArray<cursor>;
+  direction?: null | direction;
+  display?: null | display;
+  displayInside?: null | displayInside;
+  displayList?: null | displayList;
+  displayOutside?: null | displayOutside;
+  dominantBaseline?: null | dominantBaseline;
+  emptyCells?: null | emptyCells;
+  end?: null | number | string;
+  fill?: null | fill;
+  fillOpacity?: null | fillOpacity;
+  fillRule?: null | fillRule;
+  filter?: null | filter;
+  flex?: null | flex;
+  flexBasis?: null | flexBasis;
+  flexDirection?: null | flexDirection;
+  flexFlow?: null | flexFlow;
+  flexGrow?: null | flexGrow;
+  flexShrink?: null | flexShrink;
+  flexWrap?: null | flexWrap;
+  float?: null | float;
+  fontFamily?: null | fontFamily;
+  fontFeatureSettings?: null | fontFeatureSettings;
+  fontKerning?: null | fontKerning;
+  fontLanguageOverride?: null | fontLanguageOverride;
+  fontSize?: null | fontSize;
+  fontSizeAdjust?: null | fontSizeAdjust;
+  fontStretch?: null | fontStretch;
+  fontStyle?: null | fontStyle;
+  fontSynthesis?: null | fontSynthesis;
+  fontVariant?: null | fontVariant;
+  fontVariantAlternates?: null | fontVariantAlternates;
+  fontVariantCaps?: null | fontVariantCaps;
+  fontVariantEastAsian?: null | fontVariantEastAsian;
+  fontVariantLigatures?: null | fontVariantLigatures;
+  fontVariantNumeric?: null | fontVariantNumeric;
+  fontVariantPosition?: null | fontVariantPosition;
+  fontWeight?: null | fontWeight;
+  gap?: null | gap;
+  glyphOrientationHorizontal?: null | glyphOrientationHorizontal;
+  glyphOrientationVertical?: null | glyphOrientationVertical;
+  grid?: null | grid;
+  gridArea?: null | gridArea;
+  gridAutoColumns?: null | gridAutoColumns;
+  gridAutoFlow?: null | gridAutoFlow;
+  gridAutoRows?: null | gridAutoRows;
+  gridColumn?: null | gridColumn;
+  gridColumnEnd?: null | gridColumnEnd;
+  gridColumnGap?: null | gridColumnGap;
+  gridColumnStart?: null | gridColumnStart;
+  gridGap?: null | gridGap;
+  gridRow?: null | gridRow;
+  gridRowEnd?: null | gridRowEnd;
+  gridRowGap?: null | gridRowGap;
+  gridRowStart?: null | gridRowStart;
+  gridTemplate?: null | gridTemplate;
+  gridTemplateAreas?: null | gridTemplateAreas;
+  gridTemplateColumns?: null | gridTemplateColumns;
+  gridTemplateRows?: null | gridTemplateRows;
+  height?: null | number | string;
+  hyphens?: null | hyphens;
+  imageOrientation?: null | imageOrientation;
+  imageRendering?: null | imageRendering;
+  imageResolution?: null | imageResolution;
+  imeMode?: null | imeMode;
+  initialLetter?: null | initialLetter;
+  initialLetterAlign?: null | initialLetterAlign;
+  inlineSize?: null | inlineSize;
+  isolation?: null | isolation;
+  justifyContent?: null | justifyContent;
+  justifyItems?: null | justifyItems;
+  justifySelf?: null | justifySelf;
+  kerning?: null | kerning;
+  left?: null | number | string;
+  letterSpacing?: null | letterSpacing;
+  lineBreak?: null | lineBreak;
+  lineHeight?: null | lineHeight;
+  listStyle?: null | listStyle;
+  listStyleImage?: null | listStyleImage;
+  listStylePosition?: null | listStylePosition;
+  listStyleType?: null | listStyleType;
+  margin?: null | margin;
+  marginBlockEnd?: null | marginBlockEnd;
+  marginBlockStart?: null | marginBlockStart;
+  marginBottom?: null | marginBottom;
+  marginEnd?: null | marginRight;
+  marginHorizontal?: null | marginLeft;
+  marginInlineEnd?: null | marginInlineEnd;
+  marginInlineStart?: null | marginInlineStart;
+  marginLeft?: null | marginLeft;
+  marginRight?: null | marginRight;
+  marginStart?: null | marginLeft;
+  marginTop?: null | marginTop;
+  marginVertical?: null | marginTop;
+  marker?: null | marker;
+  markerEnd?: null | markerEnd;
+  markerMid?: null | markerMid;
+  markerOffset?: null | markerOffset;
+  markerStart?: null | markerStart;
+  mask?: null | mask;
+  maskClip?: null | maskClip;
+  maskComposite?: null | maskComposite;
+  maskImage?: null | maskImage;
+  maskMode?: null | maskMode;
+  maskOrigin?: null | maskOrigin;
+  maskPosition?: null | maskPosition;
+  maskRepeat?: null | maskRepeat;
+  maskSize?: null | maskSize;
+  maskType?: null | maskType;
+  maxBlockSize?: null | maxBlockSize;
+  maxHeight?: null | maxHeight;
+  maxInlineSize?: null | maxInlineSize;
+  maxWidth?: null | maxWidth;
+  minBlockSize?: null | minBlockSize;
+  minHeight?: null | minHeight;
+  minInlineSize?: null | minInlineSize;
+  minWidth?: null | minWidth;
+  mixBlendMode?: null | mixBlendMode;
+  motion?: null | motion;
+  motionOffset?: null | motionOffset;
+  motionPath?: null | motionPath;
+  motionRotation?: null | motionRotation;
+  MsOverflowStyle?: null | MsOverflowStyle;
+  objectFit?: null | objectFit;
+  objectPosition?: null | objectPosition;
+  offsetBlockEnd?: null | offsetBlockEnd;
+  offsetBlockStart?: null | offsetBlockStart;
+  offsetInlineEnd?: null | offsetInlineEnd;
+  offsetInlineStart?: null | offsetInlineStart;
+  opacity?: null | opacity;
+  order?: null | order;
+  orphans?: null | orphans;
+  outline?: null | outline;
+  outlineColor?: null | outlineColor;
+  outlineOffset?: null | outlineOffset;
+  outlineStyle?: null | outlineStyle;
+  outlineWidth?: null | outlineWidth;
+  overflow?: null | overflow;
+  overflowAnchor?: null | overflowAnchor;
+  overflowClipBox?: null | overflowClipBox;
+  overflowWrap?: null | overflowWrap;
+  overflowX?: null | overflowX;
+  overflowY?: null | overflowY;
+  overscrollBehavior?: null | overscrollBehavior;
+  overscrollBehaviorX?: null | overscrollBehaviorX;
+  overscrollBehaviorY?: null | overscrollBehaviorY;
+  padding?: null | padding;
+  paddingBlockEnd?: null | paddingBlockEnd;
+  paddingBlockStart?: null | paddingBlockStart;
+  paddingBottom?: null | paddingBottom;
+  paddingEnd?: null | paddingBottom;
+  paddingHorizontal?: null | paddingLeft;
+  paddingLeft?: null | paddingLeft;
+  paddingRight?: null | paddingRight;
+  paddingStart?: null | paddingLeft;
+  paddingTop?: null | paddingTop;
+  paddingVertical?: null | paddingTop;
+  pageBreakAfter?: null | pageBreakAfter;
+  pageBreakBefore?: null | pageBreakBefore;
+  pageBreakInside?: null | pageBreakInside;
+  pause?: null | pause;
+  pauseAfter?: null | pauseAfter;
+  pauseBefore?: null | pauseBefore;
+  perspective?: null | perspective;
+  perspectiveOrigin?: null | perspectiveOrigin;
+  pointerEvents?: null | pointerEvents;
+  position?: null | position;
+  quotes?: null | quotes;
+  resize?: null | resize;
+  rest?: null | rest;
+  restAfter?: null | restAfter;
+  restBefore?: null | restBefore;
+  right?: null | number | string;
+  rowGap?: null | rowGap;
+  rubyAlign?: null | rubyAlign;
+  rubyMerge?: null | rubyMerge;
+  rubyPosition?: null | rubyPosition;
+  scrollbarWidth?: null | string | number;
+  scrollBehavior?: null | scrollBehavior;
+  scrollPadding?: null | number;
+  scrollPaddingTop?: null | number;
+  scrollPaddingBottom?: null | number;
+  scrollSnapAlign?: null | scrollSnapAlign;
+  scrollSnapType?: null | scrollSnapType;
+  shapeImageThreshold?: null | shapeImageThreshold;
+  shapeMargin?: null | shapeMargin;
+  shapeOutside?: null | shapeOutside;
+  shapeRendering?: null | shapeRendering;
+  speak?: null | speak;
+  speakAs?: null | speakAs;
+  src?: null | src;
+  start?: null | number | string;
+  stroke?: null | stroke;
+  strokeDasharray?: null | strokeDasharray;
+  strokeDashoffset?: null | strokeDashoffset;
+  strokeLinecap?: null | strokeLinecap;
+  strokeLinejoin?: null | strokeLinejoin;
+  strokeMiterlimit?: null | strokeMiterlimit;
+  strokeOpacity?: null | strokeOpacity;
+  strokeWidth?: null | strokeWidth;
+  tabSize?: null | tabSize;
+  tableLayout?: null | tableLayout;
+  textAlign?: null | textAlign;
+  textAlignLast?: null | textAlignLast;
+  textAnchor?: null | textAnchor;
+  textCombineUpright?: null | textCombineUpright;
+  textDecoration?: null | textDecoration;
+  textDecorationColor?: null | textDecorationColor;
+  textDecorationLine?: null | textDecorationLine;
+  textDecorationSkip?: null | textDecorationSkip;
+  textDecorationStyle?: null | textDecorationStyle;
+  textEmphasis?: null | textEmphasis;
+  textEmphasisColor?: null | textEmphasisColor;
+  textEmphasisPosition?: null | textEmphasisPosition;
+  textEmphasisStyle?: null | textEmphasisStyle;
+  textIndent?: null | textIndent;
+  textOrientation?: null | textOrientation;
+  textOverflow?: null | textOverflow;
+  textRendering?: null | textRendering;
+  textShadow?: null | OptionalArray<textShadow>;
+  textSizeAdjust?: null | textSizeAdjust;
+  textTransform?: null | textTransform;
+  textUnderlinePosition?: null | textUnderlinePosition;
+  top?: null | top;
+  touchAction?: null | touchAction;
+  transform?: null | transform;
+  transformBox?: null | transformBox;
+  transformOrigin?: null | transformOrigin;
+  transformStyle?: null | transformStyle;
+  transition?: null | OptionalArray<transition>;
+  transitionDelay?: null | OptionalArray<transitionDelay>;
+  transitionDuration?: null | OptionalArray<transitionDuration>;
+  transitionProperty?: null | OptionalArray<transitionProperty>;
+  transitionTimingFunction?: null | OptionalArray<transitionTimingFunction>;
+  unicodeBidi?: null | unicodeBidi;
+  unicodeRange?: null | unicodeRange;
+  userSelect?: null | userSelect;
+  verticalAlign?: null | verticalAlign;
+  visibility?: null | visibility;
+  voiceBalance?: null | voiceBalance;
+  voiceDuration?: null | voiceDuration;
+  voiceFamily?: null | voiceFamily;
+  voicePitch?: null | voicePitch;
+  voiceRange?: null | voiceRange;
+  voiceRate?: null | voiceRate;
+  voiceStress?: null | voiceStress;
+  voiceVolume?: null | voiceVolume;
+  whiteSpace?: null | whiteSpace;
+  widows?: null | widows;
+  width?: null | width;
+  willChange?: null | willChange;
+  wordBreak?: null | wordBreak;
+  wordSpacing?: null | wordSpacing;
+  wordWrap?: null | wordWrap;
+  writingMode?: null | writingMode;
+  zIndex?: null | zIndex;
+}>;

lib/StyleXTypes.d.ts

@@ -14,4 +14,4 @@ /**
   _opaque: typeof StyleXClassNameTag;
-  key: K;
-  value: V;
+  _key: K;
+  _value: V;
 };
@@ -25,88 +25,63 @@
 
-type lowerCaseAlphabet =
-  | 'a'
-  | 'b'
-  | 'c'
-  | 'd'
-  | 'e'
-  | 'f'
-  | 'g'
-  | 'h'
-  | 'i'
-  | 'j'
-  | 'k'
-  | 'l'
-  | 'm'
-  | 'n'
-  | 'o'
-  | 'p'
-  | 'q'
-  | 'r'
-  | 's'
-  | 't'
-  | 'u'
-  | 'v'
-  | 'w'
-  | 'x'
-  | 'y'
-  | 'z'
-  | '-'
-  | '_'
-  | '@'
-  | ':';
+declare const StyleXVarTag: unique symbol;
+export type StyleXVar<_Val> = string & typeof StyleXVarTag;
 
+// prettier-ignore
+type NonDollarChars =
+  | 'a' | 'A' | 'b' | 'B' | 'c' | 'C' | 'd' | 'D'
+  | 'e' | 'E' | 'f' | 'F' | 'g' | 'G'
+  | 'h' | 'H' | 'i' | 'I' | 'j' | 'J' | 'k' | 'K'
+  | 'l' | 'L' | 'm' | 'M' | 'n' | 'N' | 'o' | 'O' | 'p' | 'P'
+  | 'q' | 'Q' | 'r' | 'R' | 's' | 'S' | 't' | 'T'
+  | 'u' | 'U' | 'v' | 'V' | 'w' | 'W'
+  | 'x' | 'X' | 'y' | 'Y' | 'z' | 'Z'
+  | '-' | '_' | '@' | ':';
+
 // Strings that don't start with a dollar sign.
 // So that we can `&` with {$$css: true} without type errors.
-type NonDollarStr = `${lowerCaseAlphabet}${string}`;
+type NonDollarStr = `${NonDollarChars}${string}`;
+type PseudoClassStr = `:${string}`;
+type AtRuleStr = `@${string}`;
 
-type CSSPropTypes = {
-  [Key in keyof CSSProperties]: StyleXClassNameFor<Key, CSSProperties[Key]>;
-};
+type CondStr = PseudoClassStr | AtRuleStr;
 
-export type NestedCSSPropTypes = CSSPropTypes &
+type CSSPropertiesWithExtras = Partial<
+  Readonly<
+    CSSProperties & {
+      '::after': CSSProperties;
+      '::backdrop': CSSProperties;
+      '::before': CSSProperties;
+      '::cue': CSSProperties;
+      '::cue-region': CSSProperties;
+      '::first-letter': CSSProperties;
+      '::first-line': CSSProperties;
+      '::file-selector-button': CSSProperties;
+      '::grammar-error': CSSProperties;
+      '::marker': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // '::part()': CSSProperties;
+      '::placeholder': CSSProperties;
+      '::selection': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // '::slotted()': CSSProperties;
+      '::spelling-error': CSSProperties;
+      '::target-text': CSSProperties;
+    }
+  >
+>;
+
+export type NestedCSSPropTypes = Partial<
   Readonly<{
-    // NOTE: the actual type should be nested objects.
-    // fix after the types in stylex.js are fixed.
-    ':active': StyleXClassName;
-    ':focus': StyleXClassName;
-    ':focus-visible': StyleXClassName;
-    ':hover': StyleXClassName;
-    ':disabled': StyleXClassName;
-    ':empty': StyleXClassName;
-    ':first-child': StyleXClassName;
-    ':last-child': StyleXClassName;
-    '::before': StyleXClassName;
-    '::after': StyleXClassName;
-    '::placeholder': StyleXClassName;
-    '::-webkit-scrollbar': StyleXClassName;
+    [Key in keyof CSSPropertiesWithExtras]: StyleXClassNameFor<
+      Key,
+      CSSPropertiesWithExtras[Key]
+    >;
+  }>
+>;
 
-    [key: `@media (max-width: ${number}px)`]: StyleXClassName;
-    [key: `@media (min-width: ${number}px)`]: StyleXClassName;
-    [
-      key: `@media (min-width: ${number}px) and (max-width: ${number}px)`
-    ]: StyleXClassName;
-
-    [key: `@media (max-height: ${number}px)`]: StyleXClassName;
-    [key: `@media (min-height: ${number}px)`]: StyleXClassName;
-    [
-      key: `@media (min-height: ${number}px) and (max-height: ${number}px)`
-    ]: StyleXClassName;
-
-    [
-      key: `@media (-webkit-min-device-pixel-ratio: ${number})`
-    ]: StyleXClassName;
-    '@media print': StyleXClassName;
-
-    // webkit styles used for Search in Safari
-    '::-webkit-search-decoration': StyleXClassName;
-    '::-webkit-search-cancel-button': StyleXClassName;
-    '::-webkit-search-results-button': StyleXClassName;
-    '::-webkit-search-results-decoration': StyleXClassName;
-  }>;
-
+type UserAuthoredStyles = { [key: NonDollarStr]: unknown };
 export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
-export type XStyle<T = NestedCSSPropTypes> = StyleXArray<
-  false | (null | undefined | T)
->;
-export type XStyleWithout<T extends { [$$Key$$: NonDollarStr]: void }> = XStyle<
+export type XStyle<T extends UserAuthoredStyles = NestedCSSPropTypes> =
+  StyleXArray<false | (null | undefined | Readonly<T & { $$css: true }>)>;
+export type XStyleWithout<T extends UserAuthoredStyles> = XStyle<
   Readonly<Pick<NestedCSSPropTypes, Exclude<keyof NestedCSSPropTypes, keyof T>>>
@@ -118,67 +93,104 @@ >;
 
-type RawStyles = {
-  [key: NonDollarStr]:
-    | null
-    | string
-    | number
-    | Array<string | number>
-    | RawStyles;
-};
+type ComplexStyleValueType<T> = T extends string | number | null
+  ? T
+  : T extends StyleXVar<infer U>
+  ? U
+  : T extends ReadonlyArray<infer U>
+  ? U
+  : T extends Readonly<{ default: infer A; [cond: CondStr]: infer B }>
+  ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+  : T;
 
-type CompiledNamespace<const N extends RawStyles> = {
-  [K in keyof N]: N[K] extends string | number | null
-    ? StyleXClassNameFor<K, N[K]>
-    : N[K] extends ReadonlyArray<infer T>
-    ? StyleXClassNameFor<K, T>
-    : K extends `:${string}` | `@${string}`
-    ? N[K] extends RawStyles
-      ? CompiledNamespace<N[K]>
-      : StyleXClassNameFor<K, N[K]>
-    : N[K] extends { [key: string]: infer T }
-    ? StyleXClassNameFor<K, T> // TODO: Handle nested objects
-    : never;
-};
+type _MapNamespace<CSS> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>;
+}>;
 
-export type Stylex$Create = <const S extends { [n: NonDollarStr]: RawStyles }>(
+export type MapNamespace<CSS> = Readonly<
+  _MapNamespace<CSS> & Readonly<{ $$css: true }>
+>;
+
+export type MapNamespaces<
+  S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+> = Readonly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>;
+}>;
+
+export type Stylex$Create = <
+  const S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+>(
   styles: S,
-) => Readonly<{
-  [N in keyof S]: CompiledNamespace<S[N]> & { $$css: true };
+) => MapNamespaces<S>;
+
+export type CompiledStyles = Readonly<
+  {
+    [key: NonDollarStr]:
+      | StyleXClassName
+      | Readonly<{ [key: NonDollarStr]: StyleXClassName }>;
+  } & { $$css: true }
+>;
+
+export type InlineStyles = Readonly<
+  { [key: NonDollarStr]: string } & { $$css?: void }
+>;
+
+type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, Readonly<CSS[Key]>>;
 }>;
+type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
+  _GenStylePropType<CSS> & { $$css: true } & Partial<{
+      [Key in Exclude<
+        keyof CSSPropertiesWithExtras,
+        keyof CSS | '$$css'
+      >]: never;
+    }>
+>;
 
-export type CompiledStyles = Readonly<{
-  [key: NonDollarStr]:
-    | StyleXClassName
-    | Readonly<{ [key: NonDollarStr]: StyleXClassName }>;
-}> & { $$css: true };
+// Replace `XStyle` with this.
+export type StaticStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<false | null | void | GenStylePropType<CSS>>;
+export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
 
-type TTokens = {
-  [key: NonDollarStr]: string | { default: string; [key: string]: string };
-};
+export type StyleXStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<
+  | null
+  | void
+  | false
+  | GenStylePropType<CSS>
+  | Readonly<[GenStylePropType<CSS>, InlineStyles]>
+>;
+export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
 
-export type FlattenTokens<
-  T extends {
-    [key: NonDollarStr]: string | { default: string; [key: string]: string };
-  },
-> = {
-  [Key in keyof T]: T[Key] extends { default: infer X } & {
-    [key: Exclude<string, 'default'>]: infer Y;
-  }
-    ? X | Y
-    : T[Key];
-};
-
+declare const StyleXThemeTag: unique symbol;
 export type Theme<
-  Tokens extends { [key: string]: unknown },
+  Tokens extends { [key: NonDollarStr]: unknown },
   ID extends symbol = symbol,
-> = Readonly<{
-  [_Key in Exclude<keyof Tokens, '_opaque' | '_tokens'>]: string;
-}> & {
-  _opaque: ID;
-  _tokens: Tokens;
+> = Readonly<{ [_Key in keyof Tokens]: string }> & {
+  $opaqueId: ID;
+  $tokens: Tokens;
+} & typeof StyleXThemeTag;
+
+export type TokensFromTheme<T extends Theme<TTokens>> = T['$tokens'];
+
+export type IDFromTheme<T extends Theme<TTokens>> = T['$opaqueId'];
+
+type TTokens = {
+  [key: NonDollarStr]: string | { default: string; [key: AtRuleStr]: string };
 };
 
-export type TokensFromTheme<T extends Theme<TTokens>> = T['_tokens'];
+export type FlattenTokens<T extends TTokens> = Readonly<{
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X } ? X : T[Key];
+}>;
 
-export type IDFromTheme<T extends Theme<TTokens>> = T['_opaque'];
-
 export type StyleX$CreateVars = <
@@ -195,10 +207,11 @@ DefaultTokens extends TTokens,
   Tag extends symbol = symbol,
-> = Readonly<{
-  [Key: symbol]: StyleXClassNameFor<string, IDFromTheme<T>>;
-}> & { _opaque: Tag };
+> = Tag &
+  Readonly<{
+    theme: StyleXClassNameFor<string, IDFromTheme<T>>;
+  }>;
 
-type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
+type OverridesForTokenType<Config extends { [key: string]: any }> = {
   [Key in keyof Config]:
     | Config[Key]
-    | { default: Config[Key]; [atRule: string]: Config[Key] };
+    | { default: Config[Key]; [atRule: AtRuleStr]: Config[Key] };
 };
@@ -205,0 +218,0 @@

package.json

 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.20",
+  "version": "0.2.0-beta.21",
   "description": "A library for defining styles for optimized user interfaces.",
@@ -23,3 +23,3 @@ "main": "lib/stylex.js",
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.20"
+    "@stylexjs/scripts": "0.2.0-beta.21"
   },
@@ -26,0 +26,0 @@ "jest": {},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

207718

increased by16.06%

Number of package files

52

increased by10.64%

Lines of code

3806

increased by18.05%

No dependency changes