@stylexjs/stylex 0.11.1 → 0.13.0

package/lib/es/stylex.d.ts

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+import type {
+  CompiledStyles,
+  InlineStyles,
+  Keyframes,
+  StaticStyles,
+  StaticStylesWithout,
+  StyleX$Create,
+  StyleX$CreateTheme,
+  StyleX$DefineVars,
+  StyleX$DefineConsts,
+  StyleXArray,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  VarGroup,
+  PositionTry,
+} from './types/StyleXTypes';
+import type { ValueWithDefault } from './types/StyleXUtils';
+import * as Types from './types/VarTypes';
+export type {
+  StaticStyles,
+  StaticStylesWithout,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  Types,
+  VarGroup,
+};
+export declare const create: StyleX$Create;
+export declare const createTheme: StyleX$CreateTheme;
+export declare const defineConsts: StyleX$DefineConsts;
+export declare const defineVars: StyleX$DefineVars;
+export declare const firstThatWorks: <T extends string | number>(
+  ..._styles: ReadonlyArray<T>
+) => ReadonlyArray<T>;
+export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare const positionTry: (_positionTry: PositionTry) => string;
+export declare function props(
+  this: null | undefined | unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
+): Readonly<{
+  className?: string;
+  'data-style-src'?: string;
+  style?: Readonly<{ [$$Key$$: string]: string | number }>;
+}>;
+export declare const types: {
+  angle: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Angle<T>;
+  color: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Color<T>;
+  url: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Url<T>;
+  image: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Image<T>;
+  integer: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Integer<T>;
+  lengthPercentage: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.LengthPercentage<T>;
+  length: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Length<T>;
+  percentage: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Percentage<T>;
+  number: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Num<T>;
+  resolution: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Resolution<T>;
+  time: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Time<T>;
+  transformFunction: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.TransformFunction<T>;
+  transformList: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.TransformList<T>;
+};
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
+
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
+
+type IStyleX = {
+  (
+    ...styles: ReadonlyArray<
+      StyleXArray<(null | undefined | CompiledStyles) | boolean>
+    >
+  ): string;
+  create: StyleX$Create;
+  createTheme: StyleX$CreateTheme;
+  defineVars: StyleX$DefineVars;
+  firstThatWorks: <T extends string | number>(
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>;
+  keyframes: (keyframes: Keyframes) => string;
+  positionTry: (positionTry: PositionTry) => string;
+  props: (
+    this: null | undefined | unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
+  ) => Readonly<{
+    className?: string;
+    'data-style-src'?: string;
+    style?: Readonly<{ [$$Key$$: string]: string | number }>;
+  }>;
+  types: typeof types;
+  __customProperties?: { [$$Key$$: string]: unknown };
+};
+export declare const legacyMerge: IStyleX;

package/lib/es/stylex.js.flow

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import type {
+  CompiledStyles,
+  InlineStyles,
+  Keyframes,
+  StaticStyles,
+  StaticStylesWithout,
+  StyleX$Create,
+  StyleX$CreateTheme,
+  StyleX$DefineVars,
+  StyleX$DefineConsts,
+  StyleXArray,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  VarGroup,
+  PositionTry,
+} from './types/StyleXTypes';
+import type { ValueWithDefault } from './types/StyleXUtils';
+import * as Types from './types/VarTypes';
+
+export type {
+  StaticStyles,
+  StaticStylesWithout,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  Types,
+  VarGroup,
+};
+
+declare export const create: StyleX$Create;
+
+declare export const createTheme: StyleX$CreateTheme;
+
+declare export const defineConsts: StyleX$DefineConsts;
+
+declare export const defineVars: StyleX$DefineVars;
+
+declare export const firstThatWorks: <T: string | number>(
+  ..._styles: $ReadOnlyArray<T>
+) => $ReadOnlyArray<T>;
+
+declare export const keyframes: (_keyframes: Keyframes) => string;
+
+declare export const positionTry: (_positionTry: PositionTry) => string;
+
+declare export function props(
+  this: ?mixed,
+  ...styles: $ReadOnlyArray<
+    StyleXArray<
+      ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+    >,
+  >
+): $ReadOnly<{
+  className?: string,
+  'data-style-src'?: string,
+  style?: $ReadOnly<{ [string]: string | number }>,
+}>;
+
+declare export const types: {
+  angle: <T: string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Angle<T>,
+  color: <T: string = string>(_v: ValueWithDefault<T>) => Types.Color<T>,
+  url: <T: string = string>(_v: ValueWithDefault<T>) => Types.Url<T>,
+  image: <T: string = string>(_v: ValueWithDefault<T>) => Types.Image<T>,
+  integer: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Integer<T>,
+  lengthPercentage: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.LengthPercentage<T>,
+  length: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Length<T>,
+  percentage: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Percentage<T>,
+  number: <T: number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Num<T>,
+  resolution: <T: string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Resolution<T>,
+  time: <T: string | 0 = string | 0>(_v: ValueWithDefault<T>) => Types.Time<T>,
+  transformFunction: <T: string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.TransformFunction<T>,
+  transformList: <T: string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.TransformList<T>,
+};
+
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
+
+type IStyleX = {
+  (...styles: $ReadOnlyArray<StyleXArray<?CompiledStyles | boolean>>): string,
+  create: StyleX$Create,
+  createTheme: StyleX$CreateTheme,
+  defineVars: StyleX$DefineVars,
+  firstThatWorks: <T: string | number>(
+    ...v: $ReadOnlyArray<T>
+  ) => $ReadOnlyArray<T>,
+  keyframes: (keyframes: Keyframes) => string,
+  positionTry: (positionTry: PositionTry) => string,
+  props: (
+    this: ?mixed,
+    ...styles: $ReadOnlyArray<
+      StyleXArray<
+        ?CompiledStyles | boolean | $ReadOnly<[CompiledStyles, InlineStyles]>,
+      >,
+    >
+  ) => $ReadOnly<{
+    className?: string,
+    'data-style-src'?: string,
+    style?: $ReadOnly<{ [string]: string | number }>,
+  }>,
+  types: typeof types,
+  __customProperties?: { [string]: mixed },
+  ...
+};
+
+declare export const legacyMerge: IStyleX;

package/lib/es/stylex.mjs

@@ -132,30 +132,15 @@ var styleqExports = /*@__PURE__*/ requireStyleq();
 
 const errorForFn = name => new Error(`Unexpected 'stylex.${name}' call at runtime. Styles must be compiled by '@stylexjs/babel-plugin'.`);
 const errorForType = key => errorForFn(`types.${key}`);
-function attrs() {
-  const {
-    className,
-    'data-style-src': dataStyleSrc,
-    style
-  } = props(...arguments);
-  const result = {};
-  if (className != null && className !== '') {
-    result.class = className;
-  }
-  if (style != null && Object.keys(style).length > 0) {
-    result.style = Object.keys(style).map(key => `${key}:${style[key]};`).join('');
-  }
-  if (dataStyleSrc != null && dataStyleSrc !== '') {
-    result['data-style-src'] = dataStyleSrc;
-  }
-  return result;
-}
 const create = function stylexCreate(_styles) {
   throw errorForFn('create');
 };
 const createTheme = (_baseTokens, _overrides) => {
   throw errorForFn('createTheme');
 };
+const defineConsts = function stylexDefineConsts(_styles) {
+  throw errorForFn('defineConsts');
+};
 const defineVars = function stylexDefineVars(_styles) {
   throw errorForFn('defineVars');
 };
@@ -165,6 +150,9 @@ const firstThatWorks = function () {
 const keyframes = _keyframes => {
   throw errorForFn('keyframes');
 };
+const positionTry = _positionTry => {
+  throw errorForFn('positionTry');
+};
 function props() {
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
@@ -230,14 +218,14 @@ function _legacyMerge() {
   const [className] = styleqExports.styleq(styles);
   return className;
 }
-_legacyMerge.attrs = attrs;
 _legacyMerge.create = create;
 _legacyMerge.createTheme = createTheme;
 _legacyMerge.defineVars = defineVars;
 _legacyMerge.firstThatWorks = firstThatWorks;
 _legacyMerge.keyframes = keyframes;
+_legacyMerge.positionTry = positionTry;
 _legacyMerge.props = props;
 _legacyMerge.types = types;
 const legacyMerge = _legacyMerge;
 
-export { attrs, create, createTheme, defineVars, firstThatWorks, keyframes, legacyMerge, props, types };
+export { create, createTheme, defineConsts, defineVars, firstThatWorks, keyframes, legacyMerge, positionTry, props, types };