@stylexjs/stylex 0.2.0-beta.13 → 0.2.0-beta.15

package/lib/StyleXTypes.d.ts

@@ -172,3 +172,31 @@ export type Stylex$Create = <S extends {}>(
  *       |                ^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMap" is currently not supported.
  **/
 any>;
+export declare type StyleXVarsTheme<
+  Vars extends { readonly [$$Key$$: string]: string }
+> = Vars;
+export type Stylex$CreateVars = <
+  Vars extends { readonly [$$Key$$: string]: string }
+>(
+  styles: Vars,
+  config?: { themeName: string }
+) => StyleXVarsTheme<
+  Readonly</**
+   * > 129 | ) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
+   *       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapConst" is currently not supported.
+   **/
+  any>
+>;
+export type Stylex$OverrideVars = <
+  Vars extends { readonly [$$Key$$: string]: string }
+>(
+  styles: Vars & { __themeName__: string },
+  stylesOverride: Vars,
+  config?: { themeName: string }
+) => StyleXVarsTheme<
+  Readonly</**
+   * > 135 | ) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
+   *       |                                ^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "$ObjMapConst" is currently not supported.
+   **/
+  any>
+>;

package/lib/StyleXTypes.js.flow

@@ -119,3 +119,17 @@ export type MapNamespaces = <CSS: { ... }>(CSS) => MapNamespace<CSS>;
 export type Stylex$Create = <S: { ... }>(
   styles: S
 ) => $ReadOnly<$ObjMap<S, MapNamespaces>>;
+
+// This is the type for the variables object
+declare export opaque type StyleXVarsTheme<+Vars: { +[string]: string }>: Vars;
+
+export type Stylex$CreateVars = <+Vars: { +[string]: string }>(
+  styles: Vars,
+  config?: { themeName: string }
+) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;
+
+export type Stylex$OverrideVars = <+Vars: { +[string]: string }>(
+  styles: Vars & { __themeName__: string },
+  stylesOverride: Vars,
+  config?: { themeName: string }
+) => StyleXVarsTheme<$ReadOnly<$ObjMapConst<Vars, string>>>;

package/lib/stylex.d.ts

@@ -10,27 +10,35 @@
 import type {
   Keyframes,
   Stylex$Create,
+  Stylex$CreateVars,
+  Stylex$OverrideVars,
   StyleXArray,
   MapNamespace,
 } from './StyleXTypes';
 import injectStyle from './stylex-inject';
 type DedupeStyles = Readonly<{
+  $$css: true;
   [key: string]: string | Readonly<{ [key: string]: string }>;
 }>;
 export declare function spread(
   styles: StyleXArray<
     | (null | undefined | DedupeStyles)
     | boolean
-    | { [$$Key$$: string]: string | number }
+    | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
   >,
   _options?: {}
-): { className: string; style: { [$$Key$$: string]: string | number } };
+): Readonly<{
+  className: string;
+  style: Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>;
+}>;
 type Stylex$Include = <
   TStyles extends { readonly [$$Key$$: string]: string | number }
 >(
   _styles: MapNamespace<TStyles>
 ) => TStyles;
 export declare var create: Stylex$Create;
+export declare var unstable_createVars: Stylex$CreateVars;
+export declare var unstable_overrideVars: Stylex$OverrideVars;
 export declare var include: Stylex$Include;
 export declare var keyframes: (_keyframes: Keyframes) => string;
 export declare var firstThatWorks: <T extends string | number>(
@@ -45,12 +53,19 @@ type IStyleX = {
     >
   ): string;
   spread: (
-    styles: ReadonlyArray<
-      StyleXArray<(null | undefined | DedupeStyles) | boolean>
+    styles: StyleXArray<
+      | (null | undefined | DedupeStyles)
+      | boolean
+      | Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>
     >,
-    options?: {}
-  ) => { className: string; style: { [$$Key$$: string]: string | number } };
+    _options?: {}
+  ) => Readonly<{
+    className: string;
+    style: Readonly<{ $$css?: void; [$$Key$$: string]: string | number }>;
+  }>;
   create: Stylex$Create;
