@stylexjs/babel-plugin 0.15.4 → 0.16.0

package/flow_modules/@babel/traverse/index.js.flow

@@ -632,10 +632,10 @@ declare export class NodePath<+T: Node = Node> {
   getCompletionRecords(): Array<NodePath<>>;
 
   getSibling(key: string | number): NodePath<>;
-  getPrevSibling(): NodePath<>;
-  getNextSibling(): NodePath<>;
-  getAllPrevSiblings(): Array<NodePath<>>;
-  getAllNextSiblings(): Array<NodePath<>>;
+  getSiblingBefore(): NodePath<>;
+  getSiblingAfter(): NodePath<>;
+  getAllSiblingBefore(): Array<NodePath<>>;
+  getAllSiblingAfter(): Array<NodePath<>>;
 
   get<K: $Keys<T>>(
     key: K,

package/lib/index.d.ts

@@ -36,7 +36,14 @@ declare function stylexPluginWithOptions(
 export type Rule = [string, { ltr: string; rtl?: null | string }, number];
 declare function processStylexRules(
   rules: Array<Rule>,
-  useLayers: boolean,
+  config?:
+    | boolean
+    | {
+        useLayers?: boolean,
+        enableLTRRTLComments?: boolean,
+        legacyDisableLayers?: boolean,
+        ...
+      },
 ): string;
 export type StyleXTransformObj = Readonly<{
   (): PluginObj;

package/lib/index.js

@@ -807,6 +807,8 @@ class StateManager {
   stylexCreateThemeImport = new Set();
   stylexTypesImport = new Set();
   stylexViewTransitionClassImport = new Set();
+  stylexDefaultMarkerImport = new Set();
+  stylexWhenImport = new Set();
   injectImportInserted = null;
   styleMap = new Map();
   styleVars = new Map();
@@ -1176,6 +1178,12 @@ function readImportDeclarations(path, state) {
             if (importedName === 'types') {
               state.stylexTypesImport.add(localName);
             }
+            if (importedName === 'when') {
+              state.stylexWhenImport.add(localName);
+            }
+            if (importedName === 'defaultMarker') {
+              state.stylexDefaultMarkerImport.add(localName);
+            }
           }
         }
       }
@@ -1233,6 +1241,12 @@ function readRequires(path, state) {
           if (prop.key.name === 'types') {
             state.stylexTypesImport.add(value.name);
           }
+          if (prop.key.name === 'when') {
+            state.stylexWhenImport.add(value.name);
+          }
+          if (prop.key.name === 'defaultMarker') {
+            state.stylexDefaultMarkerImport.add(value.name);
+          }
         }
       }
     }
@@ -6231,9 +6245,11 @@ function styleXKeyframes(frames, options = defaultOptions) {
   const expandedObject = objMap(frames, frame => Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => objMapKeys(x, dashify)).pipe(x => objMap(x, (value, key) => transformValue(key, value, options))).done());
   const ltrStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateLTR(entry, options)));
   const rtlStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateRTL(entry, options) ?? entry));
+  const stableStyles = objMap(expandedObject, frame => objMapEntry(frame, generateLTR));
   const ltrString = constructKeyframesObj(ltrStyles);
   const rtlString = constructKeyframesObj(rtlStyles);
