@stylexjs/stylex 0.13.1 → 0.14.0

package/README.md

@@ -30,7 +30,7 @@ for
 
 ### stylex.create()
 
-Styles are defined as a map of CSS rules using `stylex.create()`. In the example
+Styles are defined as a map of CSS rules using `create`. In the example
 below, there are 2 different CSS rules. The names "root" and "highlighted" are
 arbitrary names given to the rules.
 
@@ -75,7 +75,7 @@ code with a "compiled style" object.
 
 ### stylex.props()
 
-Applying style rules to specific elements is done using `stylex.props`. Each
+Applying style rules to specific elements is done using `props`. Each
 argument to this function must be a reference to a compiled style object, or an
 array of compiled style objects. The function merges styles from left to right.
 
@@ -83,9 +83,9 @@ array of compiled style objects. The function merges styles from left to right.
 <div {...stylex.props(styles.root, styles.highlighted)} />
 ```
 
-The `stylex.props` function returns React props as required to render an
+The `props` function returns React props as required to render an
 element. StyleX styles can still be passed to other components via props, but
-only the components rendering host platform elements will use `stylex.props()`.
+only the components rendering host platform elements will use `props()`.
 For example:
 
 ```tsx
@@ -125,7 +125,7 @@ style property values passed in via props.
 
 ### stylex.firstThatWorks()
 
