@stylexjs/shared 0.17.4 → 0.18.0

package/lib/stylex-view-transition-class.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXViewTransitionClass;
+var _hash = _interopRequireDefault(require("./hash"));
+var _index = _interopRequireDefault(require("./preprocess-rules/index"));
+var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
+var _transformValue = _interopRequireDefault(require("./utils/transform-value"));
+var _dashify = _interopRequireDefault(require("./utils/dashify"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function styleXViewTransitionClass(styles, options = _defaultOptions.defaultOptions) {
+  const {
+    classNamePrefix = 'x'
+  } = options;
+  const preprocessedObject = (0, _objectUtils.objMap)(styles, style => _objectUtils.Pipe.create(style).pipe(style => preprocessProperties(style, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value, options))).done());
+  const expandedObject = (0, _objectUtils.objMapKeys)(preprocessedObject, k => `::view-transition-${(0, _dashify.default)(k)}`);
+  const styleStrings = (0, _objectUtils.objMap)(expandedObject, constructViewTransitionClassStyleStr);
+  const viewTransitionClassName = classNamePrefix + (0, _hash.default)(constructViewTransitionClassStyleStr(styleStrings));
+  const style = constructFinalViewTransitionCSSStr(styleStrings, viewTransitionClassName);
+  return [viewTransitionClassName, {
+    ltr: style,
+    rtl: null,
+    priority: 1
+  }];
+}
+function preprocessProperties(styles, options) {
+  return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(styles).flatMap(pair => (0, _index.default)(pair, options).map(([key, value]) => {
+    if (typeof value === 'string' || typeof value === 'number') {
+      return [key, value];
+    }
+    return null;
+  }).filter(Boolean)).filter(([_key, value]) => value != null));
+}
+function constructViewTransitionClassStyleStr(style) {
+  return (0, _objectUtils.objEntries)(style).map(([k, v]) => `${k}:${v};`).join('');
+}
+function constructFinalViewTransitionCSSStr(styles, className) {
+  return (0, _objectUtils.objEntries)(styles).map(([k, v]) => `${k}(*.${className}){${v}}`).join('');
+}

package/lib/stylex-view-transition-class.js.flow

@@ -0,0 +1,23 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+
+type StyleValue = { +[string]: string | number };
+type StyleObj = {
+  group?: StyleValue,
+  imagePair?: StyleValue,
+  old?: StyleValue,
+  new?: StyleValue,
+};
+
+declare export default function styleXViewTransitionClass(
+  styles: StyleObj,
+  options?: StyleXOptions,
+): [string, InjectableStyle];

