@stylexjs/stylex 0.2.0-beta.21 → 0.2.0-beta.23

package/README.md

@@ -1,10 +1,12 @@
 # @stylexjs/stylex
 
-StyleX is a JavaScript library for defining styles for optimized user interfaces.
+StyleX is a JavaScript library for defining styles for optimized user
+interfaces.
 
 ## Installation
 
-To start playing with StyleX without having to set up any build settings you can install just two packages:
+To start playing with StyleX without having to set up any build settings you can
+install just two packages:
 
 ```sh
 npm install --save @stylexjs/stylex
@@ -12,13 +14,17 @@ npm install --save @stylexjs/stylex
 
 ### Compiler
 
-StyleX is designed to extract styles to a static CSS style sheet during an app's build process. StyleX provides a Babel plugin along with plugin integrations for Webpack, Rollup and NextJS.
+StyleX is designed to extract styles to a static CSS style sheet during an app's
+build process. StyleX provides a Babel plugin along with plugin integrations for
+Webpack, Rollup and NextJS.
 
 ```sh
 npm install --save-dev @stylexjs/babel-plugin
 ```
 
-For more information on working with the compiler, please see the documentation for [`@stylexjs/babel-plugin`](https://www.npmjs.com/package/@stylexjs/babel-plugin).
+For more information on working with the compiler, please see the documentation
+for
+[`@stylexjs/babel-plugin`](https://www.npmjs.com/package/@stylexjs/babel-plugin).
 
 ### Runtime compiler
 
@@ -43,13 +49,17 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
-For more information on working with the compiler, please see the documentation for [`@stylexjs/dev-runtime`](https://www.npmjs.com/package/@stylexjs/dev-runtime).
+For more information on working with the compiler, please see the documentation
+for
+[`@stylexjs/dev-runtime`](https://www.npmjs.com/package/@stylexjs/dev-runtime).
 
 ## API
 
 ### stylex.create()
 
-Styles are defined as a map of CSS rules using `stylex.create()`. In the example below, there are 2 different CSS rules. The names "root" and "highlighted" are arbitrary names given to the rules.
+Styles are defined as a map of CSS rules using `stylex.create()`. In the example
+below, there are 2 different CSS rules. The names "root" and "highlighted" are
+arbitrary names given to the rules.
 
 ```tsx
 import stylex from '@stylexjs/stylex';
@@ -61,7 +71,7 @@ const styles = stylex.create({
   },
   highlighted: {
     color: 'yellow',
-  }
+  },
 });
 ```
 
@@ -82,63 +92,74 @@ const styles = stylex.create({
     color: 'yellow',
     ':hover': {
       opacity: '0.9',
-    }
-  }
+    },
+  },
 });
 ```
 
-The compiler will extract the rules to CSS and replace the rules in the source code with a "compiled style" object.
+The compiler will extract the rules to CSS and replace the rules in the source
+code with a "compiled style" object.
 
-### stylex.spread()
+### stylex.props()
 
-Applying style rules to specific elements is done using `stylex.spread`. Each argument to this function must be a reference to a compiled style object, or an array of compiled style objects. The function merges styles from left to right.
+Applying style rules to specific elements is done using `stylex.props`. Each
+argument to this function must be a reference to a compiled style object, or an
+array of compiled style objects. The function merges styles from left to right.
 
 ```tsx
-<div {...stylex.spread(styles.root, styles.highlighted)} />
+<div {...stylex.props(styles.root, styles.highlighted)} />
 ```
 
-The `stylex.spread` function returns React props as required to render an element. StyleX styles can still be passed to other components via props, but only the components rendering host platform elements will use `stylex.spread()`. For example:
+The `stylex.props` function returns React props as required to render an
+element. StyleX styles can still be passed to other components via props, but
+only the components rendering host platform elements will use `stylex.props()`.
+For example:
 
 ```tsx
 const styles = stylex.create({
   internalRoot: {
-    padding: 10
+    padding: 10,
   },
   exportedRoot: {
-    position: 'relative'
-  }
+    position: 'relative',
+  },
 });
 
 function InternalComponent(props) {
-  return <div {...props} {...stylex.spread([ styles.internalRoot, props.style ])} />
+  return (
+    <div {...props} {...stylex.props([styles.internalRoot, props.style])} />
+  );
 }
 
 export function ExportedComponent(props) {
-  return <InternalComponent style={[ styles.exportedRoot, props.style ]} />
+  return <InternalComponent style={[styles.exportedRoot, props.style]} />;
 }
 ```
 
 Styles can be conditionally included using standard JavaScript.
 
 ```tsx
-<div {...stylex.spread(styles.root, isHighlighted && styles.highlighted)} />
+<div {...stylex.props(styles.root, isHighlighted && styles.highlighted)} />
 ```
 
