@stylexjs/shared 0.5.1 → 0.6.0

package/lib/types/index.d.ts

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

package/lib/types/index.js

@@ -3,40 +3,35 @@
 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.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.CSSType = exports.Angle = void 0;
-class CSSType {}
-exports.CSSType = CSSType;
-class Angle extends CSSType {
-  syntax = '<angle>';
-  static syntax = '<angle>';
+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) {
-    super();
     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 CSSType {
+class Color extends BaseCSSType {
   syntax = '<color>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
     return new Color(value);
   }
 }
 exports.Color = Color;
 const color = exports.color = Color.create;
-class Url extends CSSType {
+class Url extends BaseCSSType {
   syntax = '<url>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
     return new Url(value);
   }
@@ -55,24 +50,16 @@ class Image extends Url {
 }
 exports.Image = Image;
 const image = exports.image = Image.create;
-class Integer extends CSSType {
+class Integer extends BaseCSSType {
   syntax = '<integer>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
-    return new Integer(value);
+    return new Integer(convertNumberToStringUsing(String, '0')(value));
   }
 }
 exports.Integer = Integer;
 const integer = exports.integer = Integer.create;
-class LengthPercentage extends CSSType {
+class LengthPercentage extends BaseCSSType {
   syntax = '<length-percentage>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static createLength(value) {
     return new LengthPercentage(convertNumberToLength(value));
   }
@@ -84,80 +71,54 @@ exports.LengthPercentage = LengthPercentage;
 const lengthPercentage = exports.lengthPercentage = LengthPercentage.createLength;
 class Length extends LengthPercentage {
   syntax = '<length>';
-  constructor(value) {
-    super(convertNumberToLength(value));
-  }
   static create(value) {
-    return new Length(value);
+    return new Length(convertNumberToLength(value));
   }
 }
 exports.Length = Length;
 const length = exports.length = Length.create;
 class Percentage extends LengthPercentage {
   syntax = '<percentage>';
-  constructor(value) {
-    super(convertNumberToPercentage(value));
-  }
   static create(value) {
-    return new Percentage(value);
+    return new Percentage(convertNumberToPercentage(value));
   }
 }
 exports.Percentage = Percentage;
 const percentage = exports.percentage = Percentage.create;
-class Num extends CSSType {
+class Num extends BaseCSSType {
   syntax = '<number>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
-    return new Num(value);
+    return new Num(convertNumberToBareString(value));
   }
 }
 exports.Num = Num;
 const number = exports.number = Num.create;
-class Resolution extends CSSType {
+class Resolution extends BaseCSSType {
   syntax = '<resolution>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
     return new Resolution(value);
   }
 }
 exports.Resolution = Resolution;
 const resolution = exports.resolution = Resolution.create;
-class Time extends CSSType {
+class Time extends BaseCSSType {
   syntax = '<time>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
     return new Time(value);
   }
 }
 exports.Time = Time;
 const time = exports.time = Time.create;
-class TransformFunction extends CSSType {
+class TransformFunction extends BaseCSSType {
   syntax = '<transform-function>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
     return new TransformFunction(value);
   }
 }
 exports.TransformFunction = TransformFunction;
 const transformFunction = exports.transformFunction = TransformFunction.create;
-class TransformList extends CSSType {
+class TransformList extends BaseCSSType {
   syntax = '<transform-list>';
-  constructor(value) {
-    super();
-    this.value = value;
-  }
   static create(value) {
     return new TransformList(value);
   }
@@ -172,20 +133,15 @@ const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
     return value;
   }
   if (typeof value === 'object') {
-    const {
-      default: defaultValue,
-      ...rest
-    } = value;
-    const defaultResult = convertNumberToLength(defaultValue);
-    const result = {
-      default: typeof defaultResult === 'string' ? defaultResult : defaultStr
-    };
-    for (const [key, value] of Object.entries(rest)) {
-      result[key] = convertNumberToLength(value);
+    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');