@stylexjs/stylex 0.2.0-beta.21 → 0.2.0-beta.23

package/lib/stylex.d.ts

@@ -10,33 +10,45 @@
 import type {
   Keyframes,
   Stylex$Create,
-  StyleX$CreateVars,
-  StyleX$OverrideVars,
+  StyleX$DefineVars,
+  StyleX$CreateTheme,
   StyleXArray,
-  MapNamespace,
   CompiledStyles,
+  InlineStyles,
+  StyleXClassNameFor,
 } from './StyleXTypes';
 export type { Theme, Variant } from './StyleXTypes';
 import injectStyle from './stylex-inject';
-export declare function spread(
-  styles: StyleXArray<
-    | (null | undefined | CompiledStyles)
-    | boolean
-    | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
-  >,
-  _options?: {},
+export declare function props(
+  this: null | undefined | unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
 ): Readonly<{
-  className: string;
-  style: Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>;
+  className?: string;
+  style?: Readonly<{ [$$Key$$: string]: string | number }>;
 }>;
 type Stylex$Include = <
-  TStyles extends { readonly [$$Key$$: string]: string | number },
+  TStyles extends {
+    readonly [$$Key$$: string]: StyleXClassNameFor<string, unknown>;
+  },
 >(
-  _styles: MapNamespace<TStyles>,
-) => TStyles;
+  styles: TStyles,
+) => {
+  readonly [Key in keyof TStyles]: TStyles[Key] extends StyleXClassNameFor<
+    unknown,
+    infer V
+  >
+    ? V
+    : string;
+};
 export declare const create: Stylex$Create;
-export declare const unstable_createVars: StyleX$CreateVars;
-export declare const unstable_overrideVars: StyleX$OverrideVars;
+export declare const defineVars: StyleX$DefineVars;
+export declare const createTheme: StyleX$CreateTheme;
 export declare const include: Stylex$Include;
 type ValueWithDefault<T> =
   | T
@@ -90,32 +102,33 @@ export declare const types: {
     _v: ValueWithDefault<T>,
   ) => ICSSType<T>;
 };
-export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare const keyframes: (keyframes: Keyframes) => string;
 export declare const firstThatWorks: <T extends string | number>(
-  ..._styles: ReadonlyArray<T>
+  ...styles: ReadonlyArray<T>
 ) => ReadonlyArray<T>;
 export declare const inject: typeof injectStyle;
