@stylexjs/stylex 0.2.0-beta.24 → 0.2.0-beta.25

package/lib/StyleXSheet.d.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import type { LegacyTheme as Theme } from './StyleXTypes';
+import type { LegacyThemeStyles as Theme } from './StyleXTypes';
 type SheetOptions = Readonly<{
   rootDarkTheme?: Theme;
   rootTheme?: Theme;

package/lib/StyleXSheet.js.flow

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { LegacyTheme as Theme } from './StyleXTypes';
+import type { LegacyThemeStyles as Theme } from './StyleXTypes';
 
 // Stylesheet options
 type SheetOptions = $ReadOnly<{

package/lib/StyleXTypes.d.ts

@@ -46,13 +46,19 @@ type CSSPropertiesWithExtras = Partial<
       '::grammar-error': CSSProperties;
       '::marker': CSSProperties;
       // This is a pattern and not a static key so it cannot be typed correctly.
-      // '::part()': CSSProperties;
+      // [key: `::part(${string})` | `::slotted(${string})`]: CSSProperties;
       '::placeholder': CSSProperties;
       '::selection': CSSProperties;
       // This is a pattern and not a static key so it cannot be typed correctly.
       // '::slotted()': CSSProperties;
       '::spelling-error': CSSProperties;
       '::target-text': CSSProperties;
+      '::-webkit-scrollbar'?: CSSProperties;
+      // webkit styles used for Search in Safari
+      '::-webkit-search-decoration'?: CSSProperties;
+      '::-webkit-search-cancel-button'?: CSSProperties;
+      '::-webkit-search-results-button'?: CSSProperties;
+      '::-webkit-search-results-decoration'?: CSSProperties;
     }
   >
 >;
@@ -71,7 +77,7 @@ export type StyleXSingleStyle = false | (null | undefined | NestedCSSPropTypes);
 // NOTE: `XStyle` has been deprecated in favor of `StaticStyles` and `StyleXStyles`.
 
 export type Keyframes = Readonly<{ [name: string]: CSSProperties }>;
-export type LegacyTheme = Readonly<{ [constantName: string]: string }>;
+export type LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
 
 type ComplexStyleValueType<T> = T extends string | number | null
   ? T
@@ -144,25 +150,29 @@ export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
   Omit<CSSPropertiesWithExtras, keyof CSS>
 >;
 
-declare const StyleXThemeTag: unique symbol;
-export type Theme<
+declare const StyleXVarGroupTag: unique symbol;
+export type VarGroup<
   Tokens extends { [key: string]: unknown },
   ID extends symbol = symbol,
-> = Readonly<{ [Key in keyof Tokens]: Tokens[Key] & typeof StyleXThemeTag }> & {
+> = Readonly<{
+  [Key in keyof Tokens]: Tokens[Key] & typeof StyleXVarGroupTag;
+}> & {
   $opaqueId: ID;
   $tokens: Tokens;
 };
 
-export type TokensFromTheme<T extends Theme<TTokens>> = T['$tokens'];
+export type TokensFromVarGroup<T extends VarGroup<TTokens>> = T['$tokens'];
 
-export type IDFromTheme<T extends Theme<TTokens>> = T['$opaqueId'];
+export type IDFromVarGroup<T extends VarGroup<TTokens>> = T['$opaqueId'];
 
 type TTokens = {
   [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];
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X }
+    ? StyleXVar<X>
+    : StyleXVar<T[Key]>;
 }>;
 
 export type StyleX$DefineVars = <
@@ -170,15 +180,15 @@ export type StyleX$DefineVars = <
   ID extends symbol = symbol,
 >(
   tokens: DefaultTokens,
-) => Theme<FlattenTokens<DefaultTokens>, ID>;
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
-export type Variant<
-  T extends Theme<TTokens, symbol>,
+export type Theme<
+  T extends VarGroup<TTokens, symbol>,
   // eslint-disable-next-line no-unused-vars
   Tag extends symbol = symbol,
 > = Tag &
   Readonly<{
-    theme: StyleXClassNameFor<string, IDFromTheme<T>>;
+    theme: StyleXClassNameFor<string, IDFromVarGroup<T>>;
   }>;
 
 type OverridesForTokenType<Config extends { [key: string]: any }> = {
@@ -188,9 +198,9 @@ type OverridesForTokenType<Config extends { [key: string]: any }> = {
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens extends Theme<any>,
+  BaseTokens extends VarGroup<any>,
   ID extends symbol = symbol,
 >(
   baseTokens: BaseTokens,
-  overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,
-) => Variant<BaseTokens, ID>;
+  overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
+) => Theme<BaseTokens, ID>;

package/lib/StyleXTypes.js.flow

@@ -20,65 +20,26 @@ export type StyleXArray<+T> = T | $ReadOnlyArray<StyleXArray<T>>;
 
 type CSSPropertiesWithExtras = $ReadOnly<{
   ...CSSProperties,
-  ':active'?: CSSProperties,
-  ':focus'?: CSSProperties,
-  ':focus-visible'?: CSSProperties,
-  ':hover'?: CSSProperties,
-  ':disabled'?: CSSProperties,
-  ':empty'?: CSSProperties,
-  ':first-child'?: CSSProperties,
-  ':last-child'?: CSSProperties,
   '::before'?: CSSProperties,
   '::after'?: CSSProperties,
+  '::backdrop'?: CSSProperties,
+  '::cue'?: CSSProperties,
+  '::cue-region'?: CSSProperties,
+  '::first-letter'?: CSSProperties,
+  '::first-line'?: CSSProperties,
+  '::file-selector-button'?: CSSProperties,
+  '::grammar-error'?: CSSProperties,
+  '::marker'?: CSSProperties,
   '::placeholder'?: CSSProperties,
+  '::selection'?: CSSProperties,
+  '::spelling-error'?: CSSProperties,
+  '::target-text'?: CSSProperties,
   '::-webkit-scrollbar'?: CSSProperties,
-  // Find a better way to do this. Being forced to add every media query.
-  '@media (max-width: 564px)'?: CSSProperties,
-  '@media (min-height: 700px)'?: CSSProperties,
-  '@media (min-height: 700px) and (max-height: 789px)'?: CSSProperties,
-  '@media (min-height: 753px) and (max-height: 789px)'?: CSSProperties,
-  '@media (min-height: 790px)'?: CSSProperties,
-  '@media (max-width: 648px)'?: CSSProperties,
-  '@media (max-width: 899px)'?: CSSProperties,
-  '@media (max-width: 900px)'?: CSSProperties,
-  '@media (min-width: 900px)'?: CSSProperties,
-  '@media (min-width: 900px) and (max-width: 1259px)'?: CSSProperties,
-  '@media (max-width: 1099px)'?: CSSProperties,
-  '@media (max-width: 1199px)'?: CSSProperties,
-  '@media (max-width: 1259px)'?: CSSProperties,
-  '@media (min-width: 1290px)'?: CSSProperties,
-  '@media (max-width: 420px)'?: CSSProperties,
-  '@media (max-width: 500px)'?: CSSProperties,
-  '@media (pointer: coarse)'?: CSSProperties,
-  '@media (-webkit-min-device-pixel-ratio: 0)'?: CSSProperties,
-  '@media print'?: CSSProperties,
-  // Media queries used for Oculus Web Design Systems (OCDS components).
-  '@media (max-width: 767px)'?: CSSProperties,
-  '@media (min-width: 768px)'?: CSSProperties,
-  '@media (min-width: 768px) and (max-width: 1024px)'?: CSSProperties,
-  '@media (max-width: 1024px)'?: CSSProperties,
-  '@media (min-width: 1025px)'?: CSSProperties,
-  '@media (min-width: 1025px) and (max-width: 1920px)'?: CSSProperties,
-  '@media (max-width: 1920px)'?: CSSProperties,
-  '@media (min-width: 1921px)'?: CSSProperties,
-  // Media queries used for Intern Data Products
-  '@media (min-width: 1500px)'?: CSSProperties,
-  '@media (min-width: 1800px)'?: CSSProperties,
-  '@media (min-width: 2250px)'?: CSSProperties,
   // webkit styles used for Search in Safari
   '::-webkit-search-decoration'?: CSSProperties,
   '::-webkit-search-cancel-button'?: CSSProperties,
   '::-webkit-search-results-button'?: CSSProperties,
   '::-webkit-search-results-decoration'?: CSSProperties,
-  // Media queries used for the logged out header
-  '@media (min-width: 950px)'?: CSSProperties,
-  // Media queries used for bizweb
-  '@media (min-width: 1440px)'?: CSSProperties,
-  '@media (min-width: 1920px)'?: CSSProperties,
-  // Media queries used for fbai
-  '@media (min-width: 800px)'?: CSSProperties,
-  // Media queries used for messengerkidsdotcom
-  '@media (max-width: 1024px) and (min-width: 501px)'?: CSSProperties,
 }>;
 
 export type NestedCSSPropTypes = $ReadOnly<{
@@ -95,7 +56,10 @@ export type XStyleWithout<+T: { +[string]: mixed }> = XStyle<
 
 export type Keyframes = $ReadOnly<{ [name: string]: CSSProperties, ... }>;
 
-export type LegacyTheme = $ReadOnly<{ [constantName: string]: string, ... }>;
+export type LegacyThemeStyles = $ReadOnly<{
+  [constantName: string]: string,
+  ...
+}>;
 
 type ComplexStyleValueType<+T> = T extends StyleXVar<infer U>
   ? U
@@ -164,17 +128,16 @@ export type StyleXStylesWithout<+CSS: { +[string]: mixed }> = StyleXStyles<
 // This is the type for the variables object
 declare export opaque type StyleXVar<+Val: mixed>;
 
-declare export opaque type Theme<
+declare export opaque type VarGroup<
   +Tokens: { +[string]: mixed },
   +_ID: string = string,
 >: $ReadOnly<{ [Key in keyof Tokens]: StyleXVar<Tokens[Key]> }>;
 
-export type TokensFromTheme<T: Theme<{ +[string]: mixed }>> = T extends Theme<
-  infer Tokens extends { +[string]: mixed },
->
-  ? Tokens
-  : empty;
-type IDFromTheme<+T: Theme<{ +[string]: mixed }>> = T extends Theme<
+export type TokensFromVarGroup<T: VarGroup<{ +[string]: mixed }>> =
+  T extends VarGroup<infer Tokens extends { +[string]: mixed }>
+    ? Tokens
+    : empty;
+type IDFromVarGroup<+T: VarGroup<{ +[string]: mixed }>> = T extends VarGroup<
   { +[string]: mixed },
   infer ID,
 >
@@ -196,14 +159,14 @@ export type FlattenTokens<T: TTokens> = {
 
 export type StyleX$DefineVars = <DefaultTokens: TTokens, ID: string = string>(
   tokens: DefaultTokens,
-) => Theme<FlattenTokens<DefaultTokens>, ID>;
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
 
-export type Variant<
-  +T: Theme<{ +[string]: mixed }, string>,
+export type Theme<
+  +T: VarGroup<{ +[string]: mixed }, string>,
   +_Tag: string = string,
 > = $ReadOnly<{
   $$css: true,
-  [string]: StyleXClassNameFor<string, IDFromTheme<T>>,
+  [string]: StyleXClassNameFor<string, IDFromVarGroup<T>>,
 }>;
 
 export type OverridesForTokenType<Config: { +[string]: mixed }> = {
@@ -213,9 +176,9 @@ export type OverridesForTokenType<Config: { +[string]: mixed }> = {
 };
 
 export type StyleX$CreateTheme = <
-  BaseTokens: Theme<{ +[string]: mixed }>,
+  BaseTokens: VarGroup<{ +[string]: mixed }>,
   ID: string = string,
 >(
   baseTokens: BaseTokens,
-  overrides: OverridesForTokenType<TokensFromTheme<BaseTokens>>,
-) => Variant<BaseTokens, ID>;
+  overrides: OverridesForTokenType<TokensFromVarGroup<BaseTokens>>,
+) => Theme<BaseTokens, ID>;

package/lib/stylex.d.ts

@@ -17,7 +17,14 @@ import type {
   InlineStyles,
   StyleXClassNameFor,
 } from './StyleXTypes';
-export type { Theme, Variant } from './StyleXTypes';
+export type {
+  VarGroup,
+  Theme,
+  StyleXStyles,
+  StyleXStylesWithout,
+  StaticStyles,
+  StaticStylesWithout,
+} from './StyleXTypes';
 import injectStyle from './stylex-inject';
 export declare function props(
   this: null | undefined | unknown,

package/lib/stylex.js.flow

@@ -18,7 +18,14 @@ import type {
   StyleXClassNameFor,
 } from './StyleXTypes';
 
-export type { Theme, Variant } from './StyleXTypes';
+export type {
+  VarGroup,
+  Theme,
+  StyleXStyles,
+  StyleXStylesWithout,
+  StaticStyles,
+  StaticStylesWithout,
+} from './StyleXTypes';
 
 import injectStyle from './stylex-inject';
 declare export function props(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/stylex",
-  "version": "0.2.0-beta.24",
+  "version": "0.2.0-beta.25",
   "description": "A library for defining styles for optimized user interfaces.",
   "main": "lib/stylex.js",
   "react-native": "lib/native/stylex.js",
@@ -20,7 +20,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.24"
+    "@stylexjs/scripts": "0.2.0-beta.25"
   },
   "jest": {},
   "files": [