@stylexjs/stylex 0.2.0-beta.9 → 0.4.0

package/lib/StyleXSheet.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 { LegacyThemeStyles as Theme } from './StyleXTypes';
+type SheetOptions = Readonly<{
+  rootDarkTheme?: Theme;
+  rootTheme?: Theme;
+  supportsVariables?: boolean;
+}>;
+/**
+ * This class manages the CSS stylesheet for the page and the injection of new
+ * CSS rules.
+ */
+export declare class StyleXSheet {
+  static LIGHT_MODE_CLASS_NAME: string;
+  static DARK_MODE_CLASS_NAME: string;
+  constructor(opts: SheetOptions);
+  rootTheme: null | undefined | Theme;
+  rootDarkTheme: null | undefined | Theme;
+  supportsVariables: boolean;
+  rules: Array<string>;
+  injected: boolean;
+  tag: null | undefined | HTMLStyleElement;
+  ruleForPriority: Map<number, string>;
+  getVariableMatch(): RegExp;
+  isHeadless(): boolean;
+  getTag(): HTMLStyleElement;
+  getCSS(): string;
+  getRulePosition(rule: string): number;
+  getRuleCount(): number;
+  inject(): void;
+  injectTheme(): void;
+  __injectCustomThemeForTesting(selector: string, theme: Theme): void;
+  delete(rule: string): void;
+  normalizeRule(rule: string): string;
+  getInsertPositionForPriority(priority: number): number;
+  insert(
+    rawLTRRule: string,
+    priority: number,
+    rawRTLRule: null | undefined | string,
+  ): void;
+}
+export declare const styleSheet: StyleXSheet;

package/lib/StyleXSheet.js

@@ -1,12 +1,3 @@
-/**
- * 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.
- *
- * 
- */
-
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
@@ -15,12 +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 }; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 const LIGHT_MODE_CLASS_NAME = '__fb-light-mode';
 const DARK_MODE_CLASS_NAME = '__fb-dark-mode';
