@stylexjs/shared 0.2.0-beta.19 → 0.2.0-beta.21

package/lib/index.d.ts

@@ -25,6 +25,7 @@ import stylexFirstThatWorks from './stylex-first-that-works';
 import hash from './hash';
 import genFileBasedIdentifier from './utils/file-based-identifier';
 import * as m from './messages';
+export * as types from './types';
 import type {
   InjectableStyle as _InjectableStyle,
   CompiledNamespaces as _CompiledNamespaces,

package/lib/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.utils = exports.overrideVars = exports.messages = exports.keyframes = exports.include = exports.firstThatWorks = exports.createVars = exports.create = exports.IncludedStyles = void 0;
+exports.utils = exports.types = exports.overrideVars = exports.messages = exports.keyframes = exports.include = exports.firstThatWorks = exports.createVars = exports.create = exports.IncludedStyles = void 0;
 var _stylexCreate = _interopRequireDefault(require("./stylex-create"));
 var _stylexCreateVars = _interopRequireDefault(require("./stylex-create-vars"));
 var _stylexOverrideVars = _interopRequireDefault(require("./stylex-override-vars"));
@@ -13,6 +13,8 @@ var _stylexFirstThatWorks = _interopRequireDefault(require("./stylex-first-that-
 var _hash = _interopRequireDefault(require("./hash"));
 var _fileBasedIdentifier = _interopRequireDefault(require("./utils/file-based-identifier"));
 var m = _interopRequireWildcard(require("./messages"));
+var _types = _interopRequireWildcard(require("./types"));
+exports.types = _types;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/index.js.flow

@@ -31,6 +31,7 @@ import stylexFirstThatWorks from './stylex-first-that-works';
 import hash from './hash';
 import genFileBasedIdentifier from './utils/file-based-identifier';
 import * as m from './messages';
+export * as types from './types';
 
 import type {
   InjectableStyle as _InjectableStyle,

package/lib/preprocess-rules/application-order.d.ts

@@ -209,6 +209,12 @@ declare const aliases: {
   borderEnd: any;
   borderBlockEnd: any;
   borderStart: any;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
   borderHorizontalWidth: any;
   borderHorizontalStyle: any;
   borderHorizontalColor: any;
@@ -249,7 +255,7 @@ declare const aliases: {
   end: any;
 };
 declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
- * > 205 |   ...typeof shorthands,
+ * > 211 |   ...typeof shorthands,
  *       |   ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
  **/
 any>;

package/lib/preprocess-rules/application-order.js

@@ -173,6 +173,12 @@ const aliases = {
   borderEnd: shorthands.borderInlineEnd,
   borderBlockEnd: shorthands.borderBottom,
   borderStart: shorthands.borderInlineStart,
+  blockSize: val => [["height", val]],
+  inlineSize: val => [["width", val]],
+  minBlockSize: val => [["minHeight", val]],
+  minInlineSize: val => [["minWidth", val]],
+  maxBlockSize: val => [["maxHeight", val]],
+  maxInlineSize: val => [["maxWidth", val]],
   borderHorizontalWidth: shorthands.borderInlineWidth,
   borderHorizontalStyle: shorthands.borderInlineStyle,
   borderHorizontalColor: shorthands.borderInlineColor,

package/lib/preprocess-rules/application-order.js.flow

@@ -161,6 +161,12 @@ declare const aliases: {
   borderEnd: $FlowFixMe,
   borderBlockEnd: $FlowFixMe,
   borderStart: $FlowFixMe,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
   borderHorizontalWidth: $FlowFixMe,
   borderHorizontalStyle: $FlowFixMe,
   borderHorizontalColor: $FlowFixMe,

package/lib/preprocess-rules/legacy-expand-shorthands.d.ts

@@ -103,21 +103,78 @@ import type { TStyleValue } from '../common-types';
  */
 
 type TReturn = ReadonlyArray<[string, TStyleValue]>;
-declare const expansions: {
+declare const shorthands: {
   border: (rawValue: TStyleValue) => TReturn;
   borderColor: (rawValue: TStyleValue) => TReturn;
   borderHorizontal: (rawValue: TStyleValue) => TReturn;
   borderStyle: (rawValue: TStyleValue) => TReturn;
   borderVertical: (rawValue: TStyleValue) => TReturn;
   borderWidth: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalColor: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalStyle: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalWidth: (rawValue: TStyleValue) => TReturn;
+  borderVerticalColor: (rawValue: TStyleValue) => TReturn;
+  borderVerticalStyle: (rawValue: TStyleValue) => TReturn;
+  borderVerticalWidth: (rawValue: TStyleValue) => TReturn;
   borderRadius: (rawValue: TStyleValue) => TReturn;
+  inset: (rawValue: TStyleValue) => TReturn;
+  insetInline: (rawValue: TStyleValue) => TReturn;
+  insetBlock: (rawValue: TStyleValue) => TReturn;
   margin: (rawValue: TStyleValue) => TReturn;
   marginHorizontal: (rawValue: TStyleValue) => TReturn;
   marginVertical: (rawValue: TStyleValue) => TReturn;
   overflow: (rawValue: TStyleValue) => TReturn;
   padding: (rawValue: TStyleValue) => TReturn;
-  paddingHorizontal: (rawValue: TStyleValue) => TReturn;
-  paddingVertical: (rawValue: TStyleValue) => TReturn;
+  paddingHorizontal: (val: TStyleValue) => TReturn;
+  paddingVertical: (val: TStyleValue) => TReturn;
 };
+declare const aliases: {
+  insetBlockStart: (val: TStyleValue) => TReturn;
+  insetBlockEnd: (val: TStyleValue) => TReturn;
+  insetInlineStart: (val: TStyleValue) => TReturn;
+  insetInlineEnd: (val: TStyleValue) => TReturn;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
+  borderBlockWidth: any;
+  borderBlockStyle: any;
+  borderBlockColor: any;
+  borderBlockStartWidth: (val: TStyleValue) => TReturn;
+  borderBlockStartStyle: (val: TStyleValue) => TReturn;
+  borderBlockStartColor: (val: TStyleValue) => TReturn;
+  borderBlockEndWidth: (val: TStyleValue) => TReturn;
+  borderBlockEndStyle: (val: TStyleValue) => TReturn;
+  borderBlockEndColor: (val: TStyleValue) => TReturn;
+  borderInlineWidth: any;
+  borderInlineStyle: any;
+  borderInlineColor: any;
+  borderInlineStartWidth: (val: TStyleValue) => TReturn;
+  borderInlineStartStyle: (val: TStyleValue) => TReturn;
+  borderInlineStartColor: (val: TStyleValue) => TReturn;
+  borderInlineEndWidth: (val: TStyleValue) => TReturn;
+  borderInlineEndStyle: (val: TStyleValue) => TReturn;
+  borderInlineEndColor: (val: TStyleValue) => TReturn;
+  borderStartStartRadius: (val: TStyleValue) => TReturn;
+  borderStartEndRadius: (val: TStyleValue) => TReturn;
+  borderEndStartRadius: (val: TStyleValue) => TReturn;
+  borderEndEndRadius: (val: TStyleValue) => TReturn;
+  marginBlock: any;
+  marginBlockStart: (val: TStyleValue) => TReturn;
+  marginBlockEnd: (val: TStyleValue) => TReturn;
+  marginInline: any;
+  marginInlineStart: (val: TStyleValue) => TReturn;
+  marginInlineEnd: (val: TStyleValue) => TReturn;
+  paddingBlock: any;
+  paddingBlockStart: (val: TStyleValue) => TReturn;
+  paddingBlockEnd: (val: TStyleValue) => TReturn;
+  paddingInline: any;
+  paddingInlineStart: (val: TStyleValue) => TReturn;
+  paddingInlineEnd: (val: TStyleValue) => TReturn;
+};
+declare const expansions: Omit<shorthands, keyof (aliases | {})> &
+  Omit<aliases, keyof ({})> & {};
 declare const $$EXPORT_DEFAULT_DECLARATION$$: typeof expansions;
 export default $$EXPORT_DEFAULT_DECLARATION$$;

package/lib/preprocess-rules/legacy-expand-shorthands.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const expansions = {
+const shorthands = {
   border: rawValue => {
     return [["borderTop", rawValue], ["borderEnd", rawValue], ["borderBottom", rawValue], ["borderStart", rawValue]];
   },
@@ -28,10 +28,19 @@ const expansions = {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
     return [["borderTopWidth", top], ["borderEndWidth", right], ["borderBottomWidth", bottom], ["borderStartWidth", left]];
   },
+  borderHorizontalColor: rawValue => [["borderStartColor", rawValue], ["borderEndColor", rawValue]],
+  borderHorizontalStyle: rawValue => [["borderStartStyle", rawValue], ["borderEndStyle", rawValue]],
+  borderHorizontalWidth: rawValue => [["borderStartWidth", rawValue], ["borderEndWidth", rawValue]],
+  borderVerticalColor: rawValue => [["borderTopColor", rawValue], ["borderBottomColor", rawValue]],
+  borderVerticalStyle: rawValue => [["borderTopStyle", rawValue], ["borderBottomStyle", rawValue]],
+  borderVerticalWidth: rawValue => [["borderTopWidth", rawValue], ["borderBottomWidth", rawValue]],
   borderRadius: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
     return [["borderTopStartRadius", top], ["borderTopEndRadius", right], ["borderBottomEndRadius", bottom], ["borderBottomStartRadius", left]];
   },
+  inset: rawValue => [["top", rawValue], ["end", rawValue], ["bottom", rawValue], ["start", rawValue]],
+  insetInline: rawValue => [["start", rawValue], ["end", rawValue]],
+  insetBlock: rawValue => [["top", rawValue], ["bottom", rawValue]],
   margin: rawValue => {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
     return [["marginTop", top], ["marginEnd", right], ["marginBottom", bottom], ["marginStart", left]];
@@ -50,12 +59,62 @@ const expansions = {
     const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
     return [["paddingTop", top], ["paddingEnd", right], ["paddingBottom", bottom], ["paddingStart", left]];
   },
-  paddingHorizontal: rawValue => {
-    return [["paddingStart", rawValue], ["paddingEnd", rawValue]];
+  paddingHorizontal: val => {
+    return [["paddingStart", val], ["paddingEnd", val]];
   },
-  paddingVertical: rawValue => {
-    return [["paddingTop", rawValue], ["paddingBottom", rawValue]];
+  paddingVertical: val => {
+    return [["paddingTop", val], ["paddingBottom", val]];
   }
 };
+const aliases = {
+  insetBlockStart: val => [["top", val]],
+  insetBlockEnd: val => [["bottom", val]],
+  insetInlineStart: val => [["start", val]],
+  insetInlineEnd: val => [["end", val]],
+  blockSize: val => [["height", val]],
+  inlineSize: val => [["width", val]],
+  minBlockSize: val => [["minHeight", val]],
+  minInlineSize: val => [["minWidth", val]],
+  maxBlockSize: val => [["maxHeight", val]],
+  maxInlineSize: val => [["maxWidth", val]],
+  borderBlockWidth: shorthands.borderVerticalWidth,
+  borderBlockStyle: shorthands.borderVerticalStyle,
+  borderBlockColor: shorthands.borderVerticalColor,
+  borderBlockStartWidth: val => [["borderTopWidth", val]],
+  borderBlockStartStyle: val => [["borderTopStyle", val]],
+  borderBlockStartColor: val => [["borderTopColor", val]],
+  borderBlockEndWidth: val => [["borderBottomWidth", val]],
+  borderBlockEndStyle: val => [["borderBottomStyle", val]],
+  borderBlockEndColor: val => [["borderBottomColor", val]],
+  borderInlineWidth: shorthands.borderHorizontalWidth,
+  borderInlineStyle: shorthands.borderHorizontalStyle,
+  borderInlineColor: shorthands.borderHorizontalColor,
+  borderInlineStartWidth: val => [["borderStartWidth", val]],
+  borderInlineStartStyle: val => [["borderStartStyle", val]],
+  borderInlineStartColor: val => [["borderStartColor", val]],
+  borderInlineEndWidth: val => [["borderEndWidth", val]],
+  borderInlineEndStyle: val => [["borderEndStyle", val]],
+  borderInlineEndColor: val => [["borderEndColor", val]],
+  borderStartStartRadius: val => [["borderTopStartRadius", val]],
+  borderStartEndRadius: val => [["borderTopEndRadius", val]],
+  borderEndStartRadius: val => [["borderBottomStartRadius", val]],
+  borderEndEndRadius: val => [["borderBottomEndRadius", val]],
+  marginBlock: shorthands.marginVertical,
+  marginBlockStart: val => [["marginTop", val]],
+  marginBlockEnd: val => [["marginBottom", val]],
+  marginInline: shorthands.marginHorizontal,
+  marginInlineStart: val => [["marginStart", val]],
+  marginInlineEnd: val => [["marginEnd", val]],
+  paddingBlock: shorthands.paddingVertical,
+  paddingBlockStart: val => [["paddingTop", val]],
+  paddingBlockEnd: val => [["paddingBottom", val]],
+  paddingInline: shorthands.paddingHorizontal,
+  paddingInlineStart: val => [["paddingStart", val]],
+  paddingInlineEnd: val => [["paddingEnd", val]]
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
 var _default = expansions;
 exports.default = _default;

package/lib/preprocess-rules/legacy-expand-shorthands.js.flow

@@ -81,21 +81,79 @@ import type { TStyleValue } from '../common-types';
 
 type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
 
-declare const expansions: {
+declare const shorthands: {
   border: (rawValue: TStyleValue) => TReturn,
   borderColor: (rawValue: TStyleValue) => TReturn,
   borderHorizontal: (rawValue: TStyleValue) => TReturn,
   borderStyle: (rawValue: TStyleValue) => TReturn,
   borderVertical: (rawValue: TStyleValue) => TReturn,
   borderWidth: (rawValue: TStyleValue) => TReturn,
+  borderHorizontalColor: (rawValue: TStyleValue) => TReturn,
+  borderHorizontalStyle: (rawValue: TStyleValue) => TReturn,
+  borderHorizontalWidth: (rawValue: TStyleValue) => TReturn,
+  borderVerticalColor: (rawValue: TStyleValue) => TReturn,
+  borderVerticalStyle: (rawValue: TStyleValue) => TReturn,
+  borderVerticalWidth: (rawValue: TStyleValue) => TReturn,
   borderRadius: (rawValue: TStyleValue) => TReturn,
+  inset: (rawValue: TStyleValue) => TReturn,
+  insetInline: (rawValue: TStyleValue) => TReturn,
+  insetBlock: (rawValue: TStyleValue) => TReturn,
   margin: (rawValue: TStyleValue) => TReturn,
   marginHorizontal: (rawValue: TStyleValue) => TReturn,
   marginVertical: (rawValue: TStyleValue) => TReturn,
   overflow: (rawValue: TStyleValue) => TReturn,
   padding: (rawValue: TStyleValue) => TReturn,
-  paddingHorizontal: (rawValue: TStyleValue) => TReturn,
-  paddingVertical: (rawValue: TStyleValue) => TReturn,
+  paddingHorizontal: (val: TStyleValue) => TReturn,
+  paddingVertical: (val: TStyleValue) => TReturn,
 };
 
+declare const aliases: {
+  insetBlockStart: (val: TStyleValue) => TReturn,
+  insetBlockEnd: (val: TStyleValue) => TReturn,
+  insetInlineStart: (val: TStyleValue) => TReturn,
+  insetInlineEnd: (val: TStyleValue) => TReturn,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
+  borderBlockWidth: $FlowFixMe,
+  borderBlockStyle: $FlowFixMe,
+  borderBlockColor: $FlowFixMe,
+  borderBlockStartWidth: (val: TStyleValue) => TReturn,
+  borderBlockStartStyle: (val: TStyleValue) => TReturn,
+  borderBlockStartColor: (val: TStyleValue) => TReturn,
+  borderBlockEndWidth: (val: TStyleValue) => TReturn,
+  borderBlockEndStyle: (val: TStyleValue) => TReturn,
+  borderBlockEndColor: (val: TStyleValue) => TReturn,
+  borderInlineWidth: $FlowFixMe,
+  borderInlineStyle: $FlowFixMe,
+  borderInlineColor: $FlowFixMe,
+  borderInlineStartWidth: (val: TStyleValue) => TReturn,
+  borderInlineStartStyle: (val: TStyleValue) => TReturn,
+  borderInlineStartColor: (val: TStyleValue) => TReturn,
+  borderInlineEndWidth: (val: TStyleValue) => TReturn,
+  borderInlineEndStyle: (val: TStyleValue) => TReturn,
+  borderInlineEndColor: (val: TStyleValue) => TReturn,
+  borderStartStartRadius: (val: TStyleValue) => TReturn,
+  borderStartEndRadius: (val: TStyleValue) => TReturn,
+  borderEndStartRadius: (val: TStyleValue) => TReturn,
+  borderEndEndRadius: (val: TStyleValue) => TReturn,
+  marginBlock: $FlowFixMe,
+  marginBlockStart: (val: TStyleValue) => TReturn,
+  marginBlockEnd: (val: TStyleValue) => TReturn,
+  marginInline: $FlowFixMe,
+  marginInlineStart: (val: TStyleValue) => TReturn,
+  marginInlineEnd: (val: TStyleValue) => TReturn,
+  paddingBlock: $FlowFixMe,
+  paddingBlockStart: (val: TStyleValue) => TReturn,
+  paddingBlockEnd: (val: TStyleValue) => TReturn,
+  paddingInline: $FlowFixMe,
+  paddingInlineStart: (val: TStyleValue) => TReturn,
+  paddingInlineEnd: (val: TStyleValue) => TReturn,
+};
+
+declare const expansions: { ...shorthands, ...aliases };
+
 declare export default typeof expansions;

package/lib/preprocess-rules/property-specificity.d.ts

@@ -32,6 +32,12 @@ declare const aliases: {
   borderEnd: any;
   borderBlockEnd: any;
   borderStart: any;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
   borderHorizontalWidth: (value: TStyleValue) => TReturn;
   borderHorizontalStyle: (value: TStyleValue) => TReturn;
   borderHorizontalColor: (value: TStyleValue) => TReturn;
@@ -72,7 +78,7 @@ declare const aliases: {
   end: (value: TStyleValue) => TReturn;
 };
 declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly</**
- * > 86 |   ...typeof shorthands,
+ * > 92 |   ...typeof shorthands,
  *      |   ^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
  **/
 any>;

package/lib/preprocess-rules/property-specificity.js

@@ -66,6 +66,12 @@ const aliases = {
   borderEnd: shorthands.borderInlineEnd,
   borderBlockEnd: shorthands.borderBottom,
   borderStart: shorthands.borderInlineStart,
+  blockSize: val => [["height", val]],
+  inlineSize: val => [["width", val]],
+  minBlockSize: val => [["minHeight", val]],
+  minInlineSize: val => [["minWidth", val]],
+  maxBlockSize: val => [["maxHeight", val]],
+  maxInlineSize: val => [["maxWidth", val]],
   borderHorizontalWidth: value => [["borderInlineWidth", value]],
   borderHorizontalStyle: value => [["borderInlineStyle", value]],
   borderHorizontalColor: value => [["borderInlineColor", value]],

package/lib/preprocess-rules/property-specificity.js.flow

@@ -42,6 +42,12 @@ declare const aliases: {
   borderEnd: $FlowFixMe,
   borderBlockEnd: $FlowFixMe,
   borderStart: $FlowFixMe,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
   borderHorizontalWidth: (value: TStyleValue) => TReturn,
   borderHorizontalStyle: (value: TStyleValue) => TReturn,
   borderHorizontalColor: (value: TStyleValue) => TReturn,

package/lib/stylex-create-vars.d.ts

@@ -12,7 +12,7 @@ type VarsObject<
   Vars extends {
     readonly [$$Key$$: string]:
       | string
-      | { default: string; readonly [$$Key$$: string]: string };
+      | { readonly default: string; readonly [$$Key$$: string]: string };
   },
 > = Readonly</**
  * > 15 |   ...$ObjMapConst<Vars, string>,
@@ -23,7 +23,7 @@ declare function styleXCreateVars<
   Vars extends {
     readonly [$$Key$$: string]:
       | string
-      | { default: string; readonly [$$Key$$: string]: string };
+      | { readonly default: string; readonly [$$Key$$: string]: string };
   },
 >(
   variables: Vars,

package/lib/stylex-create-vars.js.flow

@@ -10,7 +10,7 @@
 import type { StyleXOptions } from './common-types';
 
 type VarsObject<
-  Vars: { +[string]: string | { default: string, +[string]: string } },
+  Vars: { +[string]: string | { +default: string, +[string]: string } },
 > = $ReadOnly<{
   ...$ObjMapConst<Vars, string>,
   __themeName__: string,
@@ -19,8 +19,8 @@ type VarsObject<
 // Similar to `stylex.create` it takes an object of variables with their values
 // and returns a string after hashing it.
 declare export default function styleXCreateVars<
-  +Vars: {
-    +[string]: string | { default: string, +[string]: string },
+  Vars: {
+    +[string]: string | { +default: string, +[string]: string },
   },
 >(
   variables: Vars,

package/lib/stylex-override-vars.js

@@ -54,7 +54,7 @@ function styleXOverrideVars(themeVars, variables, options) {
     [themeVars.__themeName__]: overrideClassName
   }, {
     [overrideClassName]: {
-      ltr: `.${overrideClassName}{${cssVariablesOverrideString}${atRulesCss}}`,
+      ltr: `.${overrideClassName}{${cssVariablesOverrideString}}${atRulesCss}`,
       priority: 0.99,
       rtl: undefined
     }

package/lib/transform-value.d.ts

@@ -11,3 +11,6 @@
  */
 declare function transformValue(key: string, rawValue: string | number): 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,6 +4,8 @@ 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 }; }
 function transformValue(key, rawValue) {
@@ -30,11 +32,15 @@ function getNumberSuffix(key) {
     return suffix;
   }
 }
-const unitlessNumberProperties = new Set(["animationIterationCount", "borderImageOutset", "borderImageSlice", "borderImageWidth", "columnCount", "flex", "flexGrow", "flexPositive", "flexShrink", "flexOrder", "gridRow", "gridColumn", "fontWeight", "lineClamp", "lineHeight", "opacity", "order", "orphans", "tabSize", "widows", "zIndex", "fillOpacity", "floodOpacity", "stopOpacity", "strokeDasharray", "strokeDashoffset", "strokeMiterlimit", "strokeOpacity", "strokeWidth"]);
+const unitlessNumberProperties = new Set(["animationIterationCount", "aspectRatio", "borderImageOutset", "borderImageSlice", "borderImageWidth", "columnCount", "flex", "flexGrow", "flexPositive", "flexShrink", "flexOrder", "gridRow", "gridColumn", "fontWeight", "lineClamp", "lineHeight", "opacity", "order", "orphans", "tabSize", "widows", "zIndex", "fillOpacity", "floodOpacity", "stopOpacity", "strokeDasharray", "strokeDashoffset", "strokeMiterlimit", "strokeOpacity", "strokeWidth"]);
 const numberPropertySuffixes = {
   animationDelay: "ms",
   animationDuration: "ms",
   transitionDelay: "ms",
   transitionDuration: "ms",
   voiceDuration: "ms"
-};
+};
+const timeUnits = new Set(Object.keys(numberPropertySuffixes));
+exports.timeUnits = timeUnits;
+const 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"]);
+exports.lengthUnits = lengthUnits;

package/lib/transform-value.js.flow

@@ -13,3 +13,9 @@ declare export default function transformValue(
   key: string,
   rawValue: string | number,
 ): 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,204 @@
+"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 = Angle.create;
+exports.angle = angle;
+class Color extends CSSType {
+  syntax = "<color>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Color(value);
+  }
+}
+exports.Color = Color;
+const color = Color.create;
+exports.color = color;
+class Url extends CSSType {
+  syntax = "<url>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Url(value);
+  }
+}
+exports.Url = Url;
+const url = Url.create;
+exports.url = url;
+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 = Image.create;
+exports.image = image;
+class Integer extends CSSType {
+  syntax = "<integer>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Integer(value);
+  }
+}
+exports.Integer = Integer;
+const integer = Integer.create;
+exports.integer = integer;
+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 = LengthPercentage.createLength;
+exports.lengthPercentage = lengthPercentage;
+class Length extends LengthPercentage {
+  syntax = "<length>";
+  constructor(value) {
+    super(convertNumberToLength(value));
+  }
+  static create(value) {
+    return new Length(value);
+  }
+}
+exports.Length = Length;
+const length = Length.create;
+exports.length = length;
+class Percentage extends LengthPercentage {
+  syntax = "<percentage>";
+  constructor(value) {
+    super(convertNumberToPercentage(value));
+  }
+  static create(value) {
+    return new Percentage(value);
+  }
+}
+exports.Percentage = Percentage;
+const percentage = Percentage.create;
+exports.percentage = percentage;
+class Num extends CSSType {
+  syntax = "<number>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Num(value);
+  }
+}
+exports.Num = Num;
+const number = Num.create;
+exports.number = number;
+class Resolution extends CSSType {
+  syntax = "<resolution>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Resolution(value);
+  }
+}
+exports.Resolution = Resolution;
+const resolution = Resolution.create;
+exports.resolution = resolution;
+class Time extends CSSType {
+  syntax = "<time>";
+  constructor(value) {
+    super();
+    this.value = value;
+  }
+  static create(value) {
+    return new Time(value);
+  }
+}
+exports.Time = Time;
+const time = Time.create;
+exports.time = time;
+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 = TransformFunction.create;
+exports.transformFunction = transformFunction;
+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 = TransformList.create;
+exports.transformList = transformList;
+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");

package/lib/types/index.js.flow

@@ -0,0 +1,241 @@
+/**
+ * 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 { Color as ColorType } from './stylex-types-color';
+
+// We want all in one file?
+// option 1, creat interface an implement it in the class
+// why? All the types have a single base definition of props
+// We want on type that defines CSS Types
+// Option 2: Do a union type and make
+
+// interface ICSSType {
+//   toString(): string;
+// }
+
+type ValueWithDefault<+T> =
+  | T
+  | $ReadOnly<{
+      default: T,
+      [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>;
+
+declare export class CSSType {}
+
+export interface ICSSType<+T: string | number> {
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+}
+
+type AnguleValue = string;
+declare export class Angle<+T: AnguleValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  static +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: AnguleValue = AnguleValue>(
+    value: ValueWithDefault<T>,
+  ): Angle<T>;
+}
+declare export const angle: $FlowFixMe;
+
+type ColorValue = string;
+declare export class Color<+T: ColorValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: ColorValue = ColorValue>(
+    value: ValueWithDefault<T>,
+  ): Color<T>;
+}
+declare export const color: $FlowFixMe;
+
+type URLValue = string;
+
+declare export class Url<+T: URLValue> extends CSSType implements ICSSType<T> {
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: URLValue = URLValue>(value: ValueWithDefault<T>): Url<T>;
+}
+declare export const url: $FlowFixMe;
+
+type ImageValue = string;
+
+declare export class Image<+T: ImageValue>
+  extends Url<T>
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: ImageValue = ImageValue>(
+    value: ValueWithDefault<T>,
+  ): Image<T>;
+}
+declare export const image: $FlowFixMe;
+
+type IntegerValue = number;
+
+declare export class Integer<+T: IntegerValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: IntegerValue = IntegerValue>(value: T): Integer<T>;
+}
+declare export const integer: $FlowFixMe;
+
+type LengthPercentageValue = string;
+
+declare export class LengthPercentage<+T: LengthPercentageValue>
+  extends CSSType
+  implements ICSSType<string>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static createLength<T: LengthPercentageValue | number>(
+    value: ValueWithDefault<T>,
+  ): LengthPercentage<string>;
+  static createPercentage<T: LengthPercentageValue | number>(
+    value: ValueWithDefault<T>,
+  ): LengthPercentage<string>;
+}
+declare export const lengthPercentage: $FlowFixMe;
+
+type LengthValue = number | string;
+
+declare export class Length<+T: LengthValue>
+  extends LengthPercentage<string>
+  implements ICSSType<string>
+{
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: LengthValue = LengthValue>(
+    value: ValueWithDefault<T>,
+  ): Length<T>;
+}
+declare export const length: $FlowFixMe;
+
+type PercentageValue = string | number;
+
+declare export class Percentage<+T: PercentageValue>
+  extends LengthPercentage<string>
+  implements ICSSType<string>
+{
+  +value: ValueWithDefault<string>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: PercentageValue = PercentageValue>(
+    value: ValueWithDefault<T>,
+  ): Percentage<T>;
+}
+declare export const percentage: $FlowFixMe;
+
+type NumberValue = number;
+
+declare export class Num<+T: NumberValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: NumberValue = NumberValue>(
+    value: ValueWithDefault<T>,
+  ): Num<T>;
+}
+declare export const number: $FlowFixMe;
+
+type ResolutionValue = string | 0;
+
+declare export class Resolution<+T: ResolutionValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: ResolutionValue = ResolutionValue>(
+    value: ValueWithDefault<T>,
+  ): Resolution<T>;
+}
+declare export const resolution: $FlowFixMe;
+
+type TimeValue = string | 0;
+
+declare export class Time<+T: TimeValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: TimeValue = TimeValue>(value: ValueWithDefault<T>): Time<T>;
+}
+declare export const time: $FlowFixMe;
+
+type TransformFunctionValue = string;
+
+declare export class TransformFunction<+T: TransformFunctionValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: TransformFunctionValue = TransformFunctionValue>(
+    value: ValueWithDefault<T>,
+  ): TransformFunction<T>;
+}
+declare export const transformFunction: $FlowFixMe;
+
+type TransformListValue = string;
+
+declare export class TransformList<T: TransformListValue>
+  extends CSSType
+  implements ICSSType<T>
+{
+  +value: ValueWithDefault<T>;
+  +syntax: CSSSyntaxType;
+  constructor(value: ValueWithDefault<T>): void;
+  static create<T: TransformListValue = TransformListValue>(
+    value: ValueWithDefault<T>,
+  ): TransformList<T>;
+}
+declare export const transformList: $FlowFixMe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.2.0-beta.19",
+  "version": "0.2.0-beta.21",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
@@ -13,12 +13,13 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.19"
+    "@stylexjs/scripts": "0.2.0-beta.21"
   },
   "jest": {
     "snapshotFormat": {
       "printBasicPrototype": false
-    }
+    },
+    "prettierPath": null
   },
   "files": [
     "lib/*"