@stylexjs/shared 0.2.0-beta.9 → 0.4.0

package/lib/stylex-keyframes.js

@@ -11,35 +11,19 @@ var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl")
 var _transformValue = _interopRequireDefault(require("./transform-value"));
 var _dashify = _interopRequireDefault(require("./utils/dashify"));
 var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- *
- * 
- */
-
-// Similar to `stylex.create` it takes an object of keyframes
-// and returns a string after hashing it.
-//
-// It also expands shorthand properties to maintain parity with
-// `stylex.create`.
 function styleXKeyframes(frames) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const {
-    stylexSheetName = '<>',
     classNamePrefix = 'x'
   } = options;
-  const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
+  const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, 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 ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
   const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry));
   const ltrString = constructKeyframesObj(ltrStyles);
   const rtlString = constructKeyframesObj(rtlStyles);
-
-  // This extra `-B` is kept for some idiosyncratic legacy compatibility for now.
-  const animationName = classNamePrefix + (0, _hash.default)(stylexSheetName + ltrString) + '-B';
+  const animationName = classNamePrefix + (0, _hash.default)('<>' + ltrString) + '-B';
   const ltr = `@keyframes ${animationName}{${ltrString}}`;
   const rtl = ltrString === rtlString ? null : `@keyframes ${animationName}{${rtlString}}`;
   return [animationName, {
@@ -55,15 +39,11 @@ function expandFrameShorthands(frame, options) {
       return [key, value];
     }
     return null;
-  }).filter(Boolean))
-  // Keyframes are not combined. The nulls can be skipped
-  .filter(_ref2 => {
-    let [key, value] = _ref2;
+  }).filter(Boolean)).filter(_ref2 => {
+    let [_key, value] = _ref2;
     return value != null;
   }));
 }
-
-// Create t
 function constructKeyframesObj(frames) {
   return (0, _objectUtils.objEntries)(frames).map(_ref3 => {
     let [key, value] = _ref3;

package/lib/stylex-keyframes.js.flow

@@ -0,0 +1,20 @@
+/**
+ * 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';
+
+// Similar to `stylex.create` it takes an object of keyframes
+// and returns a string after hashing it.
+//
+// It also expands shorthand properties to maintain parity with
+// `stylex.create`.
+declare export default function styleXKeyframes(
+  frames: { +[string]: { +[string]: string | number } },
+  options: StyleXOptions,
+): [string, InjectableStyle];

package/lib/transform-value.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { StyleXOptions } from './common-types';
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+export default transformValue;
+export declare function getNumberSuffix(key: string): string;
+export declare const timeUnits: Set<string>;
+export declare const lengthUnits: Set<string>;

package/lib/transform-value.js

@@ -4,25 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = transformValue;
+exports.getNumberSuffix = getNumberSuffix;
+exports.timeUnits = exports.lengthUnits = void 0;
 var _normalizeValue = _interopRequireDefault(require("./utils/normalize-value"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * 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.
- * 
- */
-
-/**
- * Convert a CSS value in JS to the final CSS string value
- */
-function transformValue(key, rawValue) {
+function transformValue(key, rawValue, options) {
   const value = typeof rawValue === 'number' ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key) : rawValue;
-
-  // content is one of the values that needs to wrapped in quotes.
-  // Users may write `''` without thinking about it, so we fix that.
-  if (key === 'content' && typeof value === 'string') {
+  if ((key === 'content' || key === 'hyphenateCharacter' || key === 'hyphenate-character') && typeof value === 'string') {
     const val = value.trim();
     if (val.match(/^attr\([a-zA-Z0-9-]+\)$/)) {
       return val;
@@ -31,7 +19,7 @@ function transformValue(key, rawValue) {
       return `"${val}"`;
     }
   }
-  return (0, _normalizeValue.default)(value, key);
+  return (0, _normalizeValue.default)(value, key, options);
 }
 function getNumberSuffix(key) {
   if (unitlessNumberProperties.has(key)) {
@@ -44,15 +32,13 @@ function getNumberSuffix(key) {
     return suffix;
   }
 }
-const unitlessNumberProperties = new Set(['animationIterationCount', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'columnCount', 'flex',
-// Unsupported
-'flexGrow', 'flexPositive', 'flexShrink', 'flexOrder', 'gridRow', 'gridColumn', 'fontWeight', 'lineClamp', 'lineHeight', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth']);
-
-// List of properties that have custom suffixes for numbers
+const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'columnCount', 'flex', 'flexGrow', 'flexPositive', 'flexShrink', 'flexOrder', 'gridRow', 'gridColumn', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth']);
 const numberPropertySuffixes = {
   animationDelay: 'ms',
   animationDuration: 'ms',
   transitionDelay: 'ms',
   transitionDuration: 'ms',
   voiceDuration: 'ms'
-};
+};
+const timeUnits = exports.timeUnits = new Set(Object.keys(numberPropertySuffixes));
+const lengthUnits = exports.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderImageWidth', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maskBorderOutset', 'maskBorderWidth', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);

package/lib/transform-value.js.flow

@@ -0,0 +1,25 @@
+/**
+ * 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 { StyleXOptions } from './common-types';
+
+/**
+ * Convert a CSS value in JS to the final CSS string value
+ */
+declare export default function transformValue(
+  key: string,
+  rawValue: string | number,
+  options: StyleXOptions,
+): string;
+
+declare export function getNumberSuffix(key: string): string;
+
+declare export const timeUnits: Set<string>;
+
+declare export const lengthUnits: Set<string>;

package/lib/types/index.d.ts

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

package/lib/types/index.js

@@ -0,0 +1,191 @@
+"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.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>';
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Angle(value);
+  }
+}
+exports.Angle = Angle;
+const angle = exports.angle = Angle.create;
+class Color extends CSSType {
+  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 {
+  syntax = '<url>';
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  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 CSSType {
+  syntax = '<integer>';
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Integer(value);
+  }
+}
+exports.Integer = Integer;
+const integer = exports.integer = Integer.create;
+class LengthPercentage extends CSSType {
+  syntax = '<length-percentage>';
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  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>';
+  constructor(value) {
+    super(convertNumberToLength(value));
+  }
+  static create(value) {
+    return new Length(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);
+  }
+}
+exports.Percentage = Percentage;
+const percentage = exports.percentage = Percentage.create;
+class Num extends CSSType {
+  syntax = '<number>';
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Num(value);
+  }
+}
+exports.Num = Num;
+const number = exports.number = Num.create;
+class Resolution extends CSSType {
+  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 {
+  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 {
+  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 {
+  syntax = '<transform-list>';
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  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 {
+      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);
+    }
+    return result;
+  }
+  return value;
+};
+const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? '0' : `${value}px`, '0px');
+const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? '0' : `${value * 100}%`, '0');