-/**
- * Take a theme and generate it's accompanying CSS variables
- */
 function buildTheme(selector, theme) {
   const lines = [];
   lines.push(`${selector} {`);
@@ -31,10 +18,6 @@ function buildTheme(selector, theme) {
   lines.push('}');
   return lines.join('\n');
 }
-
-/**
- * Create a <style> tag and add it to the head.
- */
 function makeStyleTag() {
   const tag = document.createElement('style');
   tag.setAttribute('type', 'text/css');
@@ -44,24 +27,13 @@ function makeStyleTag() {
   head.appendChild(tag);
   return tag;
 }
-
-/**
- * Check if the browser supports CSS variables
- */
 function doesSupportCSSVariables() {
   return globalThis.CSS != null && globalThis.CSS.supports != null && globalThis.CSS.supports('--fake-var:0');
 }
-
-// Regex to replace var(--foo) with an inlined version
 const VARIABLE_MATCH = /var\(--(.*?)\)/g;
-
-// Stylesheet options
-
-/**
- * This class manages the CSS stylesheet for the page and the injection of new
- * CSS rules.
- */
 class StyleXSheet {
+  static LIGHT_MODE_CLASS_NAME = LIGHT_MODE_CLASS_NAME;
+  static DARK_MODE_CLASS_NAME = DARK_MODE_CLASS_NAME;
   constructor(opts) {
     this.tag = null;
     this.injected = false;
@@ -74,18 +46,9 @@ class StyleXSheet {
   getVariableMatch() {
     return VARIABLE_MATCH;
   }
-
-  /**
-   * Check if we have don't have access to the dom
-   */
   isHeadless() {
-    var _globalThis$document;
-    return this.tag == null || (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body) == null;
+    return this.tag == null || globalThis?.document?.body == null;
   }
-
-  /**
-   * Get the stylesheet tag. Throw if none exists.
-   */
   getTag() {
     const {
       tag
@@ -93,52 +56,27 @@ class StyleXSheet {
     (0, _invariant.default)(tag != null, 'expected tag');
     return tag;
   }
-
-  /**
-   * Get the current stylesheet CSS.
-   */
   getCSS() {
     return this.rules.join('\n');
   }
-
-  /**
-   * Get the position of the rule in the stylesheet.
-   */
   getRulePosition(rule) {
     return this.rules.indexOf(rule);
   }
-
-  /**
-   * Count of the current rules in the stylesheet. Used in tests.
-   */
   getRuleCount() {
     return this.rules.length;
   }
-
-  /**
-   * Inject a style tag into the document head
-   */
   inject() {
-    var _globalThis$document2;
     if (this.injected) {
       return;
     }
     this.injected = true;
-
-    // Running in a server environment
-    if (((_globalThis$document2 = globalThis.document) === null || _globalThis$document2 === void 0 ? void 0 : _globalThis$document2.body) == null) {
+    if (globalThis.document?.body == null) {
       this.injectTheme();
       return;
     }
-
-    // Create style tag if in browser
     this.tag = makeStyleTag();
     this.injectTheme();
   }
-
-  /**
-   * Inject the theme styles
-   */
   injectTheme() {
     if (this.rootTheme != null) {
       this.insert(buildTheme(`:root, .${LIGHT_MODE_CLASS_NAME}`, this.rootTheme), 0);
@@ -147,25 +85,14 @@ class StyleXSheet {
       this.insert(buildTheme(`.${DARK_MODE_CLASS_NAME}:root, .${DARK_MODE_CLASS_NAME}`, this.rootDarkTheme), 0);
     }
   }
-
-  /**
-   * Inject custom theme styles (only for internal testing)
-   */
   __injectCustomThemeForTesting(selector, theme) {
     if (theme != null) {
       this.insert(buildTheme(selector, theme), 0);
     }
   }
-
-  /**
-   * Delete the requested rule from the stylesheet
-   */
   delete(rule) {
-    // Get the index of this rule
     const index = this.rules.indexOf(rule);
     (0, _invariant.default)(index >= 0, "Couldn't find the index for rule %s", rule);
-
-    // Remove the rule from our index
     this.rules.splice(index, 1);
     if (this.isHeadless()) {
       return;
@@ -175,10 +102,6 @@ class StyleXSheet {
     (0, _invariant.default)(sheet, 'expected sheet');
     sheet.deleteRule(index);
   }
-
-  /**
-   *
-   */
   normalizeRule(rule) {
     const {
       rootTheme
@@ -190,39 +113,19 @@ class StyleXSheet {
       return rootTheme[name];
     });
   }
-
-  /**
-   * Get the rule position a rule should be inserted at according to the
-   * specified priority.
-   */
   getInsertPositionForPriority(priority) {
-    // If there's an end rule associated with this priority, then get the next
-    // rule which will belong to the next priority
-    // The rule will be inserted before it and assigned to the current priority
     const priorityRule = this.ruleForPriority.get(priority);
     if (priorityRule != null) {
       return this.rules.indexOf(priorityRule) + 1;
     }
-
-    // If we've never created this priority before, then let's find the highest
-    // priority to target
     const priorities = Array.from(this.ruleForPriority.keys()).sort((a, b) => b - a).filter(num => num > priority ? 1 : 0);
-
-    // If there's no priorities then place us at the start
     if (priorities.length === 0) {
       return this.getRuleCount();
     }
-
-    // Place us next to the next highest priority
     const lastPriority = priorities.pop();
     return this.rules.indexOf(this.ruleForPriority.get(lastPriority));
   }
-
-  /**
-   * Insert a rule into the stylesheet.
-   */
   insert(rawLTRRule, priority, rawRTLRule) {
-    // Inject the stylesheet if it hasn't already been
     if (this.injected === false) {
       this.inject();
     }
@@ -232,18 +135,12 @@ class StyleXSheet {
       return;
     }
     const rawRule = rawLTRRule;
-
-    // Don't insert this rule if it already exists
     if (this.rules.includes(rawRule)) {
       return;
     }
-    const rule = this.normalizeRule(rawRule);
-
-    // Get the position where we should insert the rule
+    const rule = this.normalizeRule(addSpecificityLevel(rawRule, Math.floor(priority / 1000)));
     const insertPos = this.getInsertPositionForPriority(priority);
     this.rules.splice(insertPos, 0, rule);
-
-    // Set this rule as the end of the priority group
     this.ruleForPriority.set(priority, rule);
     if (this.isHeadless()) {
       return;
@@ -252,21 +149,14 @@ class StyleXSheet {
     const sheet = tag.sheet;
     if (sheet != null) {
       try {
-        sheet.insertRule(rule, insertPos);
-      } catch {
-        // Ignore: error likely due to inserting prefixed rules (e.g. `::-moz-range-thumb`).
+        sheet.insertRule(rule, Math.min(insertPos, sheet.cssRules.length));
+      } catch (err) {
+        console.error('insertRule error', err, rule, insertPos);
       }
     }
-    // Ignore the case where sheet == null. It's an edge-case Edge 17 bug.
   }
 }
-
-/**
- * Adds an ancestor selector in a media-query-aware way.
- */
 exports.StyleXSheet = StyleXSheet;
-_defineProperty(StyleXSheet, "LIGHT_MODE_CLASS_NAME", LIGHT_MODE_CLASS_NAME);
-_defineProperty(StyleXSheet, "DARK_MODE_CLASS_NAME", DARK_MODE_CLASS_NAME);
 function addAncestorSelector(selector, ancestorSelector) {
   if (!selector.startsWith('@')) {
     return `${ancestorSelector} ${selector}`;
@@ -276,9 +166,20 @@ function addAncestorSelector(selector, ancestorSelector) {
   const rest = selector.slice(firstBracketIndex + 1);
   return `${mediaQueryPart}${ancestorSelector} ${rest}`;
 }
-const styleSheet = new StyleXSheet({
+function addSpecificityLevel(selector, index) {
+  if (selector.startsWith('@keyframes')) {
+    return selector;
+  }
+  const pseudo = Array.from({
+    length: index
+  }).map(() => ':not(#\\#)').join('');
+  const lastOpenCurly = selector.includes('::') ? selector.indexOf('::') : selector.lastIndexOf('{');
+  const beforeCurly = selector.slice(0, lastOpenCurly);
+  const afterCurly = selector.slice(lastOpenCurly);
+  return `${beforeCurly}${pseudo}${afterCurly}`;
+}
+const styleSheet = exports.styleSheet = new StyleXSheet({
   supportsVariables: true,
   rootTheme: {},
   rootDarkTheme: {}
-});
-exports.styleSheet = styleSheet;
+});

package/lib/StyleXSheet.js.flow

@@ -0,0 +1,49 @@
+/**
+ * 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 { LegacyThemeStyles as Theme } from './StyleXTypes';
+
+// Stylesheet options
+type SheetOptions = $ReadOnly<{
+  rootDarkTheme?: Theme,
+  rootTheme?: Theme,
+  supportsVariables?: boolean,
+}>;
+
+/**
+ * This class manages the CSS stylesheet for the page and the injection of new
+ * CSS rules.
+ */
+declare export class StyleXSheet {
+  static LIGHT_MODE_CLASS_NAME: string;
+  static DARK_MODE_CLASS_NAME: string;
+  constructor(opts: SheetOptions): void;
+  rootTheme: ?Theme;
+  rootDarkTheme: ?Theme;
+  supportsVariables: boolean;
+  rules: Array<string>;
+  injected: boolean;
+  tag: ?HTMLStyleElement;
+  ruleForPriority: Map<number, string>;
+  getVariableMatch(): RegExp;
+  isHeadless(): boolean;
+  getTag(): HTMLStyleElement;
+  getCSS(): string;
+  getRulePosition(rule: string): number;
+  getRuleCount(): number;
+  inject(): void;
+  injectTheme(): void;
+  __injectCustomThemeForTesting(selector: string, theme: Theme): void;
+  delete(rule: string): void;
+  normalizeRule(rule: string): string;
+  getInsertPositionForPriority(priority: number): number;
+  insert(rawLTRRule: string, priority: number, rawRTLRule: ?string): void;
+}
+
+declare export const styleSheet: StyleXSheet;

package/lib/StyleXTypes.d.ts

@@ -0,0 +1,218 @@
+/**
+ * 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 { CSSProperties } from './StyleXCSSTypes';
+
+// Using an opaque type to declare ClassNames generated by stylex.
+declare const StyleXClassNameTag: unique symbol;
+export type StyleXClassNameFor<K, V> = string & {
+  _opaque: typeof StyleXClassNameTag;
+  _key: K;
+  _value: V;
+};
+
+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;
+declare class _StyleXVar<out Val> {
+  private _opaque: typeof StyleXVarTag;
+  private _value: Val;
+}
+export type StyleXVar<Val> = _StyleXVar<Val> & string;
+
+type PseudoClassStr = `:${string}`;
+type AtRuleStr = `@${string}`;
+
+type CondStr = PseudoClassStr | AtRuleStr;
+
+type CSSPropertiesWithExtras = Partial<
+  Readonly<
+    CSSProperties & {
+      '::after': CSSProperties;
+      '::backdrop': CSSProperties;
+      '::before': CSSProperties;
+      '::cue': CSSProperties;
+      '::cue-region': CSSProperties;
+      '::first-letter': CSSProperties;
+      '::first-line': CSSProperties;
+      '::file-selector-button': CSSProperties;
+      '::grammar-error': CSSProperties;
+      '::marker': CSSProperties;
+      // This is a pattern and not a static key so it cannot be typed correctly.
+      // [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;
+    }
+  >
+>;
+
+export type NestedCSSPropTypes = Partial<
+  Readonly<{
+    [Key in keyof CSSPropertiesWithExtras]: StyleXClassNameFor<
+      Key,
+      CSSPropertiesWithExtras[Key]
+    >;
+  }>
+>;
+
+type UserAuthoredStyles = CSSPropertiesWithExtras | { [key: string]: unknown };
+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 LegacyThemeStyles = Readonly<{ [constantName: string]: string }>;
+
+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; [cond: CondStr]: infer B }>
+        ? ComplexStyleValueType<A> | ComplexStyleValueType<B>
+        : T;
+
+export type MapNamespace<CSS> = Readonly<{
+  [Key in keyof CSS]: StyleXClassNameFor<Key, ComplexStyleValueType<CSS[Key]>>;
+}>;
+
+export type MapNamespaces<
+  S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+> = Readonly<{
+  [Key in keyof S]: S[Key] extends (...args: infer Args) => infer Obj
+    ? (...args: Args) => Readonly<[MapNamespace<Obj>, InlineStyles]>
+    : MapNamespace<S[Key]>;
+}>;
+
+export type Stylex$Create = <
+  const S extends {
+    [key: string]: UserAuthoredStyles | ((...args: any) => UserAuthoredStyles);
+  },
+>(
+  styles: S,
+) => MapNamespaces<S>;
+
+export type CompiledStyles =
+  | Readonly<{
+      [key: string]: StyleXClassName | null | void | never;
+    }>
+  | Readonly<{
+      theme: StyleXClassName;
+    }>;
+
+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> &
+    Partial<{
+      [Key in Exclude<keyof CSSPropertiesWithExtras, keyof CSS>]: never;
+    }>
+>;
+
+// Replace `XStyle` with this.
+export type StaticStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<false | null | GenStylePropType<CSS>>;
+
+export type StaticStylesWithout<CSS extends UserAuthoredStyles> = StaticStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
+
+export type StyleXStyles<
+  CSS extends UserAuthoredStyles = CSSPropertiesWithExtras,
+> = StyleXArray<
+  | null
+  | false
+  | GenStylePropType<CSS>
+  | Readonly<[GenStylePropType<CSS>, InlineStyles]>
+>;
+export type StyleXStylesWithout<CSS extends UserAuthoredStyles> = StyleXStyles<
+  Omit<CSSPropertiesWithExtras, keyof CSS>
+>;
+
+declare const StyleXVarGroupTag: unique symbol;
+export type VarGroup<
+  Tokens extends { [key: string]: any },
+  ID extends symbol = symbol,
+> = Readonly<{
+  [Key in keyof Tokens]: StyleXVar<Tokens[Key]>;
+}> &
+  Readonly<{
+    __opaqueId: ID;
+    __tokens: Tokens;
+  }> &
+  typeof StyleXVarGroupTag;
+
+export type TokensFromVarGroup<T extends VarGroup<unknown, unknown>> =
+  T['__tokens'];
+
+export type IDFromVarGroup<T extends VarGroup<unknown, unknown>> =
+  T['__opaqueId'];
+
+type TTokens = Readonly<{
+  [key: string]: string | { [key: string]: string };
+}>;
+
+type UnwrapVars<T> = T extends StyleXVar<infer U> ? U : T;
+export type FlattenTokens<T extends TTokens> = Readonly<{
+  [Key in keyof T]: T[Key] extends { [key: string]: infer X }
+    ? UnwrapVars<X>
+    : UnwrapVars<T[Key]>;
+}>;
+
+export type StyleX$DefineVars = <
+  DefaultTokens extends TTokens,
+  ID extends symbol = symbol,
+>(
+  tokens: DefaultTokens,
+) => VarGroup<FlattenTokens<DefaultTokens>, ID>;
+
+declare class ThemeKey<out VG extends VarGroup> extends String {
+  private varGroup: VG;
+}
+export type Theme<
+  T extends VarGroup<unknown, symbol>,
+  Tag extends symbol = symbol,
+> = Tag &
+  Readonly<{
+    theme: StyleXClassNameFor<ThemeKey<T>, IDFromVarGroup<T>>;
+  }>;
+
+type OverridesForTokenType<Config extends { [key: string]: unknown }> = {
+  [Key in keyof Config]?:
+    | Config[Key]
+    | { default: Config[Key]; [atRule: AtRuleStr]: Config[Key] };
+};
+
+export type StyleX$CreateTheme = <
+  TVars extends VarGroup<unknown, unknown>,
+  ThemeID extends symbol = symbol,
+>(
+  baseTokens: TVars,
+  overrides: OverridesForTokenType<TokensFromVarGroup<TVars>>,
+) => Theme<TVars, ThemeID>;

package/lib/StyleXTypes.js

@@ -1,10 +1 @@
-/**
- * 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.
- *
- * 
- */
-
 'use strict';