+  unstable_createVars: Stylex$CreateVars;
+  unstable_overrideVars: Stylex$OverrideVars;
   include: Stylex$Include;
   firstThatWorks: <T extends string | number>(
     ...v: ReadonlyArray<T>

package/lib/stylex.js

@@ -14,7 +14,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.keyframes = exports.inject = exports.include = exports.firstThatWorks = exports.default = exports.create = exports.UNSUPPORTED_PROPERTY = void 0;
 exports.spread = spread;
-exports.stylex = void 0;
+exports.unstable_overrideVars = exports.unstable_createVars = exports.stylex = void 0;
 var _stylexInject = _interopRequireDefault(require("./stylex-inject"));
 var _styleq = require("styleq");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,11 +28,21 @@ function spread(styles, _options) {
 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.');
+}
+function stylexOverrideVars(_styles) {
+  throw new Error('stylex.overrideVars 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.');
 }
 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 keyframes = _keyframes => {
@@ -58,6 +68,8 @@ function _stylex() {
 }
 _stylex.spread = spread;
 _stylex.create = create;
+_stylex.unstable_createVars = unstable_createVars;
+_stylex.unstable_overrideVars = unstable_overrideVars;
 _stylex.include = include;
 _stylex.keyframes = keyframes;
 _stylex.firstThatWorks = firstThatWorks;

package/lib/stylex.js.flow

@@ -10,20 +10,30 @@
 import type {
   Keyframes,
   Stylex$Create,
+  Stylex$CreateVars,
+  Stylex$OverrideVars,
   StyleXArray,
   MapNamespace,
 } from './StyleXTypes';
 
 import injectStyle from './stylex-inject';
 type DedupeStyles = $ReadOnly<{
+  $$css: true,
   [key: string]: string | $ReadOnly<{ [key: string]: string, ... }>,
   ...
 }>;
 
 declare export function spread(
-  styles: StyleXArray<?DedupeStyles | boolean | { [string]: string | number }>,
+  styles: StyleXArray<
+    | ?DedupeStyles
+    | boolean
+    | $ReadOnly<{ $$css?: void, [string]: string | number }>
+  >,
   _options?: { ... }
-): { className: string, style: { [string]: string | number } };
+): $ReadOnly<{
+  className: string,
+  style: $ReadOnly<{ $$css?: void, [string]: string | number }>,
+}>;
 
 type Stylex$Include = <TStyles: { +[string]: string | number }>(
   _styles: MapNamespace<TStyles>
@@ -31,6 +41,10 @@ type Stylex$Include = <TStyles: { +[string]: string | number }>(
 
 declare export var create: Stylex$Create;
 
+declare export var unstable_createVars: Stylex$CreateVars;
+
+declare export var unstable_overrideVars: Stylex$OverrideVars;
+
 declare export var include: Stylex$Include;
 
 declare export var keyframes: (_keyframes: Keyframes) => string;
@@ -46,13 +60,19 @@ declare export var UNSUPPORTED_PROPERTY: <T>(_props: T) => T;
 type IStyleX = {
   (...styles: $ReadOnlyArray<StyleXArray<?DedupeStyles | boolean>>): string,
   spread: (
-    styles: $ReadOnlyArray<StyleXArray<?DedupeStyles | boolean>>,
-    options?: { ... }
-  ) => {
+    styles: StyleXArray<
+      | ?DedupeStyles
+      | boolean
+      | $ReadOnly<{ $$css?: void, [string]: string | number }>
+    >,
+    _options?: { ... }
+  ) => $ReadOnly<{
     className: string,
-    style: { [string]: string | number },
-  },
+    style: $ReadOnly<{ $$css?: void, [string]: string | number }>,
+  }>,
   create: Stylex$Create,
+  unstable_createVars: Stylex$CreateVars,
+  unstable_overrideVars: Stylex$OverrideVars,
   include: Stylex$Include,
   firstThatWorks: <T: string | number>(
     ...v: $ReadOnlyArray<T>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.13",
+  "version": "0.2.0-beta.15",
   "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.13"
+    "@stylexjs/scripts": "0.2.0-beta.15"
   },
   "jest": {},
   "files": [