@stylexjs/stylex 0.12.0 → 0.13.0

package/lib/{VarTypes.js.flow → cjs/types/VarTypes.js.flow}

@@ -7,7 +7,7 @@
  * @flow strict
  */
 
-import type { ValueWithDefault } from './util-types';
+import type { ValueWithDefault } from './StyleXUtils';
 
 export type CSSSyntax =
   | '*'
@@ -27,68 +27,66 @@ export type CSSSyntax =
   | '<transform-list>';
 
 type CSSSyntaxType = CSSSyntax;
+type InnerValue = null | string | number;
 
-interface ICSSType<+_T: string | number> {
+interface ICSSType<+_T: InnerValue> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-
-declare export class Angle<+T: string | 0> implements ICSSType<T> {
+declare export class Angle<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Color<+T: string> implements ICSSType<T> {
+declare export class Color<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Url<+T: string> implements ICSSType<T> {
+declare export class Url<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Image<+T: string> implements ICSSType<T> {
+declare export class Image<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Integer<+T: string | number> implements ICSSType<T> {
+declare export class Integer<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class LengthPercentage<+T: string | number>
-  implements ICSSType<T>
-{
+declare export class LengthPercentage<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Length<+T: string | number> implements ICSSType<T> {
+declare export class Length<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Percentage<+T: string | number> implements ICSSType<T> {
+declare export class Percentage<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Num<+T: string | number> implements ICSSType<T> {
+declare export class Num<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Resolution<+T: string> implements ICSSType<T> {
+declare export class Resolution<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class Time<+T: string | 0> implements ICSSType<T> {
+declare export class Time<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class TransformFunction<+T: string> implements ICSSType<T> {
+declare export class TransformFunction<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
-declare export class TransformList<+T: string> implements ICSSType<T> {
+declare export class TransformList<+T: InnerValue> implements ICSSType<T> {
   +value: ValueWithDefault<string>;
   +syntax: CSSSyntaxType;
 }
 
-export type CSSType<+T: null | string | number> =
+export type CSSType<+T: InnerValue> =
   | Angle<T>
   | Color<T>
   | Url<T>

package/lib/es/inject.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.
+ *
+ *
+ */
+
+declare function inject(cssText: string, priority: number): string;
+export default inject;

package/lib/es/inject.js.flow

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+declare export default function inject(
+  cssText: string,
+  priority: number,
+): string;

package/lib/es/inject.mjs

@@ -0,0 +1,208 @@
+const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+function addSpecificityLevel(cssText, index) {
+  if (cssText.startsWith('@keyframes')) {
+    return cssText;
+  }
+  const pseudoSelector = Array.from({
+    length: index
+  }).map(() => ':not(#\\#)').join('');
+  const lastOpenCurly = cssText.includes('::') ? cssText.indexOf('::') : cssText.lastIndexOf('{');
+  const beforeCurly = cssText.slice(0, lastOpenCurly);
+  const afterCurly = cssText.slice(lastOpenCurly);
+  return `${beforeCurly}${pseudoSelector}${afterCurly}`;
+}
+
+function createCSSStyleSheet(rootNode, textContent) {
+  if (canUseDOM) {
+    const root = rootNode != null ? rootNode : document;
+    let element = root?.querySelector('[data-stylex]');
+    if (element == null) {
+      element = document.createElement('style');
+      element.setAttribute('data-stylex', 'true');
+      if (typeof textContent === 'string') {
+        element.appendChild(document.createTextNode(textContent));
+      }
+      const container = root.nodeType === Node.DOCUMENT_NODE ? root.head : root;
+      if (container) {
+        const firstChild = container.firstChild;
+        if (firstChild != null) {
+          container.insertBefore(element, firstChild);
+        } else {
+          container.appendChild(element);
+        }
+      }
+    }
+    return element.sheet;
+  } else {
+    return null;
+  }
+}
+
+function createOrderedCSSStyleSheet(sheet) {
+  const groups = {};
+  const seenRules = {};
+  if (sheet != null) {
+    let group = 0;
+    for (let i = 0; i < sheet.cssRules.length; i++) {
+      const cssRule = sheet.cssRules[i];
+      const cssText = cssRule.cssText;
+      if (cssText.indexOf('stylesheet-group') > -1) {
+        group = decodeGroupRule(cssRule);
+        groups[group] = {
+          start: i,
+          rules: [cssText]
+        };
+      } else {
+        const key = getSeenRuleKey(cssText);
+        if (key != null) {
+          seenRules[key] = true;
+          groups[group].rules.push(cssText);
+        }
+      }
+    }
+  }
+  function sheetInsert(sheet, group, text) {
+    const orderedGroups = getOrderedGroups(groups);
+    const groupIndex = orderedGroups.indexOf(group);
+    const nextGroupIndex = groupIndex + 1;
+    const nextGroup = orderedGroups[nextGroupIndex];
+    const position = nextGroup != null && groups[nextGroup].start != null ? groups[nextGroup].start : sheet.cssRules.length;
+    const isInserted = insertRuleAt(sheet, text, position);
+    if (isInserted) {
+      if (groups[group].start == null) {
+        groups[group].start = position;
+      }
+      for (let i = nextGroupIndex; i < orderedGroups.length; i += 1) {
+        const groupNumber = orderedGroups[i];
+        const previousStart = groups[groupNumber].start || 0;
+        groups[groupNumber].start = previousStart + 1;
+      }
+    }
+    return isInserted;
+  }
+  const OrderedCSSStyleSheet = {
+    getTextContent() {
+      return getOrderedGroups(groups).map(group => {
+        const rules = groups[group].rules;
+        const marker = rules.shift();
+        rules.sort();
+        if (marker !== undefined) {
+          rules.unshift(marker);
+        }
+        return rules.join('\n');
+      }).join('\n');
+    },
+    insert(cssText, groupValue) {
+      const group = Number(groupValue);
+      if (groups[group] == null) {
+        const markerRule = encodeGroupRule(group);
+        groups[group] = {
+          start: null,
+          rules: [markerRule]
+        };
+        if (sheet != null) {
+          sheetInsert(sheet, group, markerRule);
+        }
+      }
+      const key = getSeenRuleKey(cssText);
+      if (key != null && seenRules[key] == null) {
+        seenRules[key] = true;
+        let shouldUpdate = true;
+        if (sheet != null) {
+          const isInserted = sheetInsert(sheet, group, cssText);
+          if (!isInserted) {
+            shouldUpdate = false;
+          }
+        }
+        if (shouldUpdate) {
+          groups[group].rules.push(cssText);
+        }
+      }
+    }
+  };
+  return OrderedCSSStyleSheet;
+}
+function encodeGroupRule(group) {
+  return `[stylesheet-group="${group}"]{}`;
+}
+const groupPattern = /["']/g;
+function decodeGroupRule(cssRule) {
+  return Number(cssRule.selectorText.split(groupPattern)[1]);
+}
+function getOrderedGroups(obj) {
+  return Object.keys(obj).map(Number).sort((a, b) => a > b ? 1 : -1);
+}
+const selectorPattern = /\s*([,])\s*/g;
+const conditionalRulePattern = /^@(media|supports|container)\s*\([^)]+\)\s*{/;
+function getSeenRuleKey(cssText) {
+  if (conditionalRulePattern.test(cssText)) {
+    const index = cssText.indexOf('{');
+    const query = cssText.substring(0, index).trim();
+    const rest = cssText.substring(index + 1).trim();
+    const next = getSeenRuleKey(rest);
+    const normalizedNext = next !== null && next !== '' ? next.replace(selectorPattern, '$1') : '';
+    return `${query} { ${normalizedNext}`;
+  } else {
+    const selector = cssText.split('{')[0].trim();
+    return selector !== '' ? selector.replace(selectorPattern, '$1') : null;
+  }
+}
+function insertRuleAt(root, cssText, position) {
+  try {
+    root.insertRule(cssText, position);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+const roots = new WeakMap();
+const sheets = [];
+function createSheet(root) {
+  let sheet;
+  if (canUseDOM) {
+    const rootNode = document;
+    if (sheets.length === 0) {
+      sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(rootNode));
+      roots.set(rootNode, sheets.length);
+      sheets.push(sheet);
+    } else {
+      const index = roots.get(rootNode);
+      if (index == null) {
+        const initialSheet = sheets[0];
+        const textContent = initialSheet != null ? initialSheet.getTextContent() : '';
+        sheet = createOrderedCSSStyleSheet(createCSSStyleSheet(rootNode, textContent));
+        roots.set(rootNode, sheets.length);
+        sheets.push(sheet);
+      } else {
+        sheet = sheets[index];
+      }
+    }
+  } else {
+    if (sheets.length === 0) {
+      sheet = createOrderedCSSStyleSheet(createCSSStyleSheet());
+      sheets.push(sheet);
+    } else {
+      sheet = sheets[0];
+    }
+  }
+  return {
+    getTextContent() {
+      return sheet.getTextContent();
+    },
+    insert(cssText, groupValue) {
+      sheets.forEach(s => {
+        s.insert(cssText, groupValue);
+      });
+    }
+  };
+}
+
+const sheet = createSheet();
+function inject(cssText, priority) {
+  const text = addSpecificityLevel(cssText, Math.floor(priority / 1000));
+  sheet.insert(text, priority);
+  return text;
+}
+
+export { inject as default };

package/lib/es/stylesheet/createCSSStyleSheet.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 declare function createCSSStyleSheet(
+  rootNode?: Node,
+  textContent?: string,
+): null | undefined | CSSStyleSheet;

package/lib/es/stylesheet/createCSSStyleSheet.js.flow

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+declare export function createCSSStyleSheet(
+  rootNode?: Node,
+  textContent?: string,
+): ?CSSStyleSheet;

package/lib/es/stylesheet/createOrderedCSSStyleSheet.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 OrderedCSSStyleSheet = {
+  getTextContent: () => string;
+  insert: (cssText: string, groupValue: number) => void;
+};
+/**
+ * Order-based insertion of CSS.
+ *
+ * Each rule is associated with a numerically defined group.
+ * Groups are ordered within the style sheet according to their number, with the
+ * lowest first.
+ *
+ * Groups are implemented using marker rules. The selector of the first rule of
+ * each group is used only to encode the group number for hydration. An
+ * alternative implementation could rely on CSSMediaRule, allowing groups to be
+ * treated as a sub-sheet, but the Edge implementation of CSSMediaRule is
+ * broken.
+ * https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+ * https://gist.github.com/necolas/aa0c37846ad6bd3b05b727b959e82674
+ */
+export declare function createOrderedCSSStyleSheet(
+  sheet: null | undefined | CSSStyleSheet,
+): OrderedCSSStyleSheet;

package/lib/es/stylesheet/createOrderedCSSStyleSheet.js.flow

@@ -0,0 +1,32 @@
+/**
+ * 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 OrderedCSSStyleSheet = {|
+  getTextContent: () => string,
+  insert: (cssText: string, groupValue: number) => void,
+|};
+
+/**
+ * Order-based insertion of CSS.
+ *
+ * Each rule is associated with a numerically defined group.
+ * Groups are ordered within the style sheet according to their number, with the
+ * lowest first.
+ *
+ * Groups are implemented using marker rules. The selector of the first rule of
+ * each group is used only to encode the group number for hydration. An
+ * alternative implementation could rely on CSSMediaRule, allowing groups to be
+ * treated as a sub-sheet, but the Edge implementation of CSSMediaRule is
+ * broken.
+ * https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+ * https://gist.github.com/necolas/aa0c37846ad6bd3b05b727b959e82674
+ */
+declare export function createOrderedCSSStyleSheet(
+  sheet: ?CSSStyleSheet,
+): OrderedCSSStyleSheet;

package/lib/es/stylesheet/createSheet.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
+type Sheet = Omit<OrderedCSSStyleSheet, keyof ({})> & {};
+export declare function createSheet(root?: HTMLElement): Sheet;

package/lib/es/stylesheet/createSheet.js.flow

@@ -0,0 +1,16 @@
+/**
+ * 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 { OrderedCSSStyleSheet } from './createOrderedCSSStyleSheet';
+
+type Sheet = {
+  ...OrderedCSSStyleSheet,
+};
+
+declare export function createSheet(root?: HTMLElement): Sheet;

package/lib/es/stylesheet/utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 declare const canUseDOM: boolean;
+/**
+ * Adds :not(#\#) to selectors to increase their specificity.
+ * This is used to polyfill @layer
+ */
+export declare function addSpecificityLevel(
+  cssText: string,
+  index: number,
+): string;

package/lib/es/stylesheet/utils.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
+ */
+
+declare export const canUseDOM: boolean;
+
+/**
+ * Adds :not(#\#) to selectors to increase their specificity.
+ * This is used to polyfill @layer
+ */
+declare export function addSpecificityLevel(
+  cssText: string,
+  index: number,
+): string;

package/lib/es/stylex.d.ts

@@ -0,0 +1,135 @@
+/**
+ * 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 {
+  CompiledStyles,
+  InlineStyles,
+  Keyframes,
+  StaticStyles,
+  StaticStylesWithout,
+  StyleX$Create,
+  StyleX$CreateTheme,
+  StyleX$DefineVars,
+  StyleX$DefineConsts,
+  StyleXArray,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  VarGroup,
+  PositionTry,
+} from './types/StyleXTypes';
+import type { ValueWithDefault } from './types/StyleXUtils';
+import * as Types from './types/VarTypes';
+export type {
+  StaticStyles,
+  StaticStylesWithout,
+  StyleXStyles,
+  StyleXStylesWithout,
+  Theme,
+  Types,
+  VarGroup,
+};
+export declare const create: StyleX$Create;
+export declare const createTheme: StyleX$CreateTheme;
+export declare const defineConsts: StyleX$DefineConsts;
+export declare const defineVars: StyleX$DefineVars;
+export declare const firstThatWorks: <T extends string | number>(
+  ..._styles: ReadonlyArray<T>
+) => ReadonlyArray<T>;
+export declare const keyframes: (_keyframes: Keyframes) => string;
+export declare const positionTry: (_positionTry: PositionTry) => string;
+export declare function props(
+  this: null | undefined | unknown,
+  ...styles: ReadonlyArray<
+    StyleXArray<
+      | (null | undefined | CompiledStyles)
+      | boolean
+      | Readonly<[CompiledStyles, InlineStyles]>
+    >
+  >
+): Readonly<{
+  className?: string;
+  'data-style-src'?: string;
+  style?: Readonly<{ [$$Key$$: string]: string | number }>;
+}>;
+export declare const types: {
+  angle: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Angle<T>;
+  color: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Color<T>;
+  url: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Url<T>;
+  image: <T extends string = string>(_v: ValueWithDefault<T>) => Types.Image<T>;
+  integer: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Integer<T>;
+  lengthPercentage: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.LengthPercentage<T>;
+  length: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Length<T>;
+  percentage: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Percentage<T>;
+  number: <T extends number | string = number | string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Num<T>;
+  resolution: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Resolution<T>;
+  time: <T extends string | 0 = string | 0>(
+    _v: ValueWithDefault<T>,
+  ) => Types.Time<T>;
+  transformFunction: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.TransformFunction<T>;
+  transformList: <T extends string = string>(
+    _v: ValueWithDefault<T>,
+  ) => Types.TransformList<T>;
+};
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
+
+/**
+ * DO NOT USE. Legacy export for Meta
+ */
+
+type IStyleX = {
+  (
+    ...styles: ReadonlyArray<
+      StyleXArray<(null | undefined | CompiledStyles) | boolean>
+    >
+  ): string;
+  create: StyleX$Create;
+  createTheme: StyleX$CreateTheme;
+  defineVars: StyleX$DefineVars;
+  firstThatWorks: <T extends string | number>(
+    ...v: ReadonlyArray<T>
+  ) => ReadonlyArray<T>;
+  keyframes: (keyframes: Keyframes) => string;
+  positionTry: (positionTry: PositionTry) => string;
+  props: (
+    this: null | undefined | unknown,
+    ...styles: ReadonlyArray<
+      StyleXArray<
+        | (null | undefined | CompiledStyles)
+        | boolean
+        | Readonly<[CompiledStyles, InlineStyles]>
+      >
+    >
+  ) => Readonly<{
+    className?: string;
+    'data-style-src'?: string;
+    style?: Readonly<{ [$$Key$$: string]: string | number }>;
+  }>;
+  types: typeof types;
+  __customProperties?: { [$$Key$$: string]: unknown };
+};
+export declare const legacyMerge: IStyleX;