@stylexjs/stylex 0.11.1 → 0.13.0

package/lib/{VarTypes.d.ts → cjs/types/VarTypes.d.ts}

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

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;