-export declare const UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
 type IStyleX = {
   (
     ...styles: ReadonlyArray<
       StyleXArray<(null | undefined | CompiledStyles) | boolean>
     >
   ): string;
-  spread: (
-    styles: StyleXArray<
-      | (null | undefined | CompiledStyles)
-      | boolean
-      | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
-    >,
-    _options?: {},
+  props: (
+    this: null | undefined | unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
   ) => Readonly<{
-    className: string;
-    style: Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>;
+    className?: string;
+    style?: Readonly<{ [$$Key$$: string]: string | number }>;
   }>;
   create: Stylex$Create;
-  unstable_createVars: StyleX$CreateVars;
-  unstable_overrideVars: StyleX$OverrideVars;
+  defineVars: StyleX$DefineVars;
+  createTheme: StyleX$CreateTheme;
   include: Stylex$Include;
   types: typeof types;
   firstThatWorks: <T extends string | number>(
@@ -127,7 +140,7 @@ type IStyleX = {
     rtlRule: null | undefined | string,
   ) => void;
   keyframes: (keyframes: Keyframes) => string;
-  UNSUPPORTED_PROPERTY: <T>(props: T) => T;
+  __customProperties?: { [$$Key$$: string]: unknown };
 };
 export declare const stylex: IStyleX;
 declare const $$EXPORT_DEFAULT_DECLARATION$$: IStyleX;

package/lib/stylex.js

@@ -1,116 +1,142 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.default = exports.create = exports.UNSUPPORTED_PROPERTY = void 0;
-exports.spread = spread;
-exports.unstable_overrideVars = exports.unstable_createVars = exports.types = exports.stylex = void 0;
+exports.__monkey_patch__ = __monkey_patch__;
+exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.defineVars = exports.default = exports.createTheme = exports.create = void 0;
+exports.props = props;
+exports.types = exports.stylex = void 0;
 var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
 var _styleq = require("styleq");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function spread(styles, _options) {
+function props() {
+  const options = this;
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+  if (__implementations.props) {
+    return __implementations.props.call(options, styles);
+  }
   const [className, style] = (0, _styleq.styleq)(styles);
-  return {
-    className,
-    style
-  };
-}
-function stylexCreate(_styles) {
-  throw new Error("stylex.create should never be called. It should be compiled away.");
-}
-function stylexCreateVars(_styles) {
-  throw new Error("stylex.createVars should never be called. It should be compiled away.");
+  const result = {};
+  if (className != null && className !== '') {
+    result.className = className;
+  }
+  if (style != null && Object.keys(style).length > 0) {
+    result.style = style;
+  }
+  return result;
 }
-function stylexOverrideVars(_styles) {
-  throw new Error("stylex.overrideVars should never be called. It should be compiled away.");
+function stylexCreate(styles) {
+  if (__implementations.create != null) {
+    const create = __implementations.create;
+    return create(styles);
+  }
+  throw new Error('stylex.create should never be called. It should be compiled away.');
 }
-function stylexIncludes(_styles) {
-  throw new Error("stylex.extends should never be called. It should be compiled away.");
+function stylexDefineVars(styles) {
+  if (__implementations.defineVars) {
+    return __implementations.defineVars(styles);
+  }
+  throw new Error('stylex.defineVars should never be called. It should be compiled away.');
 }
-const create = stylexCreate;
-exports.create = create;
-const unstable_createVars = stylexCreateVars;
-exports.unstable_createVars = unstable_createVars;
-const unstable_overrideVars = stylexOverrideVars;
-exports.unstable_overrideVars = unstable_overrideVars;
-const include = stylexIncludes;
-exports.include = include;
-const types = {
+const stylexCreateTheme = (baseTokens, overrides) => {
+  if (__implementations.createTheme) {
+    return __implementations.createTheme(baseTokens, overrides);
+  }
+  throw new Error('stylex.createTheme should never be called. It should be compiled away.');
+};
+const stylexInclude = styles => {
+  if (__implementations.include) {
+    return __implementations.include(styles);
+  }
+  throw new Error('stylex.extends should never be called. It should be compiled away.');
+};
+const create = exports.create = stylexCreate;
+const defineVars = exports.defineVars = stylexDefineVars;
+const createTheme = exports.createTheme = stylexCreateTheme;
+const include = exports.include = stylexInclude;
+const types = exports.types = {
   angle: _v => {
-    throw new Error(errorForType("angle"));
+    throw new Error(errorForType('angle'));
   },
   color: _v => {
-    throw new Error(errorForType("color"));
+    throw new Error(errorForType('color'));
   },
   url: _v => {
-    throw new Error(errorForType("url"));
+    throw new Error(errorForType('url'));
   },
   image: _v => {
-    throw new Error(errorForType("image"));
+    throw new Error(errorForType('image'));
   },
   integer: _v => {
-    throw new Error(errorForType("integer"));
+    throw new Error(errorForType('integer'));
   },
   lengthPercentage: _v => {
-    throw new Error(errorForType("lengthPercentage"));
+    throw new Error(errorForType('lengthPercentage'));
   },
   length: _v => {
-    throw new Error(errorForType("length"));
+    throw new Error(errorForType('length'));
   },
   percentage: _v => {
-    throw new Error(errorForType("percentage"));
+    throw new Error(errorForType('percentage'));
   },
   number: _v => {
-    throw new Error(errorForType("number"));
+    throw new Error(errorForType('number'));
   },
   resolution: _v => {
-    throw new Error(errorForType("resolution"));
+    throw new Error(errorForType('resolution'));
   },
   time: _v => {
-    throw new Error(errorForType("time"));
+    throw new Error(errorForType('time'));
   },
   transformFunction: _v => {
-    throw new Error(errorForType("transformFunction"));
+    throw new Error(errorForType('transformFunction'));
   },
   transformList: _v => {
-    throw new Error(errorForType("transformList"));
+    throw new Error(errorForType('transformList'));
   }
 };
-exports.types = types;
 const errorForType = type => `stylex.types.${type} should be compiled away by @stylexjs/babel-plugin`;
-const keyframes = _keyframes => {
-  throw new Error("stylex.keyframes should never be called");
+const keyframes = keyframes => {
+  if (__implementations.keyframes) {
+    return __implementations.keyframes(keyframes);
+  }
+  throw new Error('stylex.keyframes should never be called');
 };
 exports.keyframes = keyframes;
 const firstThatWorks = function () {
-  throw new Error("stylex.firstThatWorks should never be called.");
+  if (__implementations.firstThatWorks) {
+    return __implementations.firstThatWorks(...arguments);
+  }
+  throw new Error('stylex.firstThatWorks should never be called.');
 };
 exports.firstThatWorks = firstThatWorks;
-const inject = _stylexInject.default;
-exports.inject = inject;
-const UNSUPPORTED_PROPERTY = _props => {
-  throw new Error("stylex.UNSUPPORTED_PROPERTY should never be called. It should be compiled away.");
-};
-exports.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
+const inject = exports.inject = _stylexInject.default;
 function _stylex() {
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
+  for (var _len2 = arguments.length, styles = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    styles[_key2] = arguments[_key2];
   }
   const [className] = (0, _styleq.styleq)(styles);
   return className;
 }
-_stylex.spread = spread;
+_stylex.props = props;
 _stylex.create = create;
-_stylex.unstable_createVars = unstable_createVars;
-_stylex.unstable_overrideVars = unstable_overrideVars;
+_stylex.defineVars = defineVars;
+_stylex.createTheme = createTheme;
 _stylex.include = include;
 _stylex.keyframes = keyframes;
 _stylex.firstThatWorks = firstThatWorks;
 _stylex.inject = inject;
-_stylex.UNSUPPORTED_PROPERTY = UNSUPPORTED_PROPERTY;
 _stylex.types = types;
-const stylex = _stylex;
-exports.stylex = stylex;
-var _default = _stylex;
-exports.default = _default;
+const __implementations = {};
+function __monkey_patch__(key, implementation) {
+  if (key === 'types') {
+    Object.assign(types, implementation);
+  } else {
+    __implementations[key] = implementation;
+  }
+}
+const stylex = exports.stylex = _stylex;
+var _default = exports.default = _stylex;

package/lib/stylex.js.flow

@@ -10,37 +10,47 @@
 import type {
   Keyframes,
   Stylex$Create,
-  StyleX$CreateVars,
-  StyleX$OverrideVars,
+  StyleX$DefineVars,
+  StyleX$CreateTheme,
   StyleXArray,
-  MapNamespace,
   CompiledStyles,
+  InlineStyles,
+  StyleXClassNameFor,
 } from './StyleXTypes';
 
 export type { Theme, Variant } from './StyleXTypes';
 
 import injectStyle from './stylex-inject';
-declare export function spread(
-  styles: StyleXArray<
-    | ?CompiledStyles
-    | boolean
-    | $ReadOnly<{ $$css?: void, [string]: string | number }>,
-  >,
-  _options?: { ... },
+declare export function props(
+  this: ?mixed,
+  ...styles: $ReadOnlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
 ): $ReadOnly<{
-  className: string,
-  style: $ReadOnly<{ $$css?: void, [string]: string | number }>,
+  className?: string,
+  style?: $ReadOnly<{ [string]: string | number }>,
 }>;
 
-type Stylex$Include = <TStyles: { +[string]: string | number }>(
-  _styles: MapNamespace<TStyles>,
-) => TStyles;
+type Stylex$Include = <
+  TStyles: { +[string]: StyleXClassNameFor<string, mixed> },
+>(
+  styles: TStyles,
+) => {
+  +[Key in keyof TStyles]: TStyles[Key] extends StyleXClassNameFor<
+    mixed,
+    infer V,
+  >
+    ? V
+    : string,
+};
 
 declare export const create: Stylex$Create;
 
-declare export const unstable_createVars: StyleX$CreateVars;
+declare export const defineVars: StyleX$DefineVars;
 
-declare export const unstable_overrideVars: StyleX$OverrideVars;
+declare export const createTheme: StyleX$CreateTheme;
 
 declare export const include: Stylex$Include;
 
@@ -94,32 +104,30 @@ declare export const types: {
   ) => ICSSType<T>,
   transformList: <T: number | string>(_v: ValueWithDefault<T>) => ICSSType<T>,
 };
-declare export const keyframes: (_keyframes: Keyframes) => string;
+declare export const keyframes: (keyframes: Keyframes) => string;
 
 declare export const firstThatWorks: <T: string | number>(
-  ..._styles: $ReadOnlyArray<T>
+  ...styles: $ReadOnlyArray<T>
 ) => $ReadOnlyArray<T>;
 
 declare export const inject: typeof injectStyle;
 
-declare export const UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
-
 type IStyleX = {
   (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
-  spread: (
-    styles: StyleXArray<
-      | ?CompiledStyles
-      | boolean
-      | $ReadOnly<{ $$css?: void, [string]: string | number }>,
-    >,
-    _options?: { ... },
+  props: (
+    this: ?mixed,
+    ...styles: $ReadOnlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
   ) => $ReadOnly<{
-    className: string,
-    style: $ReadOnly<{ $$css?: void, [string]: string | number }>,
+    className?: string,
+    style?: $ReadOnly<{ [string]: string | number }>,
   }>,
   create: Stylex$Create,
-  unstable_createVars: StyleX$CreateVars,
-  unstable_overrideVars: StyleX$OverrideVars,
+  defineVars: StyleX$DefineVars,
+  createTheme: StyleX$CreateTheme,
   include: Stylex$Include,
   types: typeof types,
   firstThatWorks: <T: string | number>(
@@ -127,9 +135,10 @@ type IStyleX = {
   ) => $ReadOnlyArray<T>,
   inject: (ltrRule: string, priority: number, rtlRule: ?string) => void,
   keyframes: (keyframes: Keyframes) => string,
-  UNSUPPORTED_PROPERTY: <T>(props: T) => T,
+  __customProperties?: { [string]: mixed },
   ...
 };
 
+
 declare export const stylex: IStyleX;
 declare export default IStyleX;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.21",
+  "version": "0.2.0-beta.23",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "react-native": "lib/native/stylex.js",
@@ -20,7 +20,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.21"
+    "@stylexjs/scripts": "0.2.0-beta.23"
   },
   "jest": {},
   "files": [