-  const animationName = classNamePrefix + hash('<>' + ltrString) + '-B';
+  const stableString = constructKeyframesObj(stableStyles);
+  const animationName = classNamePrefix + hash('<>' + stableString) + '-B';
   const ltr = `@keyframes ${animationName}{${ltrString}}`;
   const rtl = ltrString === rtlString ? null : `@keyframes ${animationName}{${rtlString}}`;
   return [animationName, {
@@ -6313,6 +6329,53 @@ function genFileBasedIdentifier({
   return `${fileName}//${exportName}${key != null ? `.${key}` : ''}`;
 }
 
+function getDefaultMarkerClassName(options = defaultOptions) {
+  const prefix = options.classNamePrefix != null ? `${options.classNamePrefix}-` : '';
+  return `${prefix}default-marker`;
+}
+function validatePseudoSelector(pseudo) {
+  if (!pseudo.startsWith(':')) {
+    throw new Error('Pseudo selector must start with ":"');
+  }
+  if (pseudo.startsWith('::')) {
+    throw new Error('Pseudo selector cannot start with "::" (pseudo-elements are not supported)');
+  }
+}
+function ancestor(pseudo, options = defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(.${defaultMarker}${pseudo} *)`;
+}
+function descendant(pseudo, options = defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:has(.${defaultMarker}${pseudo})`;
+}
+function siblingBefore(pseudo, options = defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(.${defaultMarker}${pseudo} ~ *)`;
+}
+function siblingAfter(pseudo, options = defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:has(~ .${defaultMarker}${pseudo})`;
+}
+function anySibling(pseudo, options = defaultOptions) {
+  validatePseudoSelector(pseudo);
+  const defaultMarker = typeof options === 'string' ? options : getDefaultMarkerClassName(options);
+  return `:where(.${defaultMarker}${pseudo} ~ *, :has(~ .${defaultMarker}${pseudo}))`;
+}
+
+var _stylexWhen = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ancestor: ancestor,
+  anySibling: anySibling,
+  descendant: descendant,
+  siblingAfter: siblingAfter,
+  siblingBefore: siblingBefore
+});
+
 const create = styleXCreateSet;
 const defineVars = styleXDefineVars;
 const defineConsts = styleXDefineConsts;
@@ -6326,6 +6389,14 @@ const utils = {
 const messages = m;
 const firstThatWorks = stylexFirstThatWorks;
 
+function stylexDefaultMarker(options = defaultOptions) {
+  const prefix = options.classNamePrefix != null ? `${options.classNamePrefix}-` : '';
+  return {
+    [`${prefix}default-marker`]: `${prefix}default-marker`,
+    $$css: true
+  };
+}
+
 function getPackagePrefix(absolutePath) {
   const nodeModulesIndex = absolutePath.indexOf('node_modules');
   if (nodeModulesIndex !== -1) {
@@ -7268,6 +7339,7 @@ function transformStyleXCreate(path, state) {
     }
     const identifiers = {};
     const memberExpressions = {};
+    const stylexWhen = Object.fromEntries(Object.entries(_stylexWhen).map(([key, value]) => [key, (pseudo, marker) => value(pseudo, marker ?? state.options)]));
     state.stylexFirstThatWorksImport.forEach(name => {
       identifiers[name] = {
         fn: firstThatWorks
@@ -7283,6 +7355,12 @@ function transformStyleXCreate(path, state) {
         fn: positionTry$1
       };
     });
+    state.stylexDefaultMarkerImport.forEach(name => {
+      identifiers[name] = () => stylexDefaultMarker(state.options);
+    });
+    state.stylexWhenImport.forEach(name => {
+      identifiers[name] = stylexWhen;
+    });
     state.stylexImport.forEach(name => {
       if (memberExpressions[name] == null) {
         memberExpressions[name] = {};
@@ -7296,6 +7374,13 @@ function transformStyleXCreate(path, state) {
       memberExpressions[name].positionTry = {
         fn: positionTry$1
       };
+      memberExpressions[name].defaultMarker = {
+        fn: () => stylexDefaultMarker(state.options)
+      };
+      identifiers[name] = {
+        ...(identifiers[name] ?? {}),
+        when: stylexWhen
+      };
     });
     const {
       confident,
@@ -8175,6 +8260,22 @@ function transformStylexProps(path, state) {
   const args = node.arguments.flatMap(arg => arg.type === 'ArrayExpression' ? arg.elements : [arg]);
   let currentIndex = -1;
   let bailOutIndex = null;
+  const identifiers = {};
+  const memberExpressions = {};
+  state.stylexDefaultMarkerImport.forEach(name => {
+    identifiers[name] = () => stylexDefaultMarker(state.options);
+  });
+  state.stylexImport.forEach(name => {
+    memberExpressions[name] = {
+      defaultMarker: {
+        fn: () => stylexDefaultMarker(state.options)
+      }
+    };
+  });
+  const evaluatePathFnConfig = {
+    identifiers,
+    memberExpressions
+  };
   const resolvedArgs = [];
   for (const arg of args) {
     currentIndex++;
@@ -8277,7 +8378,7 @@ function transformStylexProps(path, state) {
           const {
             confident,
             value: styleValue
-          } = evaluate(path, state);
+          } = evaluate(path, state, evaluatePathFnConfig);
           if (!confident || styleValue == null) {
             nonNullProps = true;
             styleNonNullProps = true;
@@ -8542,6 +8643,22 @@ function assertValidProperties(path, obj) {
   }
 }
 
+function transformStyleXDefaultMarker(path, state) {
+  const {
+    node
+  } = path;
+  if (node.type !== 'CallExpression') {
+    return;
+  }
+  if (node.callee.type === 'Identifier' && state.stylexDefaultMarkerImport.has(node.callee.name) || node.callee.type === 'MemberExpression' && node.callee.object.type === 'Identifier' && node.callee.property.type === 'Identifier' && node.callee.property.name === 'defaultMarker' && state.stylexImport.has(node.callee.object.name)) {
+    if (node.arguments.length !== 0) {
+      throw path.buildCodeFrameError(illegalArgumentLength('defaultMarker', 0), SyntaxError);
+    }
+    const value = stylexDefaultMarker(state.options);
+    path.replaceWith(convertObjectToAST(value));
+  }
+}
+
 const NAME = 'stylex';
 function styleXTransform() {
   let state;
@@ -8692,14 +8809,13 @@ function styleXTransform() {
         }
       },
       CallExpression(path) {
-        if (path.parentPath.isVariableDeclarator()) {
-          const parentPath = path.parentPath;
-          if (parentPath.isVariableDeclarator()) {
-            transformStyleXKeyframes(parentPath, state);
-            transformStyleXViewTransitionClass(parentPath, state);
-            transformStyleXPositionTry(parentPath, state);
-          }
+        const parentPath = path.parentPath;
+        if (parentPath.isVariableDeclarator()) {
+          transformStyleXKeyframes(parentPath, state);
+          transformStyleXViewTransitionClass(parentPath, state);
+          transformStyleXPositionTry(parentPath, state);
         }
+        transformStyleXDefaultMarker(path, state);
         transformStyleXDefineVars(path, state);
         transformStyleXDefineConsts(path, state);
         transformStyleXCreateTheme(path, state);
@@ -8724,7 +8840,8 @@ function isExported(path) {
 function processStylexRules(rules, config) {
   const {
     useLayers = false,
-    enableLTRRTLComments = false
+    enableLTRRTLComments = false,
+    legacyDisableLayers = false
   } = typeof config === 'boolean' ? {
     useLayers: config
   } : config ?? {};
@@ -8784,24 +8901,32 @@ function processStylexRules(rules, config) {
   });
   let lastKPri = -1;
   const grouped = sortedRules.reduce((acc, rule) => {
-    const [_key, styleObj, priority] = rule;
+    const [key, {
+      ...styleObj
+    }, priority] = rule;
     const priorityLevel = Math.floor(priority / 1000);
     Object.keys(styleObj).forEach(dir => {
       let original = styleObj[dir];
       for (const [varRef, constValue] of constsMap.entries()) {
-        if (typeof original === 'string') {
-          const replacement = String(constValue);
-          original = original.replaceAll(varRef, replacement);
-          styleObj[dir] = original;
+        if (typeof original !== 'string') continue;
+        const replacement = String(constValue);
+        original = original.replaceAll(varRef, replacement);
+        if (replacement.startsWith('var(') && replacement.endsWith(')')) {
+          const inside = replacement.slice(4, -1).trim();
+          const commaIdx = inside.indexOf(',');
+          const targetName = (commaIdx >= 0 ? inside.slice(0, commaIdx) : inside).trim();
+          const constName = varRef.slice(4, -1);
+          original = original.replaceAll(`${constName}:`, `${targetName}:`);
         }
+        styleObj[dir] = original;
       }
     });
     if (priorityLevel === lastKPri) {
-      acc[acc.length - 1].push(rule);
+      acc[acc.length - 1].push([key, styleObj, priority]);
       return acc;
     }
     lastKPri = priorityLevel;
-    acc.push([rule]);
+    acc.push([[key, styleObj, priority]]);
     return acc;
   }, []);
   const header = useLayers ? '\n@layer ' + grouped.map((_, index) => `priority${index + 1}`).join(', ') + ';\n' : '';
@@ -8814,7 +8939,7 @@ function processStylexRules(rules, config) {
       } = rule;
       let ltrRule = ltr,
         rtlRule = rtl;
-      if (!useLayers) {
+      if (!useLayers && !legacyDisableLayers) {
         ltrRule = addSpecificityLevel(ltrRule, index);
         rtlRule = rtlRule && addSpecificityLevel(rtlRule, index);
       }

package/lib/index.js.flow

@@ -52,6 +52,7 @@ declare function processStylexRules(
     | {
         useLayers?: boolean,
         enableLTRRTLComments?: boolean,
+        legacyDisableLayers?: boolean,
         ...
       },
 ): string;

package/lib/shared/index.d.ts

@@ -30,12 +30,13 @@ import stylexFirstThatWorks from './stylex-first-that-works';
 import hash from './hash';
 import genFileBasedIdentifier from './utils/file-based-identifier';
 import * as m from './messages';
-export * as types from './types';
 import {
   PSEUDO_CLASS_PRIORITIES as _PSEUDO_CLASS_PRIORITIES,
   AT_RULE_PRIORITIES as _AT_RULE_PRIORITIES,
   PSEUDO_ELEMENT_PRIORITY as _PSEUDO_ELEMENT_PRIORITY,
 } from './utils/property-priorities';
+export * as types from './types';
+export * as when from './when/when';
 export declare const create: typeof styleXCreateSet;
 export declare const defineVars: typeof styleXDefineVars;
 export declare const defineConsts: typeof styleXDefineConsts;

package/lib/shared/index.js.flow

@@ -37,13 +37,15 @@ import stylexFirstThatWorks from './stylex-first-that-works';
 import hash from './hash';
 import genFileBasedIdentifier from './utils/file-based-identifier';
 import * as m from './messages';
-export * as types from './types';
 import {
   PSEUDO_CLASS_PRIORITIES as _PSEUDO_CLASS_PRIORITIES,
   AT_RULE_PRIORITIES as _AT_RULE_PRIORITIES,
   PSEUDO_ELEMENT_PRIORITY as _PSEUDO_ELEMENT_PRIORITY,
 } from './utils/property-priorities';
 
+export * as types from './types';
+export * as when from './when/when';
+
 declare export const create: typeof styleXCreateSet;
 declare export const defineVars: typeof styleXDefineVars;
 declare export const defineConsts: typeof styleXDefineConsts;

package/lib/shared/stylex-defaultMarker.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { StyleXOptions } from './common-types';
+declare function stylexDefaultMarker(options?: StyleXOptions): {
+  [$$Key$$: string]: string | true;
+};
+export default stylexDefaultMarker;

package/lib/shared/stylex-defaultMarker.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
+ */
+
+import type { StyleXOptions } from './common-types';
+declare export default function stylexDefaultMarker(options?: StyleXOptions): {
+  [string]: string | true,
+};

package/lib/shared/when/when.d.ts

@@ -0,0 +1,66 @@
+/**
+ * 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 { StyleXOptions } from '../common-types';
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on an ancestor with the "defaultMarker"
+ *
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the ancestor observer
+ */
+export declare function ancestor(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a descendant with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the descendant observer
+ */
+export declare function descendant(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a previous sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the previous sibling observer
+ */
+export declare function siblingBefore(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a next sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the next sibling observer
+ */
+export declare function siblingAfter(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on any sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the any sibling observer
+ */
+export declare function anySibling(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;

package/lib/shared/when/when.js.flow

@@ -0,0 +1,71 @@
+/**
+ * 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 { StyleXOptions } from '../common-types';
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on an ancestor with the "defaultMarker"
+ *
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the ancestor observer
+ */
+declare export function ancestor(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a descendant with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the descendant observer
+ */
+declare export function descendant(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a previous sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the previous sibling observer
+ */
+declare export function siblingBefore(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on a next sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :has() clause for the next sibling observer
+ */
+declare export function siblingAfter(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;
+
+/**
+ * Creates selector that observes if the given pseudo-class is
+ * active on any sibling with the "defaultMarker"
+ *
+ * @param pseudo - The pseudo selector (e.g., ':hover', ':focus')
+ * @returns A :where() clause for the any sibling observer
+ */
+declare export function anySibling(
+  pseudo: string,
+  options: string | StyleXOptions,
+): string;

package/lib/utils/state-manager.d.ts

@@ -123,6 +123,8 @@ declare class StateManager {
   readonly stylexCreateThemeImport: Set<string>;
   readonly stylexTypesImport: Set<string>;
   readonly stylexViewTransitionClassImport: Set<string>;
+  readonly stylexDefaultMarkerImport: Set<string>;
+  readonly stylexWhenImport: Set<string>;
   injectImportInserted: null | undefined | t.Identifier;
   readonly styleMap: Map<string, CompiledNamespaces>;
   readonly styleVars: Map<string, NodePath>;

package/lib/utils/state-manager.js.flow

@@ -80,6 +80,8 @@ declare export default class StateManager {
   +stylexCreateThemeImport: Set<string>;
   +stylexTypesImport: Set<string>;
   +stylexViewTransitionClassImport: Set<string>;
+  +stylexDefaultMarkerImport: Set<string>;
+  +stylexWhenImport: Set<string>;
   injectImportInserted: ?t.Identifier;
   +styleMap: Map<string, CompiledNamespaces>;
   +styleVars: Map<string, NodePath<>>;

package/lib/visitors/stylex-default-marker.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+/**
+ * Transforms calls to `stylex.defaultMarker()` (or imported `defaultMarker()`)
+ * into a string literal: "stylex-marker".
+ */
+declare function transformStyleXDefaultMarker(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+export default transformStyleXDefaultMarker;

package/lib/visitors/stylex-default-marker.js.flow

@@ -0,0 +1,21 @@
+/**
+ * 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 { NodePath } from '../../flow_modules/@babel/traverse';
+
+import * as t from '../../flow_modules/@babel/types';
+import StateManager from '../utils/state-manager';
+/**
+ * Transforms calls to `stylex.defaultMarker()` (or imported `defaultMarker()`)
+ * into a string literal: "stylex-marker".
+ */
+declare export default function transformStyleXDefaultMarker(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-props.js.flow

@@ -8,7 +8,6 @@
  */
 
 import type { NodePath } from '../../flow_modules/@babel/traverse';
-
 import * as t from '../../flow_modules/@babel/types';
 import StateManager from '../utils/state-manager';
 declare export function skipStylexPropsChildren(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.15.4",
+  "version": "0.16.0",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": {
@@ -21,7 +21,7 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/stylex": "0.15.4",
+    "@stylexjs/stylex": "0.16.0",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
@@ -33,7 +33,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "babel-plugin-syntax-hermes-parser": "^0.26.0",
     "rollup": "^4.24.0",
-    "scripts": "0.15.4"
+    "scripts": "0.16.0"
   },
   "files": [
     "flow_modules/*",