@stylexjs/stylex - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

lib/stylex.d.ts

@@ -20,2 +20,18 @@ /**
 } from './StyleXTypes';
+import type {
+  ValueWithDefault,
+  Angle,
+  Color,
+  Url,
+  Image,
+  Integer,
+  LengthPercentage,
+  Length,
+  Percentage,
+  Num,
+  Resolution,
+  Time,
+  TransformFunction,
+  TransformList,
+} from './VarTypes';
 export type {
@@ -69,53 +85,34 @@ VarGroup,
 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>,
-  ) => ICSSType<T>;
-  length: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  percentage: <T extends number | string>(
+  ) => 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>,
-  ) => ICSSType<T>;
-  number: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  resolution: <T extends number | string>(
+  ) => Integer<T>;
+  lengthPercentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
-  time: <T extends number | string>(_v: ValueWithDefault<T>) => ICSSType<T>;
-  transformFunction: <T extends number | string>(
+  ) => LengthPercentage<T>;
+  length: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
-  transformList: <T extends number | string>(
+  ) => Length<T>;
+  percentage: <T extends number | string = number | string>(
     _v: ValueWithDefault<T>,
-  ) => ICSSType<T>;
+  ) => Percentage<T>;
+  number: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Num<T>;
+  resolution: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Resolution<T>;
+  time: <T extends string | 0 = string | 0>(_v: ValueWithDefault<T>) => Time<T>;
+  transformFunction: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => TransformFunction<T>;
+  transformList: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => TransformList<T>;
 };
@@ -122,0 +119,0 @@ export declare const keyframes: (keyframes: Keyframes) => string;

lib/StyleXCSSTypes.d.ts

@@ -51,10 +51,22 @@ /**
 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'
@@ -64,13 +76,26 @@ | 'end'
   | '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;
@@ -141,3 +166,3 @@ type all = null | 'initial' | 'inherit' | 'unset';
 type borderRadius = lengthPercentage;
-type borderSpacing = number;
+type borderSpacing = number | string;
 type borderStyle = brStyle;
@@ -151,6 +176,6 @@ type borderTopLeftRadius = lengthPercentage;
 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 =
@@ -207,3 +232,3 @@ | 'horizontal'
 type clipPath = string | 'none';
-type columnCount = number | 'auto';
+type columnCount = number | 'auto' | string;
 type columnFill = 'auto' | 'balance';
@@ -216,3 +241,3 @@ type columnGap = number | string | 'normal';
 type columnSpan = 'none' | 'all';
-type columnWidth = number | 'auto';
+type columnWidth = number | 'auto' | string;
 type columns = columnWidth | columnCount;
@@ -285,4 +310,4 @@ type contain = 'none' | 'strict' | 'content' | string;
 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';
@@ -382,10 +407,21 @@ type float =
 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'
@@ -395,5 +431,14 @@ | 'end'
   | '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;
@@ -404,9 +449,19 @@ type justifySelf =
   | '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;
@@ -425,3 +480,3 @@ type listStyleImage = string | 'none';
 type marginTop = number | string | 'auto';
-type markerOffset = number | 'auto';
+type markerOffset = number | 'auto' | string;
 type mask = maskLayer;
@@ -485,7 +540,7 @@ type maskClip = 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;
@@ -535,14 +590,6 @@ type outlineWidth = borderWidth;
 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';
@@ -635,3 +682,3 @@ type textAlign =
   | 'inherit';
-type widows = number;
+type widows = number | string;
 type width =
@@ -670,3 +717,2 @@ | string
   | 'mathematical';
-type baselinePosition = 'baseline' | 'first baseline' | 'last baseline';
 type baselineShift = 'baseline' | 'sub' | 'super' | svgLength;
@@ -692,6 +738,6 @@ type behavior = string;
 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;
@@ -749,4 +795,4 @@ type marker = 'none' | string;
 type strokeLinejoin = 'miter' | 'round' | 'bevel';
-type strokeMiterlimit = number;
-type strokeOpacity = number;
+type strokeMiterlimit = number | string;
+type strokeOpacity = number | string;
 type strokeWidth = svgLength;
@@ -887,3 +933,2 @@ type textAnchor = 'start' | 'middle' | 'end';
     | 'text';
-  backgroundClip?: all | 'border-box' | 'padding-box' | 'content-box' | 'text';
   WebkitBoxOrient?:
@@ -895,3 +940,3 @@ | null
     | 'block-axis';
-  WebkitLineClamp?: all | number;
+  WebkitLineClamp?: all | number | string;
   accentColor?: all | color;
@@ -903,2 +948,3 @@ aspectRatio?: all | number | string;
   placeItems?: all | string;
+  placeSelf?: all | string;
   alignItems?: all | alignItems;
@@ -1118,5 +1164,2 @@ justifyItems?: all | justifyItems;
   fontWeight?: all | fontWeight;
-  fontFeatureSettings?: all | string;
-  fontKerning?: all | 'auto' | 'normal' | 'none';
-  fontLanguageOverride?: all | string;
   fontOpticalSizing?: all | 'auto' | 'none';
@@ -1123,0 +1166,0 @@ fontPalette?: all | 'light' | 'dark' | string;

lib/StyleXTypes.d.ts

@@ -8,2 +8,3 @@ /**
 
+import type { CSSType } from './VarTypes';
 import type { CSSProperties } from './StyleXCSSTypes';
@@ -90,11 +91,12 @@
 
-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;
 
@@ -148,3 +150,3 @@ export type MapNamespace<CSS> = Readonly<{
   CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
-> = StyleXArray<false | null | GenStylePropType<CSS>>;
+> = StyleXArray<false | null | undefined | GenStylePropType<CSS>>;
 
@@ -159,2 +161,3 @@ export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
   | null
+  | undefined
   | false
@@ -188,3 +191,3 @@ | GenStylePropType<CSS>
 type TTokens = Readonly<{
-  [key: string]: string | { [key: string]: string };
+  [key: string]: CSSType | string | { [key: string]: string };
 }>;
@@ -191,0 +194,0 @@

package.json

 {
   "name": "@stylexjs/stylex",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "A library for defining styles for optimized user interfaces.",
@@ -35,4 +35,4 @@ "main": "./lib/stylex.js",
     "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",
@@ -46,7 +46,7 @@ "build": "npm run build:cjs && npm run build:esm",
     "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.0",
+    "cross-env": "^7.0.3"
   },
@@ -53,0 +53,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

155806

increased by4.83%

Dependency count

3

decreased by-25%

Number of package files

26

increased by18.18%

Lines of code

2835

increased by5.59%

Worsened metrics

Dev dependency count

2

increased by100%

Dependency changes

• - Removedutility-types@^3.10.0

• - Removedutility-types@3.11.0(transitive)