-Defining fallback styles is done with `stylex.firstThatWorks()`. This is useful
+Defining fallback styles is done with `firstThatWorks`. This is useful
 for engines that may not support a specific style property.
 
 ```tsx

package/lib/cjs/stylex.d.ts

@@ -19,11 +19,14 @@ import type {
   StyleX$DefineVars,
   StyleX$DefineConsts,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   VarGroup,
   PositionTry,
+  ViewTransitionClass,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -35,8 +38,10 @@ export type {
   StaticStyles,
   StaticStylesWithout,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   Types,
   VarGroup,
@@ -65,6 +70,9 @@ export declare function props(
   'data-style-src'?: string;
   style?: Readonly<{ [$$Key$$: string]: string | number }>;
 }>;
+export declare const viewTransitionClass: (
+  _viewTransitionClass: ViewTransitionClass,
+) => string;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -136,6 +144,7 @@ type IStyleX = {
     'data-style-src'?: string;
     style?: Readonly<{ [$$Key$$: string]: string | number }>;
   }>;
+  viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string;
   types: typeof types;
   __customProperties?: { [$$Key$$: string]: unknown };
 };

package/lib/cjs/stylex.js

@@ -172,6 +172,9 @@ function props() {
   }
   return result;
 }
+const viewTransitionClass = _viewTransitionClass => {
+  throw errorForFn('viewTransitionClass');
+};
 const types = {
   angle: _v => {
     throw errorForType('angle');
@@ -228,6 +231,7 @@ _legacyMerge.keyframes = keyframes;
 _legacyMerge.positionTry = positionTry;
 _legacyMerge.props = props;
 _legacyMerge.types = types;
+_legacyMerge.viewTransitionClass = viewTransitionClass;
 const legacyMerge = _legacyMerge;
 
 exports.create = create;
@@ -240,3 +244,4 @@ exports.legacyMerge = legacyMerge;
 exports.positionTry = positionTry;
 exports.props = props;
 exports.types = types;
+exports.viewTransitionClass = viewTransitionClass;

package/lib/cjs/stylex.js.flow

@@ -19,11 +19,14 @@ import type {
   StyleX$DefineVars,
   StyleX$DefineConsts,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   VarGroup,
   PositionTry,
+  ViewTransitionClass,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -36,8 +39,10 @@ export type {
   StaticStyles,
   StaticStylesWithout,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   Types,
   VarGroup,
@@ -73,6 +78,10 @@ declare export function props(
   style?: $ReadOnly<{ [string]: string | number }>,
 }>;
 
+declare export const viewTransitionClass: (
+  _viewTransitionClass: ViewTransitionClass,
+) => string;
+
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -133,6 +142,7 @@ type IStyleX = {
     'data-style-src'?: string,
     style?: $ReadOnly<{ [string]: string | number }>,
   }>,
+  viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   __customProperties?: { [string]: mixed },
   ...

package/lib/cjs/types/StyleXTypes.d.ts

@@ -139,11 +139,20 @@ export type PositionTry = Readonly<{
   placeSelf?: CSSProperties['placeSelf'],
 }>;
 
+export type ViewTransitionClass = Readonly<{
+  group?: CSSProperties,
+  imagePair?: CSSProperties,
+  old?: CSSProperties,
+  new?: CSSProperties,
+}>;
+
 export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
 
 type ComplexStyleValueType<T> =
   T extends StyleXVar<infer U>
-    ? U
+    ? U extends CSSType<infer V>
+      ? V
+      : U
     : T extends string | number | null
       ? T
       : T extends ReadonlyArray<infer U>

package/lib/cjs/types/StyleXTypes.js.flow

@@ -106,6 +106,13 @@ export type PositionTry = $ReadOnly<{
   placeSelf?: CSSProperties['placeSelf'],
 }>;
 
+export type ViewTransitionClass = $ReadOnly<{
+  group?: CSSProperties,
+  imagePair?: CSSProperties,
+  old?: CSSProperties,
+  new?: CSSProperties,
+}>;
+
 export type LegacyThemeStyles = $ReadOnly<{
   [constantName: string]: string,
   ...
@@ -113,7 +120,9 @@ export type LegacyThemeStyles = $ReadOnly<{
 
 type ComplexStyleValueType<+T> =
   T extends StyleXVar<infer U>
-    ? U
+    ? U extends CSSType<infer V>
+      ? V
+      : U
     : T extends string | number | null
       ? T
       : T extends $ReadOnlyArray<infer U>

package/lib/es/stylex.d.ts

@@ -19,11 +19,14 @@ import type {
   StyleX$DefineVars,
   StyleX$DefineConsts,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   VarGroup,
   PositionTry,
+  ViewTransitionClass,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -35,8 +38,10 @@ export type {
   StaticStyles,
   StaticStylesWithout,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   Types,
   VarGroup,
@@ -65,6 +70,9 @@ export declare function props(
   'data-style-src'?: string;
   style?: Readonly<{ [$$Key$$: string]: string | number }>;
 }>;
+export declare const viewTransitionClass: (
+  _viewTransitionClass: ViewTransitionClass,
+) => string;
 export declare const types: {
   angle: <T extends string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -136,6 +144,7 @@ type IStyleX = {
     'data-style-src'?: string;
     style?: Readonly<{ [$$Key$$: string]: string | number }>;
   }>;
+  viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string;
   types: typeof types;
   __customProperties?: { [$$Key$$: string]: unknown };
 };

package/lib/es/stylex.js.flow

@@ -19,11 +19,14 @@ import type {
   StyleX$DefineVars,
   StyleX$DefineConsts,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   VarGroup,
   PositionTry,
+  ViewTransitionClass,
 } from './types/StyleXTypes';
 import type { ValueWithDefault } from './types/StyleXUtils';
 import * as Types from './types/VarTypes';
@@ -36,8 +39,10 @@ export type {
   StaticStyles,
   StaticStylesWithout,
   StyleXArray,
+  StyleXClassNameFor,
   StyleXStyles,
   StyleXStylesWithout,
+  StyleXVar,
   Theme,
   Types,
   VarGroup,
@@ -73,6 +78,10 @@ declare export function props(
   style?: $ReadOnly<{ [string]: string | number }>,
 }>;
 
+declare export const viewTransitionClass: (
+  _viewTransitionClass: ViewTransitionClass,
+) => string;
+
 declare export const types: {
   angle: <T: string | 0 = string | 0>(
     _v: ValueWithDefault<T>,
@@ -133,6 +142,7 @@ type IStyleX = {
     'data-style-src'?: string,
     style?: $ReadOnly<{ [string]: string | number }>,
   }>,
+  viewTransitionClass: (viewTransitionClass: ViewTransitionClass) => string,
   types: typeof types,
   __customProperties?: { [string]: mixed },
   ...

package/lib/es/stylex.mjs

@@ -170,6 +170,9 @@ function props() {
   }
   return result;
 }
+const viewTransitionClass = _viewTransitionClass => {
+  throw errorForFn('viewTransitionClass');
+};
 const types = {
   angle: _v => {
     throw errorForType('angle');
@@ -226,6 +229,7 @@ _legacyMerge.keyframes = keyframes;
 _legacyMerge.positionTry = positionTry;
 _legacyMerge.props = props;
 _legacyMerge.types = types;
+_legacyMerge.viewTransitionClass = viewTransitionClass;
 const legacyMerge = _legacyMerge;
 
-export { create, createTheme, defineConsts, defineVars, firstThatWorks, keyframes, legacyMerge, positionTry, props, types };
+export { create, createTheme, defineConsts, defineVars, firstThatWorks, keyframes, legacyMerge, positionTry, props, types, viewTransitionClass };

package/lib/es/types/StyleXTypes.d.ts

@@ -139,11 +139,20 @@ export type PositionTry = Readonly<{
   placeSelf?: CSSProperties['placeSelf'],
 }>;
 
+export type ViewTransitionClass = Readonly<{
+  group?: CSSProperties,
+  imagePair?: CSSProperties,
+  old?: CSSProperties,
+  new?: CSSProperties,
+}>;
+
 export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
 
 type ComplexStyleValueType<T> =
   T extends StyleXVar<infer U>
-    ? U
+    ? U extends CSSType<infer V>
+      ? V
+      : U
     : T extends string | number | null
       ? T
       : T extends ReadonlyArray<infer U>

package/lib/es/types/StyleXTypes.js.flow

@@ -106,6 +106,13 @@ export type PositionTry = $ReadOnly<{
   placeSelf?: CSSProperties['placeSelf'],
 }>;
 
+export type ViewTransitionClass = $ReadOnly<{
+  group?: CSSProperties,
+  imagePair?: CSSProperties,
+  old?: CSSProperties,
+  new?: CSSProperties,
+}>;
+
 export type LegacyThemeStyles = $ReadOnly<{
   [constantName: string]: string,
   ...
@@ -113,7 +120,9 @@ export type LegacyThemeStyles = $ReadOnly<{
 
 type ComplexStyleValueType<+T> =
   T extends StyleXVar<infer U>
-    ? U
+    ? U extends CSSType<infer V>
+      ? V
+      : U
     : T extends string | number | null
       ? T
       : T extends $ReadOnlyArray<infer U>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "./lib/cjs/stylex.js",
   "module": "./lib/es/stylex.mjs",
@@ -56,7 +56,7 @@
     "cross-env": "^7.0.3",
     "rimraf": "^5.0.10",
     "rollup": "^4.24.0",
-    "scripts": "0.13.1"
+    "scripts": "0.14.0"
   },
   "files": [
     "lib/*"