@stylexjs/shared 0.17.5 → 0.18.1

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

@@ -0,0 +1,142 @@
+/**
+ * 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';
+
+declare export const LOGICAL_FLOAT_START_VAR: '--stylex-logical-start';
+declare export const LOGICAL_FLOAT_END_VAR: '--stylex-logical-end';
+
+// 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
+ * - [ ] corner-shape
+ * - [ ] 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 const shorthands: $ReadOnly<{
+  [key: string]: (TStyleValue) => TReturn,
+}>;
+
+declare const aliases: {
+  insetBlockStart: (val: TStyleValue) => TReturn,
+  insetBlockEnd: (val: TStyleValue) => TReturn,
+  insetInlineStart: typeof shorthands.start,
+  insetInlineEnd: typeof shorthands.end,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
+  borderStart: (val: TStyleValue) => TReturn,
+  borderEnd: (val: TStyleValue) => TReturn,
+  borderBlockWidth: typeof shorthands.borderVerticalWidth,
+  borderBlockStyle: typeof shorthands.borderVerticalStyle,
+  borderBlockColor: typeof shorthands.borderVerticalColor,
+  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: typeof shorthands.borderHorizontalWidth,
+  borderInlineStyle: typeof shorthands.borderHorizontalStyle,
+  borderInlineColor: typeof shorthands.borderHorizontalColor,
+  borderTopStartRadius: (val: TStyleValue) => TReturn,
+  borderTopEndRadius: (val: TStyleValue) => TReturn,
+  borderBottomStartRadius: (val: TStyleValue) => TReturn,
+  borderBottomEndRadius: (val: TStyleValue) => TReturn,
+  gridGap: typeof shorthands.gap,
+  gridRowGap: (value: TStyleValue) => TReturn,
+  gridColumnGap: (value: TStyleValue) => TReturn,
+  marginBlock: typeof shorthands.marginVertical,
+  marginBlockStart: (val: TStyleValue) => TReturn,
+  marginBlockEnd: (val: TStyleValue) => TReturn,
+  marginInline: typeof shorthands.marginHorizontal,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
+  paddingBlock: typeof shorthands.paddingVertical,
+  paddingBlockStart: (val: TStyleValue) => TReturn,
+  paddingBlockEnd: (val: TStyleValue) => TReturn,
+  paddingInline: typeof shorthands.paddingHorizontal,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
+  float: (value: TStyleValue) => TReturn,
+  clear: (value: TStyleValue) => TReturn,
+};
+
+declare const expansions: { ...typeof shorthands, ...typeof aliases };
+
+declare export default typeof expansions;

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

@@ -0,0 +1,79 @@
+/**
+ * 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 const shorthands: Readonly<{
+  [key: string]: ($$PARAM_0$$: TStyleValue) => TReturn;
+}>;
+declare const aliases: {
+  borderHorizontal: typeof shorthands.borderInline;
+  borderVertical: typeof shorthands.borderBlock;
+  borderBlockStart: typeof shorthands.borderTop;
+  borderEnd: typeof shorthands.borderInlineEnd;
+  borderBlockEnd: typeof shorthands.borderBottom;
+  borderStart: typeof shorthands.borderInlineStart;
+  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: (val: TStyleValue) => TReturn;
+  borderHorizontalStyle: (val: TStyleValue) => TReturn;
+  borderHorizontalColor: (val: TStyleValue) => TReturn;
+  borderVerticalWidth: (val: TStyleValue) => TReturn;
+  borderVerticalStyle: (val: TStyleValue) => TReturn;
+  borderVerticalColor: (val: 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: (val: TStyleValue) => TReturn;
+  borderEndColor: (val: TStyleValue) => TReturn;
+  borderStartStyle: (val: TStyleValue) => TReturn;
+  borderEndStyle: (val: TStyleValue) => TReturn;
+  borderStartWidth: (val: TStyleValue) => TReturn;
+  borderEndWidth: (val: TStyleValue) => TReturn;
+  borderTopStartRadius: (value: TStyleValue) => TReturn;
+  borderTopEndRadius: (value: TStyleValue) => TReturn;
+  borderBottomStartRadius: (value: TStyleValue) => TReturn;
+  borderBottomEndRadius: (value: TStyleValue) => TReturn;
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn;
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn;
+  marginBlockStart: (value: TStyleValue) => TReturn;
+  marginBlockEnd: (value: TStyleValue) => TReturn;
+  marginStart: (val: TStyleValue) => TReturn;
+  marginEnd: (val: TStyleValue) => TReturn;
+  marginHorizontal: (val: TStyleValue) => TReturn;
+  marginVertical: (val: TStyleValue) => TReturn;
+  overflowBlock: (value: TStyleValue) => TReturn;
+  overflowInline: (value: TStyleValue) => TReturn;
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn;
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn;
+  paddingStart: (val: TStyleValue) => TReturn;
+  paddingEnd: (val: TStyleValue) => TReturn;
+  paddingHorizontal: (val: TStyleValue) => TReturn;
+  paddingVertical: (val: TStyleValue) => TReturn;
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn;
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
+  insetBlockStart: (value: TStyleValue) => TReturn;
+  insetBlockEnd: (value: TStyleValue) => TReturn;
+  start: (val: TStyleValue) => TReturn;
+  end: (val: TStyleValue) => TReturn;
+};
+declare const $$EXPORT_DEFAULT_DECLARATION$$: Readonly<
+  Omit<typeof shorthands, keyof typeof aliases | keyof {}> &
+    Omit<typeof aliases, keyof {}> & {}
+>;
+declare type $$EXPORT_DEFAULT_DECLARATION$$ =
+  typeof $$EXPORT_DEFAULT_DECLARATION$$;
+export default $$EXPORT_DEFAULT_DECLARATION$$;

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
+  },
+  animation: _value => {
+    throw new Error('animation is not supported');
+  },
+  background: _value => {
+    throw new Error('background is not supported. Use background-color, border-image etc. instead.');
+  },
+  border: _rawValue => {
+    throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
+  },
+  borderInline: _rawValue => {
+    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
+  },
+  borderBlock: _rawValue => {
+    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
+  },
+  borderTop: _rawValue => {
+    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
+  },
+  borderInlineEnd: _rawValue => {
+    throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
+  },
+  borderRight: _rawValue => {
+    throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
+  },
+  borderBottom: _rawValue => {
+    throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
+  },
+  borderInlineStart: _rawValue => {
+    throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
+  },
+  borderLeft: _rawValue => {
+    throw new Error(['`borderLeft` is not supported.', 'You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,', 'but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`.'].join(' '));
+  }
+};
+const aliases = {
+  borderHorizontal: shorthands.borderInline,
+  borderVertical: shorthands.borderBlock,
+  borderBlockStart: shorthands.borderTop,
+  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: val => [['borderInlineWidth', val]],
+  borderHorizontalStyle: val => [['borderInlineStyle', val]],
+  borderHorizontalColor: val => [['borderInlineColor', val]],
+  borderVerticalWidth: val => [['borderBlockWidth', val]],
+  borderVerticalStyle: val => [['borderBlockStyle', val]],
+  borderVerticalColor: val => [['borderBlockColor', val]],
+  borderBlockStartColor: value => [['borderTopColor', value]],
+  borderBlockEndColor: value => [['borderBottomColor', value]],
+  borderBlockStartStyle: value => [['borderTopStyle', value]],
+  borderBlockEndStyle: value => [['borderBottomStyle', value]],
+  borderBlockStartWidth: value => [['borderTopWidth', value]],
+  borderBlockEndWidth: value => [['borderBottomWidth', value]],
+  borderStartColor: val => [['borderInlineStartColor', val]],
+  borderEndColor: val => [['borderInlineEndColor', val]],
+  borderStartStyle: val => [['borderInlineStartStyle', val]],
+  borderEndStyle: val => [['borderInlineEndStyle', val]],
+  borderStartWidth: val => [['borderInlineStartWidth', val]],
+  borderEndWidth: val => [['borderInlineEndWidth', val]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
+  containIntrinsicBlockSize: value => [['containIntrinsicHeight', value]],
+  containIntrinsicInlineSize: value => [['containIntrinsicWidth', value]],
+  marginBlockStart: value => [['marginTop', value]],
+  marginBlockEnd: value => [['marginBottom', value]],
+  marginStart: val => [['marginInlineStart', val]],
+  marginEnd: val => [['marginInlineEnd', val]],
+  marginHorizontal: val => [['marginInline', val]],
+  marginVertical: val => [['marginBlock', val]],
+  overflowBlock: value => [['overflowY', value]],
+  overflowInline: value => [['overflowX', value]],
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: val => [['paddingInlineStart', val]],
+  paddingEnd: val => [['paddingInlineEnd', val]],
+  paddingHorizontal: val => [['paddingInline', val]],
+  paddingVertical: val => [['paddingBlock', val]],
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: val => [['insetInlineStart', val]],
+  end: val => [['insetInlineEnd', val]]
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = exports.default = expansions;

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

@@ -0,0 +1,93 @@
+/**
+ * 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 const shorthands: $ReadOnly<{
+  [key: string]: (TStyleValue) => TReturn,
+}>;
+
+declare const aliases: {
+  // @Deprecated
+  borderHorizontal: typeof shorthands.borderInline,
+  // @Deprecated
+  borderVertical: typeof shorthands.borderBlock,
+  // @Deprecated
+  borderBlockStart: typeof shorthands.borderTop,
+  // @Deprecated
+  borderEnd: typeof shorthands.borderInlineEnd,
+  // @Deprecated
+  borderBlockEnd: typeof shorthands.borderBottom,
+  // @Deprecated
+  borderStart: typeof shorthands.borderInlineStart,
+  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: (val: TStyleValue) => TReturn,
+  borderHorizontalStyle: (val: TStyleValue) => TReturn,
+  borderHorizontalColor: (val: TStyleValue) => TReturn,
+  borderVerticalWidth: (val: TStyleValue) => TReturn,
+  borderVerticalStyle: (val: TStyleValue) => TReturn,
+  borderVerticalColor: (val: 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: (val: TStyleValue) => TReturn,
+  borderEndColor: (val: TStyleValue) => TReturn,
+  borderStartStyle: (val: TStyleValue) => TReturn,
+  borderEndStyle: (val: TStyleValue) => TReturn,
+  borderStartWidth: (val: TStyleValue) => TReturn,
+  borderEndWidth: (val: TStyleValue) => TReturn,
+  borderTopStartRadius: (value: TStyleValue) => TReturn,
+  borderTopEndRadius: (value: TStyleValue) => TReturn,
+  borderBottomStartRadius: (value: TStyleValue) => TReturn,
+  borderBottomEndRadius: (value: TStyleValue) => TReturn,
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn,
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn,
+  marginBlockStart: (value: TStyleValue) => TReturn,
+  marginBlockEnd: (value: TStyleValue) => TReturn,
+  marginStart: (val: TStyleValue) => TReturn,
+  marginEnd: (val: TStyleValue) => TReturn,
+  marginHorizontal: (val: TStyleValue) => TReturn,
+  marginVertical: (val: TStyleValue) => TReturn,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn,
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn,
+  paddingStart: (val: TStyleValue) => TReturn,
+  paddingEnd: (val: TStyleValue) => TReturn,
+  paddingHorizontal: (val: TStyleValue) => TReturn,
+  paddingVertical: (val: TStyleValue) => TReturn,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
+  insetBlockStart: (value: TStyleValue) => TReturn,
+  insetBlockEnd: (value: TStyleValue) => TReturn,
+  start: (val: TStyleValue) => TReturn,
+  end: (val: TStyleValue) => TReturn,
+};
+
+declare export default $ReadOnly<{
+  ...typeof shorthands,
+  ...typeof aliases,
+}>;

package/lib/stylex-consts-utils.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+export type ConstsConfigValue = string | number;
+export type ConstsConfig = Readonly<{ [$$Key$$: string]: ConstsConfigValue }>;

package/lib/stylex-consts-utils.js

@@ -0,0 +1 @@
+"use strict";

package/lib/stylex-consts-utils.js.flow

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+
+export type ConstsConfigValue = string | number;
+
+export type ConstsConfig = $ReadOnly<{
+  [string]: ConstsConfigValue,
+}>;

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

@@ -0,0 +1,26 @@
+/**
+ * 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 { InjectableStyle, StyleXOptions } from './common-types';
+declare function styleXCreateTheme(
+  themeVars: {
+    readonly __varGroupHash__: string;
+    readonly [$$Key$$: string]: string;
+  },
+  variables: {
+    readonly [$$Key$$: string]:
+      | string
+      | { default: string; readonly [$$Key$$: string]: string };
+  },
+  options?: StyleXOptions,
+): [
+  { $$css: true } & { readonly [$$Key$$: string]: string },
+  { [$$Key$$: string]: InjectableStyle },
+];
+export default styleXCreateTheme;

package/lib/stylex-create-theme.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXCreateTheme;
+var _hash = _interopRequireDefault(require("./hash"));
+var _stylexVarsUtils = require("./stylex-vars-utils");
+var _types = require("./types");
+var _defaultOptions = require("./utils/default-options");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function styleXCreateTheme(themeVars, variables, options) {
+  if (typeof themeVars.__varGroupHash__ !== 'string') {
+    throw new Error('Can only override variables theme created with defineVars().');
+  }
+  const {
+    classNamePrefix
+  } = {
+    ..._defaultOptions.defaultOptions,
+    ...options
+  };
+  const rulesByAtRule = {};
+  const sortedKeys = Object.keys(variables).sort();
+  for (const key of sortedKeys) {
+    const value = (0, _types.isCSSType)(variables[key]) ? variables[key].value : variables[key];
+    const nameHash = themeVars[key].slice(6, -1);
+    (0, _stylexVarsUtils.collectVarsByAtRule)(key, {
+      nameHash,
+      value
+    }, rulesByAtRule);
+  }
+  const sortedAtRules = Object.keys(rulesByAtRule).sort((a, b) => a === 'default' ? -1 : b === 'default' ? 1 : a.localeCompare(b));
+  const atRulesStringForHash = sortedAtRules.map(atRule => (0, _stylexVarsUtils.wrapWithAtRules)(rulesByAtRule[atRule].join(''), atRule)).join('');
+  const overrideClassName = classNamePrefix + (0, _hash.default)(atRulesStringForHash);
+  const stylesToInject = {};
+  for (const atRule of sortedAtRules) {
+    const decls = rulesByAtRule[atRule].join('');
+    const rule = `.${overrideClassName}, .${overrideClassName}:root{${decls}}`;
+    const priority = 0.4 + (0, _stylexVarsUtils.priorityForAtRule)(atRule) / 10;
+    const suffix = atRule === 'default' ? '' : `-${(0, _hash.default)(atRule)}`;
+    const ltr = atRule === 'default' ? rule : (0, _stylexVarsUtils.wrapWithAtRules)(rule, atRule);
+    stylesToInject[overrideClassName + suffix] = {
+      ltr: ltr,
+      priority: priority,
+      rtl: null
+    };
+  }
+  const themeClass = `${overrideClassName} ${themeVars.__varGroupHash__}`;
+  return [{
+    [themeVars.__varGroupHash__]: themeClass,
+    $$css: true
+  }, stylesToInject];
+}

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

@@ -0,0 +1,19 @@
+/**
+ * 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';
+
+// It takes an object of variables with their values and the original set of variables to override
+// and returns a hashed className with variables overrides.
+//
+declare export default function styleXCreateTheme(
+  themeVars: { +__varGroupHash__: string, +[string]: string },
+  variables: { +[string]: string | { default: string, +[string]: string } },
+  options?: StyleXOptions,
+): [{ $$css: true, +[string]: string }, { [string]: InjectableStyle }];

package/lib/stylex-create.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 {
+  RawStyles,
+  InjectableStyle,
+  StyleXOptions,
+  FlatCompiledStyles,
+} from './common-types';
+type ClassPathsInNamespace = {
+  readonly [className: string]: ReadonlyArray<string>;
+};
+declare function styleXCreateSet(
+  namespaces: { readonly [$$Key$$: string]: RawStyles },
+  options?: StyleXOptions,
+): [
+  { [$$Key$$: string]: FlatCompiledStyles },
+  { [$$Key$$: string]: InjectableStyle },
+  { readonly [$$Key$$: string]: ClassPathsInNamespace },
+];
+export default styleXCreateSet;

package/lib/stylex-create.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXCreateSet;
+var _hash = require("./hash");
+var _defaultOptions = require("./utils/default-options");
+var _flattenRawStyleObj = require("./preprocess-rules/flatten-raw-style-obj");
+var _basicValidation = require("./preprocess-rules/basic-validation");
+function styleXCreateSet(namespaces, options = _defaultOptions.defaultOptions) {
+  const resolvedNamespaces = {};
+  const injectedStyles = {};
+  const namespaceToClassPaths = {};
+  for (const namespaceName of Object.keys(namespaces)) {
+    const namespace = namespaces[namespaceName];
+    const classPathsInNamespace = {};
+    (0, _basicValidation.validateNamespace)(namespace);
+    const seenProperties = new Set();
+    const flattenedNamespace = (0, _flattenRawStyleObj.flattenRawStyleObject)(namespace, options).reduceRight((arr, curr) => {
+      if (seenProperties.has(curr[0])) {
+        return arr;
+      }
+      seenProperties.add(curr[0]);
+      arr.unshift(curr);
+      return arr;
+    }, []);
+    const compiledNamespaceTuples = flattenedNamespace.map(([key, value]) => {
+      if (options.enableMinifiedKeys === true && !key.startsWith('--')) {
+        const hashedKey = (0, _hash.createShortHash)('<>' + key);
+        const displayKey = options.debug === true ? `${key}-k${hashedKey}` : `k${hashedKey}`;
+        return [displayKey, value.compiled(options)];
+      } else {
+        return [key, value.compiled(options)];
+      }
+    });
+    const namespaceObj = {};
+    for (const [key, value] of compiledNamespaceTuples) {
+      const classNameTuples = value.map(v => Array.isArray(v) ? v : null).filter(Boolean);
+      classNameTuples.forEach(([_className, _, classesToOriginalPath]) => {
+        Object.assign(classPathsInNamespace, classesToOriginalPath);
+      });
+      const classNames = classNameTuples.map(([className]) => className);
+      const uniqueClassNames = new Set(classNames);
+      const className = Array.from(uniqueClassNames).join(' ');
+      namespaceObj[key] = className !== '' ? className : null;
+      for (const [className, injectable] of classNameTuples) {
+        if (injectedStyles[className] == null) {
+          injectedStyles[className] = injectable;
+        }
+      }
+    }
+    resolvedNamespaces[namespaceName] = {
+      ...namespaceObj,
+      $$css: true
+    };
+    namespaceToClassPaths[namespaceName] = classPathsInNamespace;
+  }
+  return [resolvedNamespaces, injectedStyles, namespaceToClassPaths];
+}

package/lib/stylex-create.js.flow

@@ -0,0 +1,37 @@
+/**
+ * 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 {
+  RawStyles,
+  InjectableStyle,
+  StyleXOptions,
+  FlatCompiledStyles,
+} from './common-types';
+type ClassPathsInNamespace = {
+  +[className: string]: $ReadOnlyArray<string>,
+};
+
+// This takes the object of styles passed to `stylex.create` and transforms it.
+//   The transformation replaces style values with classNames.
+//
+// It also collects all injected styles along the way.
+// It then returns a tuple of the transformed style Object and an object of injected styles.
+//
+// This function does some basic validation, and then uses `styleXCreateNamespace` to transform
+// each namespace within,
+//
+// Before returning, it ensures that there are no duplicate styles being injected.
+declare export default function styleXCreateSet(
+  namespaces: { +[string]: RawStyles },
+  options?: StyleXOptions,
+): [
+  { [string]: FlatCompiledStyles },
+  { [string]: InjectableStyle },
+  { +[string]: ClassPathsInNamespace },
+];