@stylexjs/shared 0.2.0-beta.10 → 0.2.0-beta.12

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

@@ -0,0 +1,122 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+type TReturn = ReadonlyArray<[string, TStyleValue]>;
+declare var expansions: {
+  border: (rawValue: TStyleValue) => TReturn;
+  borderColor: (rawValue: TStyleValue) => TReturn;
+  borderHorizontal: (rawValue: TStyleValue) => TReturn;
+  borderStyle: (rawValue: TStyleValue) => TReturn;
+  borderVertical: (rawValue: TStyleValue) => TReturn;
+  borderWidth: (rawValue: TStyleValue) => TReturn;
+  borderRadius: (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;
+};
+export default expansions;

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

@@ -15,146 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * 
  */
 
-const borderWidthKeywords = new Set(['thin', 'medium', 'thick']);
-const borderStyleKeywords = new Set(['none', 'hidden', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inside',
-// Non-standard
-'inset', 'outset']);
-const globalKeywords = new Set(['initial', 'inherit', 'unset']);
-// eslint-disable-next-line no-unused-vars
-function borderDetector(borderParts) {
-  const parts = borderParts.filter(Boolean).slice();
-  let suffix = '';
-  for (let i = 0; i < parts.length; i++) {
-    const part = parts[i];
-    if (typeof part === 'string' && part.endsWith('!important')) {
-      parts[i] = part.replace('!important', '').trim();
-      suffix = ' !important';
-    }
-  }
-  if (parts.length === 1 && typeof parts[0] === 'string' && globalKeywords.has(parts[0])) {
-    return [parts[0], parts[0], parts[0]];
-  }
-
-  // Find the part that starts with a number
-  // This is most likely to be the borderWidth
-  let width = parts.find(part => typeof part === 'number' || part.match(/^\.?\d+/) || borderWidthKeywords.has(part));
-  if (typeof width === 'number') {
-    width = String(width) + 'px';
-  }
-  // console.log('width', width);
-  if (width != null) {
-    parts.splice(parts.indexOf(width), 1);
-  }
-  if (parts.length === 0) {
-    return [String(width) + suffix, null, null];
-  }
-  const style = parts.find(part => typeof part === 'string' && borderStyleKeywords.has(part));
-  if (style != null) {
-    parts.splice(parts.indexOf(style), 1);
-  }
-  if (parts.length === 2 && width == null) {
-    width = parts[0];
-    parts.splice(0, 1);
-  }
-  if (width != null && parts.length > 1) {
-    throw new Error('Invalid border shorthand value');
-  }
-  const color = parts[0];
-  return [width, style, color].map(part => part != null ? part + suffix : null);
-}
 const expansions = {
-  // TODO: Due to UI regressions internally, we need to maintain the buggy behaviour of
-  // border shorthand for now. This will be fixed in a future release.
-  // border: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return expansions.borderWidth(rawValue);
-  //   }
-
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-
-  //   return [
-  //     ...(width != null ? expansions.borderWidth(width) : []),
-  //     ...(style != null ? expansions.borderStyle(style) : []),
-  //     ...(color != null ? expansions.borderColor(color) : []),
-  //   ];
-  // },
-  // borderTop: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderTopWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-
-  //   return [
-  //     width != null ? ['borderTopWidth', width] : null,
-  //     style != null ? ['borderTopStyle', style] : null,
-  //     color != null ? ['borderTopColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderEnd: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderEndWidth', rawValue]];
-  //   }
-
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-
-  //   return [
-  //     width != null ? ['borderEndWidth', width] : null,
-  //     style != null ? ['borderEndStyle', style] : null,
-  //     color != null ? ['borderEndColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderRight: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderRightWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderRightWidth', width] : null,
-  //     style != null ? ['borderRightStyle', style] : null,
-  //     color != null ? ['borderRightColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderBottom: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderBottomWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderBottomWidth', width] : null,
-  //     style != null ? ['borderBottomStyle', style] : null,
-  //     color != null ? ['borderBottomColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderStart: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderStartWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderStartWidth', width] : null,
-  //     style != null ? ['borderStartStyle', style] : null,
-  //     color != null ? ['borderStartColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-  // borderLeft: (rawValue: TStyleValue): TReturn => {
-  //   if (typeof rawValue === 'number') {
-  //     return [['borderLeftWidth', rawValue]];
-  //   }
-  //   const parts = splitValue(rawValue);
-  //   const [width, style, color] = borderDetector(parts);
-  //   return [
-  //     width != null ? ['borderLeftWidth', width] : null,
-  //     style != null ? ['borderLeftStyle', style] : null,
-  //     color != null ? ['borderLeftColor', color] : null,
-  //   ].filter(Boolean);
-  // },
-
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
   },

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

@@ -0,0 +1,101 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+
+// TODO: to be added later.
+// const aliases = {
+//   marginInlineStart: (rawValue) => [['marginStart', rawValue]],
+//   marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
+//   marginInline: (rawValue) => [
+//     ['marginStart', rawValue],
+//     ['marginEnd', rawValue],
+//   ],
+//   paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
+//   paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
+//   paddingInline: (rawValue) => [
+//     ['paddingStart', rawValue],
+//     ['paddingEnd', rawValue],
+//   ],
+//   // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
+//   // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
+//   // // This will need to change.
+//   // 'borderInline': (rawValue) => [
+//   //   ['borderStart', rawValue],
+//   //   ['borderEnd', rawValue],
+//   // ],
+// };
+
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
+
+declare var expansions: {
+  border: (rawValue: TStyleValue) => TReturn,
+  borderColor: (rawValue: TStyleValue) => TReturn,
+  borderHorizontal: (rawValue: TStyleValue) => TReturn,
+  borderStyle: (rawValue: TStyleValue) => TReturn,
+  borderVertical: (rawValue: TStyleValue) => TReturn,
+  borderWidth: (rawValue: TStyleValue) => TReturn,
+  borderRadius: (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,
+};
+
+declare export default expansions;

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

@@ -0,0 +1,76 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+type TReturn = ReadonlyArray<[string, TStyleValue]>;
+declare var shorthands: {
+  all: (_: TStyleValue) => TReturn;
+  animation: (_value: TStyleValue) => TReturn;
+  background: (_value: TStyleValue) => TReturn;
+  border: (_rawValue: TStyleValue) => TReturn;
+  borderInline: (_rawValue: TStyleValue) => TReturn;
+  borderBlock: (_rawValue: TStyleValue) => TReturn;
+  borderTop: (_rawValue: TStyleValue) => TReturn;
+  borderInlineEnd: (_rawValue: TStyleValue) => TReturn;
+  borderRight: (_rawValue: TStyleValue) => TReturn;
+  borderBottom: (_rawValue: TStyleValue) => TReturn;
+  borderInlineStart: (_rawValue: TStyleValue) => TReturn;
+  borderLeft: (_rawValue: TStyleValue) => TReturn;
+  margin: (value: TStyleValue) => TReturn;
+  padding: (rawValue: TStyleValue) => TReturn;
+};
+declare var aliases: {
+  borderHorizontal: any;
+  borderVertical: any;
+  borderBlockStart: any;
+  borderEnd: any;
+  borderBlockEnd: any;
+  borderStart: any;
+  borderHorizontalWidth: (value: TStyleValue) => TReturn;
+  borderHorizontalStyle: (value: TStyleValue) => TReturn;
+  borderHorizontalColor: (value: TStyleValue) => TReturn;
+  borderVerticalWidth: (value: TStyleValue) => TReturn;
+  borderVerticalStyle: (value: TStyleValue) => TReturn;
+  borderVerticalColor: (value: TStyleValue) => TReturn;
+  borderBlockStartColor: (value: TStyleValue) => TReturn;
+  borderBlockEndColor: (value: TStyleValue) => TReturn;
+  borderBlockStartStyle: (value: TStyleValue) => TReturn;
+  borderBlockEndStyle: (value: TStyleValue) => TReturn;
+  borderBlockStartWidth: (value: TStyleValue) => TReturn;
+  borderBlockEndWidth: (value: TStyleValue) => TReturn;
+  borderStartColor: (value: TStyleValue) => TReturn;
+  borderEndColor: (value: TStyleValue) => TReturn;
+  borderStartStyle: (value: TStyleValue) => TReturn;
+  borderEndStyle: (value: TStyleValue) => TReturn;
+  borderStartWidth: (value: TStyleValue) => TReturn;
+  borderEndWidth: (value: TStyleValue) => TReturn;
+  borderTopStartRadius: (value: TStyleValue) => TReturn;
+  borderTopEndRadius: (value: TStyleValue) => TReturn;
+  borderBottomStartRadius: (value: TStyleValue) => TReturn;
+  borderBottomEndRadius: (value: TStyleValue) => TReturn;
+  marginBlockStart: (value: TStyleValue) => TReturn;
+  marginBlockEnd: (value: TStyleValue) => TReturn;
+  marginStart: (value: TStyleValue) => TReturn;
+  marginEnd: (value: TStyleValue) => TReturn;
+  marginHorizontal: (value: TStyleValue) => TReturn;
+  marginVertical: (value: TStyleValue) => TReturn;
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn;
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn;
+  paddingStart: (value: TStyleValue) => TReturn;
+  paddingEnd: (value: TStyleValue) => TReturn;
+  paddingHorizontal: (value: TStyleValue) => TReturn;
+  paddingVertical: (value: TStyleValue) => TReturn;
+  insetBlockStart: (value: TStyleValue) => TReturn;
+  insetBlockEnd: (value: TStyleValue) => TReturn;
+  start: (value: TStyleValue) => TReturn;
+  end: (value: TStyleValue) => TReturn;
+};
+declare var expansions: Omit<shorthands, keyof (aliases | {})> &
+  Omit<aliases, keyof ({})> & {};
+export default expansions;

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

@@ -0,0 +1,87 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+
+/// # Handle CSS shorthands in a React Native compatible way.
+///
+/// This means:
+/// - disallowing certain properties altogether by throwing errors
+/// - disallowing multiple values within many shorthands
+/// - Treating certain non-standard properties as aliases for real CSS properties
+
+type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
+
+declare var shorthands: {
+  all: (_: TStyleValue) => TReturn,
+  animation: (_value: TStyleValue) => TReturn,
+  background: (_value: TStyleValue) => TReturn,
+  border: (_rawValue: TStyleValue) => TReturn,
+  borderInline: (_rawValue: TStyleValue) => TReturn,
+  borderBlock: (_rawValue: TStyleValue) => TReturn,
+  borderTop: (_rawValue: TStyleValue) => TReturn,
+  borderInlineEnd: (_rawValue: TStyleValue) => TReturn,
+  borderRight: (_rawValue: TStyleValue) => TReturn,
+  borderBottom: (_rawValue: TStyleValue) => TReturn,
+  borderInlineStart: (_rawValue: TStyleValue) => TReturn,
+  borderLeft: (_rawValue: TStyleValue) => TReturn,
+  margin: (value: TStyleValue) => TReturn,
+  padding: (rawValue: TStyleValue) => TReturn,
+};
+
+declare var aliases: {
+  borderHorizontal: $FlowFixMe,
+  borderVertical: $FlowFixMe,
+  borderBlockStart: $FlowFixMe,
+  borderEnd: $FlowFixMe,
+  borderBlockEnd: $FlowFixMe,
+  borderStart: $FlowFixMe,
+  borderHorizontalWidth: (value: TStyleValue) => TReturn,
+  borderHorizontalStyle: (value: TStyleValue) => TReturn,
+  borderHorizontalColor: (value: TStyleValue) => TReturn,
+  borderVerticalWidth: (value: TStyleValue) => TReturn,
+  borderVerticalStyle: (value: TStyleValue) => TReturn,
+  borderVerticalColor: (value: TStyleValue) => TReturn,
+  borderBlockStartColor: (value: TStyleValue) => TReturn,
+  borderBlockEndColor: (value: TStyleValue) => TReturn,
+  borderBlockStartStyle: (value: TStyleValue) => TReturn,
+  borderBlockEndStyle: (value: TStyleValue) => TReturn,
+  borderBlockStartWidth: (value: TStyleValue) => TReturn,
+  borderBlockEndWidth: (value: TStyleValue) => TReturn,
+  borderStartColor: (value: TStyleValue) => TReturn,
+  borderEndColor: (value: TStyleValue) => TReturn,
+  borderStartStyle: (value: TStyleValue) => TReturn,
+  borderEndStyle: (value: TStyleValue) => TReturn,
+  borderStartWidth: (value: TStyleValue) => TReturn,
+  borderEndWidth: (value: TStyleValue) => TReturn,
+  borderTopStartRadius: (value: TStyleValue) => TReturn,
+  borderTopEndRadius: (value: TStyleValue) => TReturn,
+  borderBottomStartRadius: (value: TStyleValue) => TReturn,
+  borderBottomEndRadius: (value: TStyleValue) => TReturn,
+  marginBlockStart: (value: TStyleValue) => TReturn,
+  marginBlockEnd: (value: TStyleValue) => TReturn,
+  marginStart: (value: TStyleValue) => TReturn,
+  marginEnd: (value: TStyleValue) => TReturn,
+  marginHorizontal: (value: TStyleValue) => TReturn,
+  marginVertical: (value: TStyleValue) => TReturn,
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn,
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn,
+  paddingStart: (value: TStyleValue) => TReturn,
+  paddingEnd: (value: TStyleValue) => TReturn,
+  paddingHorizontal: (value: TStyleValue) => TReturn,
+  paddingVertical: (value: TStyleValue) => TReturn,
+  insetBlockStart: (value: TStyleValue) => TReturn,
+  insetBlockEnd: (value: TStyleValue) => TReturn,
+  start: (value: TStyleValue) => TReturn,
+  end: (value: TStyleValue) => TReturn,
+};
+
+declare var expansions: { ...shorthands, ...aliases };
+
+declare export default expansions;

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

@@ -0,0 +1,27 @@
+/**
+ * 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';
+type VarsObject<Vars extends { readonly [$$Key$$: string]: string | number }> =
+  /**
+   * > 13 |   ...$ObjMapConst<Vars, string>,
+   *      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
+   **/
+  any;
+declare function styleXCreateVars<
+  Vars extends { readonly [$$Key$$: string]: string }
+>(
+  variables: Vars,
+  options: Readonly<
+    Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
+      themeName: string;
+    }
+  >
+): [VarsObject<Vars>, { css: string }];
+export default styleXCreateVars;

package/lib/stylex-create-vars.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXCreateVars;
+var _hash = _interopRequireDefault(require("./hash"));
+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 variables with their values
+// and returns a string after hashing it.
+function styleXCreateVars(variables, options) {
+  const {
+    classNamePrefix,
+    themeName
+  } = {
+    ..._defaultOptions.defaultOptions,
+    ...options
+  };
+  const themeNameHash = classNamePrefix + (0, _hash.default)(themeName);
+  const variablesMap = (0, _objectUtils.objMap)(variables, (value, key) => {
+    // Created hashed variable names with fileName//themeName//key
+    const nameHash = classNamePrefix + (0, _hash.default)(`${themeName}.${key}`);
+    return {
+      nameHash,
+      value
+    };
+  });
+  const themeVariablesObject = (0, _objectUtils.objMap)(variablesMap, _ref => {
+    let {
+      nameHash
+    } = _ref;
+    return `var(--${nameHash})`;
+  });
+  const cssVariablesString = constructCssVariablesString(variablesMap);
+  return [{
+    ...themeVariablesObject,
+    __themeName__: themeNameHash
+  }, {
+    css: cssVariablesString
+  }];
+}
+function constructCssVariablesString(variables) {
+  const vars = (0, _objectUtils.objEntries)(variables).map(_ref2 => {
+    let [_, value] = _ref2;
+    return `--${value.nameHash}:${value.value};`;
+  }).join('');
+  return `:root{${vars}}`;
+}

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

@@ -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.
+ *
+ * @flow strict
+ */
+
+import type { StyleXOptions } from './common-types';
+
+type VarsObject<Vars: { +[string]: string | number }> = {
+  ...$ObjMapConst<Vars, string>,
+  __themeName__: string,
+};
+
+// 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 }>(
+  variables: Vars,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>
+): [VarsObject<Vars>, { css: string }];

package/lib/stylex-create.d.ts

@@ -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.
+ *
+ *
+ */
+
+import type {
+  RawStyles,
+  InjectableStyle,
+  StyleXOptions,
+  FlatCompiledStyles,
+} from './common-types';
+declare function styleXCreateSet(
+  namespaces: { readonly [$$Key$$: string]: RawStyles },
+  options?: StyleXOptions
+): [
+  { [$$Key$$: string]: FlatCompiledStyles },
+  { [$$Key$$: string]: InjectableStyle }
+];
+export default styleXCreateSet;