-And the local merging of styles can be used to control the relative priority of rules. For example, to allow a component's local styles to take priority over style property values passed in via props.
+And the local merging of styles can be used to control the relative priority of
+rules. For example, to allow a component's local styles to take priority over
+style property values passed in via props.
 
 ```tsx
-<div {...stylex.spread(props.style, styles.root)} />
+<div {...stylex.props(props.style, styles.root)} />
 ```
 
 You can even mix compiled styles with inline styles
 
 ```tsx
-<div {...stylex.spread(styles.root, { opacity })} />
+<div {...stylex.props(styles.root, { opacity })} />
 ```
 
 ### stylex.firstThatWorks()
 
-Defining fallback styles is done with `stylex.firstThatWorks()`. This is useful for engines that may not support a specific style property.
+Defining fallback styles is done with `stylex.firstThatWorks()`. This is useful
+for engines that may not support a specific style property.
 
 ```tsx
 import stylex from '@stylexjs/stylex';
@@ -166,7 +187,8 @@ StyleX comes with full support for Static Types.
 
 ### `XStyle<>`
 
-The most common type you might need to use is `XStyle<>`. This lets you accept an object of arbitrary StyleX styles.
+The most common type you might need to use is `XStyle<>`. This lets you accept
+an object of arbitrary StyleX styles.
 
 ```tsx
 type Props = {
@@ -176,7 +198,7 @@ type Props = {
 
 function MyComponent({style, ...}: Props) {
   return (
-    <div {...stylex.spread(localStyles.foo, localStyles.bar, style)} />
+    <div {...stylex.props(localStyles.foo, localStyles.bar, style)} />
   );
 }
 ```
@@ -189,34 +211,39 @@ To disallow specific style properties, use the `XStyleWithout<>` type.
 type Props = {
   // ...
   style?: XStyleWithout<{
-    postion: unknown,
-    display: unknown
-  }>
+    postion: unknown;
+    display: unknown;
+  }>;
 };
 ```
 
 ### `XStyleValue<>`
 
-To accept specific style properties only, use the `XStyle<{...}>` and `XStyleValue` types. For example, to allow only color-related style props:
+To accept specific style properties only, use the `XStyle<{...}>` and
+`XStyleValue` types. For example, to allow only color-related style props:
 
 ```tsx
 type Props = {
   // ...
   style?: XStyle<{
-    color?: StyleXValue,
-    backgroundColor?: StyleXValue,
-    borderColor?: StyleXValue,
-    borderTopColor?: StyleXValue,
-    borderEndColor?: StyleXValue,
-    borderBottomColor?: StyleXValue,
-    borderStartColor?: StyleXValue,
-  }>,
+    color?: StyleXValue;
+    backgroundColor?: StyleXValue;
+    borderColor?: StyleXValue;
+    borderTopColor?: StyleXValue;
+    borderEndColor?: StyleXValue;
+    borderBottomColor?: StyleXValue;
+    borderStartColor?: StyleXValue;
+  }>;
 };
 ```
 
 ### `XStyleValueFor<>`
 
-To limit the possible values for style properties, use the `XStyleValueFor<>` type.  Pass in a type argument with a union of literal types that provide the set of possible values that the style property can have. For example, if a component should accept `marginTop` but only accept one of `0`, `4`, or `8` pixels as values.
+To limit the possible values for style properties, use the `XStyleValueFor<>`
+type. Pass in a type argument with a union of literal types that provide the set
+of possible values that the style property can have. For example, if a component
+should accept `marginTop` but only accept one of `0`, `4`, or `8` pixels as
+values.
 
 ```tsx
 type Props = {
@@ -229,7 +256,8 @@ type Props = {
 
 ## How StyleX works
 
-StyleX produces atomic styles, which means that each CSS rule contains only a single declaration and uses a unique class name. For example:
+StyleX produces atomic styles, which means that each CSS rule contains only a
+single declaration and uses a unique class name. For example:
 
 ```tsx
 import stylex from '@stylexjs/stylex';
@@ -242,6 +270,15 @@ const styles = stylex.create({
 }
 ```
 
-From this code, StyleX will generate 2 classes. One for the `width: '100%'` declaration, and one for the `color: 'red'` declaration. If you use the declaration `width: '100%'` anywhere else in your application, it will *reuse the same CSS class* rather than creating a new one.
-
-One of the benefits of this approach is that the generated CSS file grows *logarithmically* as you add new styled components to your app. As more style declarations are added to components, they are more likely to already be in use elsehwere in the app. As a result of this CSS optimization, the generated CSS style sheet for an app is usually small enough to be contained in a single file and used across routes, avoiding style recalculation and layout thrashing as users navigate through your app.
+From this code, StyleX will generate 2 classes. One for the `width: '100%'`
+declaration, and one for the `color: 'red'` declaration. If you use the
+declaration `width: '100%'` anywhere else in your application, it will _reuse
+the same CSS class_ rather than creating a new one.
+
+One of the benefits of this approach is that the generated CSS file grows
+_logarithmically_ as you add new styled components to your app. As more style
+declarations are added to components, they are more likely to already be in use
+elsehwere in the app. As a result of this CSS optimization, the generated CSS
+style sheet for an app is usually small enough to be contained in a single file
+and used across routes, avoiding style recalculation and layout thrashing as
+users navigate through your app.

package/lib/StyleXCSSTypes.js

@@ -1 +1 @@
-"use strict";
+'use strict';

package/lib/StyleXSheet.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.styleSheet = exports.StyleXSheet = void 0;
 var _invariant = _interopRequireDefault(require("invariant"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const LIGHT_MODE_CLASS_NAME = "__fb-light-mode";
-const DARK_MODE_CLASS_NAME = "__fb-dark-mode";
+const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
+const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
 function buildTheme(selector, theme) {
   const lines = [];
   lines.push(`${selector} {`);
@@ -15,20 +15,20 @@ function buildTheme(selector, theme) {
     const value = theme[key];
     lines.push(`  --${key}: ${value};`);
   }
-  lines.push("}");
-  return lines.join("\n");
+  lines.push('}');
+  return lines.join('\n');
 }
 function makeStyleTag() {
-  const tag = document.createElement("style");
-  tag.setAttribute("type", "text/css");
-  tag.setAttribute("data-stylex", "true");
-  const head = document.head || document.getElementsByTagName("head")[0];
-  (0, _invariant.default)(head, "expected head");
+  const tag = document.createElement('style');
+  tag.setAttribute('type', 'text/css');
+  tag.setAttribute('data-stylex', 'true');
+  const head = document.head || document.getElementsByTagName('head')[0];
+  (0, _invariant.default)(head, 'expected head');
   head.appendChild(tag);
   return tag;
 }
 function doesSupportCSSVariables() {
-  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports("--fake-var:0");
+  return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
 }
 const VARIABLE_MATCH = /var\(--(.*?)\)/g;
 class StyleXSheet {
@@ -53,11 +53,11 @@ class StyleXSheet {
     const {
       tag
     } = this;
-    (0, _invariant.default)(tag != null, "expected tag");
+    (0, _invariant.default)(tag != null, 'expected tag');
     return tag;
   }
   getCSS() {
-    return this.rules.join("\n");
+    return this.rules.join('\n');
   }
   getRulePosition(rule) {
     return this.rules.indexOf(rule);
@@ -99,7 +99,7 @@ class StyleXSheet {
     }
     const tag = this.getTag();
     const sheet = tag.sheet;
-    (0, _invariant.default)(sheet, "expected sheet");
+    (0, _invariant.default)(sheet, 'expected sheet');
     sheet.deleteRule(index);
   }
   normalizeRule(rule) {
@@ -156,17 +156,16 @@ class StyleXSheet {
 }
 exports.StyleXSheet = StyleXSheet;
 function addAncestorSelector(selector, ancestorSelector) {
-  if (!selector.startsWith("@")) {
+  if (!selector.startsWith('@')) {
     return `${ancestorSelector} ${selector}`;
   }
-  const firstBracketIndex = selector.indexOf("{");
+  const firstBracketIndex = selector.indexOf('{');
   const mediaQueryPart = selector.slice(0, firstBracketIndex + 1);
   const rest = selector.slice(firstBracketIndex + 1);
   return `${mediaQueryPart}${ancestorSelector} ${rest}`;
 }
-const styleSheet = new StyleXSheet({
+const styleSheet = exports.styleSheet = new StyleXSheet({
   supportsVariables: true,
   rootTheme: {},
   rootDarkTheme: {}
-});
-exports.styleSheet = styleSheet;
+});

package/lib/StyleXTypes.d.ts

@@ -15,29 +15,18 @@ export type StyleXClassNameFor<K, V> = string & {
   _value: V;
 };
 
-export type StyleXClassNameForValue<V> = StyleXClassNameFor<unknown, V>;
-export type StyleXClassNameForKey<K> = StyleXClassNameFor<K, unknown>;
-export type StyleXClassName = StyleXClassNameFor<unknown, unknown>;
+export type StyleXClassNameForValue<V> = StyleXClassNameFor<any, V>;
+export type StyleXClassNameForKey<K> = StyleXClassNameFor<K, any>;
+export type StyleXClassName = StyleXClassNameFor<any, any>;
 // Type for arbitrarily nested Array.
 export type StyleXArray<T> = T | ReadonlyArray<StyleXArray<T>>;
 
 declare const StyleXVarTag: unique symbol;
 export type StyleXVar<_Val> = string & typeof StyleXVarTag;
 
-// prettier-ignore
-type NonDollarChars =
-  | 'a' | 'A' | 'b' | 'B' | 'c' | 'C' | 'd' | 'D'
-  | 'e' | 'E' | 'f' | 'F' | 'g' | 'G'
-  | 'h' | 'H' | 'i' | 'I' | 'j' | 'J' | 'k' | 'K'
-  | 'l' | 'L' | 'm' | 'M' | 'n' | 'N' | 'o' | 'O' | 'p' | 'P'
-  | 'q' | 'Q' | 'r' | 'R' | 's' | 'S' | 't' | 'T'
-  | 'u' | 'U' | 'v' | 'V' | 'w' | 'W'
-  | 'x' | 'X' | 'y' | 'Y' | 'z' | 'Z'
-  | '-' | '_' | '@' | ':';
-
 // Strings that don't start with a dollar sign.
 // So that we can `&` with {$$css: true} without type errors.
-type NonDollarStr = `${NonDollarChars}${string}`;
+type string = `${NonDollarChars}${string}`;
 type PseudoClassStr = `:${string}`;
 type AtRuleStr = `@${string}`;
 
@@ -77,16 +66,12 @@ export type NestedCSSPropTypes = Partial<
   }>
 >;
 
-type UserAuthoredStyles = { [key: NonDollarStr]: unknown };
+type UserAuthoredStyles = { [key: string]: unknown };
 export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
-export type XStyle<T extends UserAuthoredStyles = NestedCSSPropTypes> =
-  StyleXArray<false | (null | undefined | Readonly<T & { $$css: true }>)>;
-export type XStyleWithout<T extends UserAuthoredStyles> = XStyle<
-  Readonly<Pick<NestedCSSPropTypes, Exclude<keyof NestedCSSPropTypes, keyof T>>>
->;
+// NOTE: `XStyle` has been deprecated in favor of `StaticStyles` and `StyleXStyles`.
 
-export type Keyframes = Readonly<{ [name: NonDollarStr]: CSSProperties }>;
-export type LegacyTheme = Readonly<{ [constantName: NonDollarStr]: string }>;
+export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
+export type LegacyTheme = Readonly<{ [constantName: string]: string }>;
 
 type ComplexStyleValueType<T> = T extends string | number | null
   ? T
@@ -98,14 +83,10 @@ type ComplexStyleValueType<T> = T extends string | number | null
   ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
   : T;
 
-type _MapNamespace<CSS> = Readonly<{
+export type MapNamespace<CSS> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>;
 }>;
 
-export type MapNamespace<CSS> = Readonly<
-  _MapNamespace<CSS> & Readonly<{ $$css: true }>
->;
-
 export type MapNamespaces<
   S extends {
     [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
@@ -124,34 +105,29 @@ export type Stylex$Create = <
   styles: S,
 ) => MapNamespaces<S>;
 
-export type CompiledStyles = Readonly<
-  {
-    [key: NonDollarStr]:
-      | StyleXClassName
-      | Readonly<{ [key: NonDollarStr]: StyleXClassName }>;
-  } & { $$css: true }
->;
+export type CompiledStyles = Readonly<{
+  [key: string]: StyleXClassName | null | void | never;
+}>;
 
-export type InlineStyles = Readonly<
-  { [key: NonDollarStr]: string } & { $$css?: void }
->;
+declare const StyleXInlineStylesTag: unique symbol;
+
+export type InlineStyles = typeof StyleXInlineStylesTag;
 
 type _GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, Readonly<CSS[Key]>>;
 }>;
 type GenStylePropType<CSS extends UserAuthoredStyles> = Readonly<
-  _GenStylePropType<CSS> & { $$css: true } & Partial<{
-      [Key in Exclude<
-        keyof CSSPropertiesWithExtras,
-        keyof CSS | '$$css'
-      >]: never;
+  _GenStylePropType<CSS> &
+    Partial<{
+      [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
     }>
 >;
 
 // Replace `XStyle` with this.
 export type StaticStyles<
   CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
-> = StyleXArray<false | null | void | GenStylePropType<CSS>>;
+> = StyleXArray<false | null | GenStylePropType<CSS>>;
+
 export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
   Omit<CSSPropertiesWithExtras, keyof CSS>
 >;
@@ -160,7 +136,6 @@ export type StyleXStyles<
   CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
 > = StyleXArray<
   | null
-  | void
   | false
   | GenStylePropType<CSS>
   | Readonly<[GenStylePropType<CSS>, InlineStyles]>
@@ -171,26 +146,26 @@ export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
 
 declare const StyleXThemeTag: unique symbol;
 export type Theme<
-  Tokens extends { [key: NonDollarStr]: unknown },
+  Tokens extends { [key: string]: unknown },
   ID extends symbol = symbol,
-> = Readonly<{ [_Key in keyof Tokens]: string }> & {
+> = Readonly<{ [Key in keyof Tokens]: Tokens[Key] & typeof StyleXThemeTag }> & {
   $opaqueId: ID;
   $tokens: Tokens;
-} & typeof StyleXThemeTag;
+};
 
 export type TokensFromTheme<T extends Theme<TTokens>> = T['$tokens'];
 
 export type IDFromTheme<T extends Theme<TTokens>> = T['$opaqueId'];
 
 type TTokens = {
-  [key: NonDollarStr]: string | { default: string; [key: AtRuleStr]: string };
+  [key: string]: string | { default: string; [key: AtRuleStr]: string };
 };
 
 export type FlattenTokens<T extends TTokens> = Readonly<{
   [Key in keyof T]: T[Key] extends { [key: string]: infer X } ? X : T[Key];
 }>;
 
-export type StyleX$CreateVars = <
+export type StyleX$DefineVars = <
   DefaultTokens extends TTokens,
   ID extends symbol = symbol,
 >(
@@ -212,7 +187,7 @@ type OverridesForTokenType<Config extends { [key: string]: any }> = {
     | { default: Config[Key]; [atRule: AtRuleStr]: Config[Key] };
 };
 
-export type StyleX$OverrideVars = <
+export type StyleX$CreateTheme = <
   BaseTokens extends Theme<any>,
   ID extends symbol = symbol,
 >(

package/lib/StyleXTypes.js

@@ -1 +1 @@
-"use strict";
+'use strict';

package/lib/StyleXTypes.js.flow

@@ -97,15 +97,15 @@ export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
 
 export type LegacyTheme = $ReadOnly<{ [constantName: string]: string, ... }>;
 
-type ComplexStyleValueType<+T> = T extends string | number | null
-  ? T
-  : T extends StyleXVar<infer U>
+type ComplexStyleValueType<+T> = T extends StyleXVar<infer U>
   ? U
+  : T extends string | number | null
+  ? T
   : T extends $ReadOnlyArray<infer U>
   ? U
   : T extends $ReadOnly<{ default: infer A, +[string]: infer B }>
   ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
-  : T;
+  : $ReadOnly<T>;
 
 type _MapNamespace<+CSS: { +[string]: mixed }> = $ReadOnly<{
   [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>,
@@ -125,10 +125,7 @@ export type Stylex$Create = <S: { +[string]: mixed }>(
 
 export type CompiledStyles = $ReadOnly<{
   $$css: true,
-  [key: string]:
-    | StyleXClassName
-    | $ReadOnly<{ [key: string]: StyleXClassName, ... }>,
-  ...
+  [key: string]: StyleXClassName,
 }>;
 export type InlineStyles = $ReadOnly<{
   $$css?: void,
@@ -163,21 +160,21 @@ export type StyleXStyles<+CSS: { +[string]: mixed } = CSSPropertiesWithExtras> =
 export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
   $Rest<CSSPropertiesWithExtras, $ReadOnly<CSS>>,
 >;
+
 // This is the type for the variables object
-declare export opaque type StyleXVar<+_Val: mixed>;
+declare export opaque type StyleXVar<+Val: mixed>;
 
 declare export opaque type Theme<
   +Tokens: { +[string]: mixed },
-  // eslint-disable-next-line no-unused-vars
-  +ID: string = string,
+  +_ID: string = string,
 >: $ReadOnly<{ [Key in keyof Tokens]: StyleXVar<Tokens[Key]> }>;
 
 export type TokensFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
-  infer Tokens,
+  infer Tokens extends { +[string]: mixed },
 >
   ? Tokens
   : empty;
-type IDFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
+type IDFromTheme<+T: Theme<{ +[string]: mixed }>> = T extends Theme<
   { +[string]: mixed },
   infer ID,
 >
@@ -185,7 +182,10 @@ type IDFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
   : empty;
 
 type TTokens = $ReadOnly<{
-  [string]: string | $ReadOnly<{ default: string, [string]: string }>,
+  [string]:
+    | number
+    | string
+    | $ReadOnly<{ default: number | string, [string]: number | string }>,
 }>;
 
 export type FlattenTokens<T: TTokens> = {
@@ -194,7 +194,7 @@ export type FlattenTokens<T: TTokens> = {
     : T[Key],
 };
 
-export type StyleX$CreateVars = <DefaultTokens: TTokens, ID: string = string>(
+export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
   tokens: DefaultTokens,
 ) => Theme<FlattenTokens<DefaultTokens>, ID>;
 
@@ -212,7 +212,7 @@ export type OverridesForTokenType<Config: { +[string]: mixed }> = {
     | { +default: Config[Key], +[string]: Config[Key] },
 };
 
-export type StyleX$OverrideVars = <
+export type StyleX$CreateTheme = <
   BaseTokens: Theme<{ +[string]: mixed }>,
   ID: string = string,
 >(

package/lib/native/CSSCustomPropertyValue.js

@@ -10,7 +10,7 @@ function camelize(s) {
   return s.replace(/-./g, x => x.toUpperCase()[1]);
 }
 function createCSSCustomPropertyValue(value) {
-  if (typeof value === "string") {
+  if (typeof value === 'string') {
     const match = CUSTOM_PROPERTY_REGEX.exec(value);
     if (match) {
       return new CSSCustomPropertyValue(match[1], match[2]);

package/lib/native/CSSLengthUnitValue.js

@@ -30,7 +30,7 @@ class CSSLengthUnitValue {
     const value = this.value;
     const valuePercent = value / 100;
     switch (unit) {
-      case "em":
+      case 'em':
         {
           if (inheritedFontSize == null) {
             return fontScale * 16 * value;
@@ -38,27 +38,27 @@ class CSSLengthUnitValue {
             return inheritedFontSize * value;
           }
         }
-      case "px":
+      case 'px':
         {
           return value;
         }
-      case "rem":
+      case 'rem':
         {
           return fontScale * 16 * value;
         }
-      case "vh":
+      case 'vh':
         {
           return viewportHeight * valuePercent;
         }
-      case "vmin":
+      case 'vmin':
         {
           return Math.min(viewportWidth, viewportHeight) * valuePercent;
         }
-      case "vmax":
+      case 'vmax':
         {
           return Math.max(viewportWidth, viewportHeight) * valuePercent;
         }
-      case "vw":
+      case 'vw':
         {
           return viewportWidth * valuePercent;
         }