package/lib/types/__tests__/stylex-types-test.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var t = _interopRequireWildcard(require("../index"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+describe('stylex-types-test', () => {
+  describe('class methods', () => {
+    test('angle', () => {
+      const obj = t.Angle.create('45deg');
+      expect(obj.value).toEqual('45deg');
+      expect(obj.syntax).toEqual('<angle>');
+    });
+    test('color', () => {
+      const value = {
+        default: 'red'
+      };
+      const obj = t.Color.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<color>');
+    });
+    test('image', () => {
+      const value = 'url(#image)';
+      const obj = t.Image.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<image>');
+    });
+    test('integer', () => {
+      const value = 1;
+      const obj = t.Integer.create(value);
+      expect(obj.value).toEqual('1');
+      expect(obj.syntax).toEqual('<integer>');
+    });
+    test('length', () => {
+      const value = '1px';
+      const obj = t.Length.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<length>');
+      const obj2 = t.Length.create(1);
+      expect(obj2.value).toEqual(value);
+      expect(obj2.syntax).toEqual('<length>');
+    });
+    test('percentage', () => {
+      const value = '50%';
+      const obj = t.Percentage.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<percentage>');
+      const obj2 = t.Percentage.create(0.5);
+      expect(obj2.value).toEqual(value);
+      expect(obj2.syntax).toEqual('<percentage>');
+    });
+    test('num', () => {
+      const value = 1;
+      const obj = t.Num.create(value);
+      expect(obj.value).toEqual('1');
+      expect(obj.syntax).toEqual('<number>');
+    });
+    test('integer', () => {
+      const value = 1;
+      const obj = t.Integer.create(value);
+      expect(obj.value).toEqual('1');
+      expect(obj.syntax).toEqual('<integer>');
+    });
+    test('resolution', () => {
+      const value = '96dpi';
+      const obj = t.Resolution.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<resolution>');
+    });
+    test('time', () => {
+      const value = '1s';
+      const obj = t.Time.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<time>');
+    });
+    test('transformFunction', () => {
+      const value = 'translateX(10px)';
+      const obj = t.TransformFunction.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<transform-function>');
+    });
+    test('transformList', () => {
+      const value = 'translateX(10px)';
+      const obj = t.TransformList.create(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<transform-list>');
+    });
+    test('url', () => {
+      const value = 'url(#image)';
+      const obj = t.Url.create(value);
+      expect(obj.value).toEqual(value);
+    });
+  });
+  describe('standalone factory functions', () => {
+    test('angle', () => {
+      const obj = t.angle('45deg');
+      expect(obj.value).toEqual('45deg');
+      expect(obj.syntax).toEqual('<angle>');
+    });
+    test('color', () => {
+      const value = {
+        default: 'red'
+      };
+      const obj = t.color(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<color>');
+    });
+    test('image', () => {
+      const value = 'url(#image)';
+      const obj = t.image(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<image>');
+    });
+    test('integer', () => {
+      const value = 1;
+      const obj = t.integer(value);
+      expect(obj.value).toEqual('1');
+      expect(obj.syntax).toEqual('<integer>');
+    });
+    test('length', () => {
+      const value = '1px';
+      const obj = t.length(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<length>');
+      const obj2 = t.length(1);
+      expect(obj2.value).toEqual(value);
+      expect(obj2.syntax).toEqual('<length>');
+    });
+    test('percentage', () => {
+      const value = '50%';
+      const obj = t.percentage(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<percentage>');
+      const obj2 = t.percentage(0.5);
+      expect(obj2.value).toEqual(value);
+      expect(obj2.syntax).toEqual('<percentage>');
+    });
+    test('num', () => {
+      const value = 1;
+      const obj = t.number(value);
+      expect(obj.value).toEqual('1');
+      expect(obj.syntax).toEqual('<number>');
+    });
+    test('integer', () => {
+      const value = 1;
+      const obj = t.integer(value);
+      expect(obj.value).toEqual('1');
+      expect(obj.syntax).toEqual('<integer>');
+    });
+    test('resolution', () => {
+      const value = '96dpi';
+      const obj = t.resolution(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<resolution>');
+    });
+    test('time', () => {
+      const value = '1s';
+      const obj = t.time(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<time>');
+    });
+    test('transformFunction', () => {
+      const value = 'translateX(10px)';
+      const obj = t.transformFunction(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<transform-function>');
+    });
+    test('transformList', () => {
+      const value = 'translateX(10px)';
+      const obj = t.transformList(value);
+      expect(obj.value).toEqual(value);
+      expect(obj.syntax).toEqual('<transform-list>');
+    });
+    test('url', () => {
+      const value = 'url(#image)';
+      const obj = t.url(value);
+      expect(obj.value).toEqual(value);
+    });
+  });
+});

package/lib/types/index.d.ts

@@ -0,0 +1,254 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+/* eslint-disable no-unused-vars, no-redeclare */
+type NestedWithNumbers =
+  | number
+  | string
+  | Readonly<{
+      default: NestedWithNumbers;
+      [$$Key$$: string]: NestedWithNumbers;
+    }>;
+type ValueWithDefault =
+  | string
+  | Readonly<{
+      default: ValueWithDefault;
+      [$$Key$$: string]: ValueWithDefault;
+    }>;
+type CSSSyntax =
+  | '*'
+  | '<length>'
+  | '<number>'
+  | '<percentage>'
+  | '<length-percentage>'
+  | '<color>'
+  | '<image>'
+  | '<url>'
+  | '<integer>'
+  | '<angle>'
+  | '<time>'
+  | '<resolution>'
+  | '<transform-function>'
+  | '<custom-ident>'
+  | '<transform-list>';
+type CSSSyntaxType = CSSSyntax;
+declare class BaseCSSType {
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault);
+}
+export interface CSSType<_T extends string | number = string | number> {
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+}
+export declare const isCSSType: (
+  value: unknown,
+) => value is CSSType<string | number>;
+export declare type isCSSType = typeof isCSSType;
+type AngleValue = string;
+export declare class Angle<T extends AngleValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static readonly syntax: CSSSyntaxType;
+  static create<T extends AngleValue = AngleValue>(
+    value: ValueWithDefault,
+  ): Angle<T>;
+}
+export declare const angle: <T extends AngleValue = AngleValue>(
+  value: ValueWithDefault,
+) => Angle<T>;
+export declare type angle = typeof angle;
+type ColorValue = string;
+export declare class Color<T extends ColorValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends ColorValue = ColorValue>(
+    value: ValueWithDefault,
+  ): Color<T>;
+}
+export declare const color: <T extends ColorValue = ColorValue>(
+  value: ValueWithDefault,
+) => Color<T>;
+export declare type color = typeof color;
+type URLValue = string;
+export declare class Url<T extends URLValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends URLValue = URLValue>(value: ValueWithDefault): Url<T>;
+}
+export declare const url: <T extends URLValue = URLValue>(
+  value: ValueWithDefault,
+) => Url<T>;
+export declare type url = typeof url;
+type ImageValue = string;
+export declare class Image<T extends ImageValue>
+  extends Url<T>
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault);
+  static create<T extends ImageValue = ImageValue>(
+    value: ValueWithDefault,
+  ): Image<T>;
+}
+export declare const image: <T extends ImageValue = ImageValue>(
+  value: ValueWithDefault,
+) => Image<T>;
+export declare type image = typeof image;
+type IntegerValue = number;
+export declare class Integer<T extends IntegerValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends IntegerValue = IntegerValue>(value: T): Integer<T>;
+}
+export declare const integer: <T extends IntegerValue = IntegerValue>(
+  value: T,
+) => Integer<T>;
+export declare type integer = typeof integer;
+type LengthPercentageValue = string;
+export declare class LengthPercentage<_T extends LengthPercentageValue>
+  extends BaseCSSType
+  implements CSSType<string>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static createLength<_T extends LengthPercentageValue | number>(
+    value: ValueWithDefault,
+  ): LengthPercentage<string>;
+  static createPercentage<_T extends LengthPercentageValue | number>(
+    value: ValueWithDefault,
+  ): LengthPercentage<string>;
+}
+export declare const lengthPercentage: <
+  _T extends LengthPercentageValue | number,
+>(
+  value: ValueWithDefault,
+) => LengthPercentage<string>;
+export declare type lengthPercentage = typeof lengthPercentage;
+type LengthValue = number | string;
+export declare class Length<_T extends LengthValue>
+  extends LengthPercentage<string>
+  implements CSSType<string>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends LengthValue = LengthValue>(
+    value: NestedWithNumbers,
+  ): Length<T>;
+}
+export declare const length: <T extends LengthValue = LengthValue>(
+  value: NestedWithNumbers,
+) => Length<T>;
+export declare type length = typeof length;
+type PercentageValue = string | number;
+export declare class Percentage<_T extends PercentageValue>
+  extends LengthPercentage<string>
+  implements CSSType<string>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends PercentageValue = PercentageValue>(
+    value: NestedWithNumbers,
+  ): Percentage<T>;
+}
+export declare const percentage: <T extends PercentageValue = PercentageValue>(
+  value: NestedWithNumbers,
+) => Percentage<T>;
+export declare type percentage = typeof percentage;
+type NumberValue = number;
+export declare class Num<T extends NumberValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends NumberValue = NumberValue>(
+    value: NestedWithNumbers,
+  ): Num<T>;
+}
+export declare const number: <T extends NumberValue = NumberValue>(
+  value: NestedWithNumbers,
+) => Num<T>;
+type ResolutionValue = string | 0;
+export declare class Resolution<T extends ResolutionValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends ResolutionValue = ResolutionValue>(
+    value: ValueWithDefault,
+  ): Resolution<T>;
+}
+export declare const resolution: <T extends ResolutionValue = ResolutionValue>(
+  value: ValueWithDefault,
+) => Resolution<T>;
+export declare type resolution = typeof resolution;
+type TimeValue = string | 0;
+export declare class Time<T extends TimeValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends TimeValue = TimeValue>(
+    value: ValueWithDefault,
+  ): Time<T>;
+}
+export declare const time: <T extends TimeValue = TimeValue>(
+  value: ValueWithDefault,
+) => Time<T>;
+export declare type time = typeof time;
+type TransformFunctionValue = string;
+export declare class TransformFunction<T extends TransformFunctionValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends TransformFunctionValue = TransformFunctionValue>(
+    value: ValueWithDefault,
+  ): TransformFunction<T>;
+}
+export declare const transformFunction: <
+  T extends TransformFunctionValue = TransformFunctionValue,
+>(
+  value: ValueWithDefault,
+) => TransformFunction<T>;
+export declare type transformFunction = typeof transformFunction;
+type TransformListValue = string;
+export declare class TransformList<T extends TransformListValue>
+  extends BaseCSSType
+  implements CSSType<T>
+{
+  readonly value: ValueWithDefault;
+  readonly syntax: CSSSyntaxType;
+  static create<T extends TransformListValue = TransformListValue>(
+    value: ValueWithDefault,
+  ): TransformList<T>;
+}
+export declare const transformList: <
+  T extends TransformListValue = TransformListValue,
+>(
+  value: ValueWithDefault,
+) => TransformList<T>;
+export declare type transformList = typeof transformList;

