@stylexjs/stylex 0.11.1 → 0.13.0

package/README.md

@@ -26,33 +26,6 @@ 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
-
-The runtime compiler should only be used for development and testing purposes.
-
-```sh
-npm install --save-dev @stylexjs/dev-runtime
-```
-
-Import `@stylexjs/dev-runtime` in your JS entry-point to set everything up.
-
-```ts
-import inject from '@stylexjs/dev-runtime';
-
-if (process.env.NODE_ENV !== 'production') {
-  inject({
-    // configuration options
-    classNamePrefix: 'x-',
-    dev: true,
-    test: false,
-  });
-}
-```
-
-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()

package/lib/{stylex-inject.d.ts → cjs/inject.d.ts}

@@ -7,9 +7,5 @@
  *
  */
 
-declare function inject(
-  ltrRule: string,
-  priority: number,
-  rtlRule: null | undefined | string,
-): void;
+declare function inject(cssText: string, priority: number): string;
 export default inject;

package/lib/cjs/inject.js

@@ -0,0 +1,210 @@
+'use strict';
+
+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;
+}
+
+module.exports = inject;

package/lib/{stylex-inject.js.flow → cjs/inject.js.flow}

@@ -8,7 +8,6 @@
  */
 
 declare export default function inject(
-  ltrRule: string,
+  cssText: string,
   priority: number,
-  rtlRule: ?string,
-): void;
+): string;

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/{stylex.d.ts → cjs/stylex.d.ts}

@@ -16,14 +16,16 @@ import type {
   StyleX$Create,
   StyleX$CreateTheme,
   StyleX$DefineVars,
+  StyleX$DefineConsts,
   StyleXArray,
   StyleXStyles,
   StyleXStylesWithout,
   Theme,
   VarGroup,
-} from './StyleXTypes';
-import type { ValueWithDefault } from './util-types';
-import * as Types from './VarTypes';
+  PositionTry,
+} from './types/StyleXTypes';
+import type { ValueWithDefault } from './types/StyleXUtils';
+import * as Types from './types/VarTypes';
 export type {
   StaticStyles,
   StaticStylesWithout,
@@ -33,22 +35,15 @@ export type {
   Types,
   VarGroup,
 };
-export declare function attrs(
-  ...styles: ReadonlyArray<
-    StyleXArray<
-      | (null | undefined | CompiledStyles)
-      | boolean
-      | Readonly<[CompiledStyles, InlineStyles]>
-    >
-  >
-): Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
 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<
@@ -112,15 +107,6 @@ type IStyleX = {
       StyleXArray<(null | undefined | CompiledStyles) | boolean>
     >
   ): string;
-  attrs: (
-    ...styles: ReadonlyArray<
-      StyleXArray<
-        | (null | undefined | CompiledStyles)
-        | boolean
-        | Readonly<[CompiledStyles, InlineStyles]>
-      >
-    >
-  ) => Readonly<{ class?: string; 'data-style-src'?: string; style?: string }>;
   create: StyleX$Create;
   createTheme: StyleX$CreateTheme;
   defineVars: StyleX$DefineVars;
@@ -128,6 +114,7 @@ type IStyleX = {
     ...v: ReadonlyArray<T>
   ) => ReadonlyArray<T>;
   keyframes: (keyframes: Keyframes) => string;
+  positionTry: (positionTry: PositionTry) => string;
   props: (
     this: null | undefined | unknown,
     ...styles: ReadonlyArray<