package/lib/types/index.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.url = exports.transformList = exports.transformFunction = exports.time = exports.resolution = exports.percentage = exports.number = exports.lengthPercentage = exports.length = exports.isCSSType = exports.integer = exports.image = exports.color = exports.angle = exports.Url = exports.TransformList = exports.TransformFunction = exports.Time = exports.Resolution = exports.Percentage = exports.Num = exports.LengthPercentage = exports.Length = exports.Integer = exports.Image = exports.Color = exports.Angle = void 0;
+class BaseCSSType {
+  constructor(value) {
+    this.value = value;
+  }
+}
+const isCSSType = value => {
+  return value instanceof BaseCSSType && value.value != null && typeof value.syntax === 'string';
+};
+exports.isCSSType = isCSSType;
+class Angle extends BaseCSSType {
+  syntax = '<angle>';
+  static syntax = '<angle>';
+  static create(value) {
+    return new Angle(value);
+  }
+}
+exports.Angle = Angle;
+const angle = exports.angle = Angle.create;
+class Color extends BaseCSSType {
+  syntax = '<color>';
+  static create(value) {
+    return new Color(value);
+  }
+}
+exports.Color = Color;
+const color = exports.color = Color.create;
+class Url extends BaseCSSType {
+  syntax = '<url>';
+  static create(value) {
+    return new Url(value);
+  }
+}
+exports.Url = Url;
+const url = exports.url = Url.create;
+class Image extends Url {
+  syntax = '<image>';
+  constructor(value) {
+    super(value);
+    this.value = value;
+  }
+  static create(value) {
+    return new Image(value);
+  }
+}
+exports.Image = Image;
+const image = exports.image = Image.create;
+class Integer extends BaseCSSType {
+  syntax = '<integer>';
+  static create(value) {
+    return new Integer(convertNumberToStringUsing(String, '0')(value));
+  }
+}
+exports.Integer = Integer;
+const integer = exports.integer = Integer.create;
+class LengthPercentage extends BaseCSSType {
+  syntax = '<length-percentage>';
+  static createLength(value) {
+    return new LengthPercentage(convertNumberToLength(value));
+  }
+  static createPercentage(value) {
+    return new LengthPercentage(convertNumberToPercentage(value));
+  }
+}
+exports.LengthPercentage = LengthPercentage;
+const lengthPercentage = exports.lengthPercentage = LengthPercentage.createLength;
+class Length extends LengthPercentage {
+  syntax = '<length>';
+  static create(value) {
+    return new Length(convertNumberToLength(value));
+  }
+}
+exports.Length = Length;
+const length = exports.length = Length.create;
+class Percentage extends LengthPercentage {
+  syntax = '<percentage>';
+  static create(value) {
+    return new Percentage(convertNumberToPercentage(value));
+  }
+}
+exports.Percentage = Percentage;
+const percentage = exports.percentage = Percentage.create;
+class Num extends BaseCSSType {
+  syntax = '<number>';
+  static create(value) {
+    return new Num(convertNumberToBareString(value));
+  }
+}
+exports.Num = Num;
+const number = exports.number = Num.create;
+class Resolution extends BaseCSSType {
+  syntax = '<resolution>';
+  static create(value) {
+    return new Resolution(value);
+  }
+}
+exports.Resolution = Resolution;
+const resolution = exports.resolution = Resolution.create;
+class Time extends BaseCSSType {
+  syntax = '<time>';
+  static create(value) {
+    return new Time(value);
+  }
+}
+exports.Time = Time;
+const time = exports.time = Time.create;
+class TransformFunction extends BaseCSSType {
+  syntax = '<transform-function>';
+  static create(value) {
+    return new TransformFunction(value);
+  }
+}
+exports.TransformFunction = TransformFunction;
+const transformFunction = exports.transformFunction = TransformFunction.create;
+class TransformList extends BaseCSSType {
+  syntax = '<transform-list>';
+  static create(value) {
+    return new TransformList(value);
+  }
+}
+exports.TransformList = TransformList;
+const transformList = exports.transformList = TransformList.create;
+const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
+  if (typeof value === 'number') {
+    return transformNumber(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'object') {
+    const val = value;
+    const result = {};
+    for (const key of Object.keys(val)) {
+      result[key] = convertNumberToStringUsing(transformNumber, defaultStr)(val[key]);
+    }
+    return result;
+  }
+  return value;
+};
+const convertNumberToBareString = convertNumberToStringUsing(value => String(value), '0');
+const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? '0' : `${value}px`, '0px');
+const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? '0' : `${value * 100}%`, '0');