@stylexjs/babel-plugin 0.17.5 → 0.18.1

package/lib/index.browser.js

@@ -1484,6 +1484,12 @@ const checkRuntimeInjection = unionOf3(boolean(), string(), object({
   from: string(),
   as: string()
 }));
+const checkEnvOption = (value, name = 'options.env') => {
+  if (typeof value !== 'object' || value == null || Array.isArray(value)) {
+    return new Error(`Expected (${name}) to be an object, but got \`${String(JSON.stringify(value))}\`.`);
+  }
+  return value;
+};
 const DEFAULT_INJECT_PATH = '@stylexjs/stylex/lib/stylex-inject';
 class StateManager {
   importPaths = new Set();
@@ -1503,6 +1509,7 @@ class StateManager {
   stylexViewTransitionClassImport = new Set();
   stylexDefaultMarkerImport = new Set();
   stylexWhenImport = new Set();
+  stylexEnvImport = new Set();
   injectImportInserted = null;
   styleMap = new Map();
   styleVars = new Map();
@@ -1526,6 +1533,7 @@ class StateManager {
     const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? defaultOptions.enableLegacyValueFlipping, false, 'options.enableLegacyValueFlipping');
     const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? defaultOptions.enableLogicalStylesPolyfill, false, 'options.enableLogicalStylesPolyfill');
     const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? defaultOptions.enableLTRRTLComments, false, 'options.enableLTRRTLComments');
+    const sxPropName = logAndDefault(unionOf(string(), literal(false)), options.sxPropName ?? 'sx', 'sx', 'options.sxPropName');
     const test = logAndDefault(boolean(), options.test ?? defaultOptions.test, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -1536,6 +1544,10 @@ class StateManager {
     const propertyValidationMode = logAndDefault(unionOf3(literal('throw'), literal('warn'), literal('silent')), options.propertyValidationMode ?? defaultOptions.propertyValidationMode, 'silent', 'options.propertyValidationMode');
     const unstable_moduleResolution = logAndDefault(unionOf(nullish(), CheckModuleResolution), options.unstable_moduleResolution, null, 'options.unstable_moduleResolution');
     const treeshakeCompensation = logAndDefault(boolean(), options.treeshakeCompensation ?? defaultOptions.treeshakeCompensation, false, 'options.treeshakeCompensation');
+    const envInput = logAndDefault(checkEnvOption, options.env ?? {}, {}, 'options.env');
+    const env = Object.freeze({
+      ...envInput
+    });
     const aliasesOption = logAndDefault(unionOf(nullish(), objectOf(unionOf(string(), array(string())))), options.aliases, null, 'options.aliases');
     const aliases = aliasesOption == null ? aliasesOption : Object.fromEntries(Object.entries(aliasesOption).map(([key, value]) => {
       if (typeof value === 'string') {
@@ -1551,6 +1563,7 @@ class StateManager {
       definedStylexCSSVariables: {},
       dev,
       propertyValidationMode,
+      env,
       enableDebugClassNames,
       enableDebugDataProp,
       enableDevClassNames,
@@ -1561,6 +1574,7 @@ class StateManager {
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       enableLTRRTLComments,
+      sxPropName,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -1592,6 +1606,31 @@ class StateManager {
     }
     return null;
   }
+  applyStylexEnv(identifiers) {
+    const env = this.options.env;
+    this.stylexImport.forEach(importName => {
+      const current = identifiers[importName];
+      if (current != null && typeof current === 'object' && !Array.isArray(current)) {
+        if ('fn' in current) {
+          identifiers[importName] = {
+            env
+          };
+        } else {
+          identifiers[importName] = {
+            ...current,
+            env
+          };
+        }
+        return;
+      }
+      identifiers[importName] = {
+        env
+      };
+    });
+    this.stylexEnvImport.forEach(importName => {
+      identifiers[importName] = env;
+    });
+  }
   get canReferenceTheme() {
     return !!this.inStyleXCreate;
   }
@@ -1910,6 +1949,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'defaultMarker') {
               state.stylexDefaultMarkerImport.add(localName);
             }
+            if (importedName === 'env') {
+              state.stylexEnvImport.add(localName);
+            }
           }
         }
       }
@@ -1976,6 +2018,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'defaultMarker') {
             state.stylexDefaultMarkerImport.add(value.name);
           }
+          if (prop.key.name === 'env') {
+            state.stylexEnvImport.add(value.name);
+          }
         }
       }
     }
@@ -4574,7 +4619,6 @@ const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one leve
 const ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
 const ILLEGAL_PROP_ARRAY_VALUE = 'A style array value can only contain strings or numbers.';
 const ILLEGAL_NAMESPACE_VALUE = 'A StyleX namespace must be an object.';
-const INVALID_CONST_KEY = 'Keys in defineConsts() cannot start with "--".';
 const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
 const INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.';
 const INVALID_MEDIA_QUERY_SYNTAX = 'Invalid media query syntax.';
@@ -4597,7 +4641,6 @@ var m = /*#__PURE__*/Object.freeze({
   ILLEGAL_NESTED_PSEUDO: ILLEGAL_NESTED_PSEUDO,
   ILLEGAL_PROP_ARRAY_VALUE: ILLEGAL_PROP_ARRAY_VALUE,
   ILLEGAL_PROP_VALUE: ILLEGAL_PROP_VALUE,
-  INVALID_CONST_KEY: INVALID_CONST_KEY,
   INVALID_MEDIA_QUERY_SYNTAX: INVALID_MEDIA_QUERY_SYNTAX,
   INVALID_PSEUDO: INVALID_PSEUDO,
   INVALID_PSEUDO_OR_AT_RULE: INVALID_PSEUDO_OR_AT_RULE,
@@ -5598,6 +5641,16 @@ function requirePropertyPriorities () {
 	  SIBLING_AFTER: /^:where\(:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/,
 	  ANY_SIBLING: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*,\s+:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/
 	};
+	const PSEUDO_PART_REGEX = /::[a-zA-Z-]+|:[a-zA-Z-]+(?:\([^)]*\))?/g;
+	function getCompoundPseudoPriority(key) {
+	  const parts = key.match(PSEUDO_PART_REGEX);
+	  if (!parts || parts.length <= 1 || parts.some(p => p.includes('('))) return;
+	  let total = 0;
+	  for (const part of parts) {
+	    total += part.startsWith('::') ? PSEUDO_ELEMENT_PRIORITY : PSEUDO_CLASS_PRIORITIES[part] ?? 40;
+	  }
+	  return total;
+	}
 	function getAtRulePriority(key) {
 	  if (key.startsWith('--')) {
 	    return 1;
@@ -5638,7 +5691,7 @@ function requirePropertyPriorities () {
 	    return 40 + pseudoBase(siblingAfterMatch[1]);
 	  }
 	  if (key.startsWith(':')) {
-	    const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
+	    const prop = key.split('(')[0];
 	    return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
 	  }
 	}
@@ -5659,6 +5712,8 @@ function requirePropertyPriorities () {
 	function getPriority(key) {
 	  const atRulePriority = getAtRulePriority(key);
 	  if (atRulePriority) return atRulePriority;
+	  const compoundPriority = getCompoundPseudoPriority(key);
+	  if (compoundPriority != null) return compoundPriority;
 	  const pseudoElementPriority = getPseudoElementPriority(key);
 	  if (pseudoElementPriority) return pseudoElementPriority;
 	  const pseudoClassPriority = getPseudoClassPriority(key);
@@ -5869,7 +5924,7 @@ class PreRule {
     this.value = value;
   }
   get pseudos() {
-    const unsortedPseudos = this.keyPath.filter(key => key.startsWith(':'));
+    const unsortedPseudos = this.keyPath.filter(key => key.startsWith(':') || key.startsWith('['));
     return sortPseudos(unsortedPseudos);
   }
   get atRules() {
@@ -5974,7 +6029,7 @@ function _flattenRawStyleObject(style, keyPath, options) {
       });
       continue;
     }
-    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@')) {
+    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@') && !key.startsWith('[')) {
       const equivalentPairs = {};
       for (const condition in value) {
         const innerValue = value[condition];
@@ -6000,7 +6055,7 @@ function _flattenRawStyleObject(style, keyPath, options) {
         flattened.push([property, PreRuleSet.create(rules)]);
       }
     }
-    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@'))) {
+    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@') || key.startsWith('['))) {
       const pairs = _flattenRawStyleObject(value, [...keyPath, _key], options);
       for (const [property, preRule] of pairs) {
         flattened.push([key + '_' + property, preRule]);
@@ -6030,7 +6085,7 @@ function validateNamespace(namespace, conditions = []) {
       continue;
     }
     if (isPlainObject(val)) {
-      if (key.startsWith('@') || key.startsWith(':')) {
+      if (key.startsWith('@') || key.startsWith(':') || key.startsWith('[')) {
         if (conditions.includes(key)) {
           throw new Error(DUPLICATE_CONDITIONAL);
         }
@@ -6046,7 +6101,7 @@ function validateNamespace(namespace, conditions = []) {
 function validateConditionalStyles(val, conditions = []) {
   for (const key in val) {
     const v = val[key];
-    if (!(key.startsWith('@') || key.startsWith(':') || key.startsWith('var(--') || key === 'default')) {
+    if (!(key.startsWith('@') || key.startsWith(':') || key.startsWith('[') || key.startsWith('var(--') || key === 'default')) {
       throw new Error(INVALID_PSEUDO_OR_AT_RULE);
     }
     if (conditions.includes(key)) {
@@ -6432,11 +6487,8 @@ function styleXDefineConsts(constants, options) {
   const jsOutput = {};
   const injectableStyles = {};
   for (const [key, value] of Object.entries(constants)) {
-    if (key.startsWith('--')) {
-      throw new Error(INVALID_CONST_KEY);
-    }
     const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
-    const constKey = debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${hash(`${exportId}.${key}`)}` : `${classNamePrefix}${hash(`${exportId}.${key}`)}`;
+    const constKey = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${hash(`${exportId}.${key}`)}` : `${classNamePrefix}${hash(`${exportId}.${key}`)}`;
     jsOutput[key] = value;
     injectableStyles[constKey] = {
       constKey,
@@ -6608,12 +6660,15 @@ function getDefaultMarkerClassName(options = defaultOptions) {
   return `${prefix}default-marker`;
 }
 function validatePseudoSelector(pseudo) {
-  if (!pseudo.startsWith(':')) {
-    throw new Error('Pseudo selector must start with ":"');
+  if (!(pseudo.startsWith(':') || pseudo.startsWith('['))) {
+    throw new Error('Pseudo selector must start with ":" or "["');
   }
   if (pseudo.startsWith('::')) {
     throw new Error('Pseudo selector cannot start with "::" (pseudo-elements are not supported)');
   }
+  if (pseudo.startsWith('[') && !pseudo.endsWith(']')) {
+    throw new Error('Attribute selector must end with "]"');
+  }
 }
 function ancestor(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
@@ -7651,6 +7706,18 @@ function isSafeToSkipNullCheck(expr) {
   }
   return false;
 }
+function hasExplicitNullishFallback(expr) {
+  if (isNullLiteral(expr)) return true;
+  if (isIdentifier(expr) && expr.name === 'undefined') return true;
+  if (isUnaryExpression(expr) && expr.operator === 'void') return true;
+  if (isConditionalExpression(expr)) {
+    return hasExplicitNullishFallback(expr.consequent) || hasExplicitNullishFallback(expr.alternate);
+  }
+  if (isLogicalExpression(expr)) {
+    return hasExplicitNullishFallback(expr.left) || hasExplicitNullishFallback(expr.right);
+  }
+  return false;
+}
 function transformStyleXCreate(path, state) {
   const {
     node
@@ -7719,6 +7786,7 @@ function transformStyleXCreate(path, state) {
         when: stylexWhen
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value,
@@ -7746,7 +7814,7 @@ function transformStyleXCreate(path, state) {
         const isPseudoElement = path.some(p => p.startsWith('::'));
         injectedInheritStyles[variableName] = {
           priority: 0,
-          ltr: `@property ${variableName} { syntax: "*";${isPseudoElement ? '' : ' inherits: false;'}}`,
+          ltr: `@property ${variableName} { syntax: "*"; inherits: ${isPseudoElement ? 'true' : 'false'};}`,
           rtl: null
         };
       });
@@ -7795,14 +7863,21 @@ function transformStyleXCreate(path, state) {
             for (const [className, classPaths] of Object.entries(classPathsPerNamespace[key])) {
               origClassPaths[className] = classPaths.join('_');
             }
-            let dynamicStyles = Object.entries(inlineStyles).map(([_key, v]) => ({
+            let dynamicStyles = Object.entries(inlineStyles).map(([varName, v]) => ({
               expression: v.originalExpression,
               key: v.path.slice(0, v.path.findIndex(p => !p.startsWith(':') && !p.startsWith('@')) + 1).join('_'),
+              varName,
               path: v.path.join('_')
             }));
             if (state.options.styleResolution === 'legacy-expand-shorthands') {
               dynamicStyles = legacyExpandShorthands(dynamicStyles);
             }
+            const nullishVarExpressions = new Map();
+            dynamicStyles.forEach(style => {
+              if (hasExplicitNullishFallback(style.expression)) {
+                nullishVarExpressions.set(style.varName, style.expression);
+              }
+            });
             if (isObjectExpression(prop.value)) {
               const value = prop.value;
               let cssTagValue = booleanLiteral(true);
@@ -7826,9 +7901,23 @@ function transformStyleXCreate(path, state) {
                 let isStatic = true;
                 const exprList = [];
                 classList.forEach((cls, index) => {
-                  const expr = dynamicStyles.find(({
+                  let expr = dynamicStyles.find(({
                     path
                   }) => origClassPaths[cls] === path)?.expression;
+                  if (expr == null && nullishVarExpressions.size > 0) {
+                    const injectedStyle = injectedStyles[cls];
+                    const rule = injectedStyle != null ? typeof injectedStyle.ltr === 'string' ? injectedStyle.ltr : typeof injectedStyle.rtl === 'string' ? injectedStyle.rtl : null : null;
+                    if (rule != null) {
+                      const matches = rule.matchAll(/var\((--x-[^,)]+)[^)]*\)/g);
+                      for (const match of matches) {
+                        const varExpr = nullishVarExpressions.get(match[1]);
+                        if (varExpr != null) {
+                          expr = varExpr;
+                          break;
+                        }
+                      }
+                    }
+                  }
                   const isLast = index === classList.length - 1;
                   const clsWithSpace = isLast ? cls : cls + ' ';
                   if (expr && !isSafeToSkipNullCheck(expr)) {
@@ -7989,6 +8078,7 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
         types: stylexTypes
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident: confident2,
       value: overrides
@@ -8103,6 +8193,7 @@ function transformStyleXDefineVars(callExpressionPath, state) {
         types: stylexTypes
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -8165,10 +8256,16 @@ function transformStyleXDefineConsts(callExpressionPath, state) {
     const varId = variableDeclaratorNode.id;
     const args = callExpressionPath.get('arguments');
     const firstArg = args[0];
+    const evaluatePathFnConfig = {
+      identifiers: {},
+      memberExpressions: {},
+      disableImports: true
+    };
+    state.applyStylexEnv(evaluatePathFnConfig.identifiers);
     const {
       confident,
       value
-    } = evaluate(firstArg, state);
+    } = evaluate(firstArg, state, evaluatePathFnConfig);
     if (!confident) {
       throw callExpressionPath.buildCodeFrameError(messages.nonStaticValue('defineConsts'), SyntaxError);
     }
@@ -8250,6 +8347,7 @@ function transformStyleXKeyframes(path, state) {
         fn: firstThatWorks
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -8321,6 +8419,7 @@ function transformStyleXPositionTry(path, state) {
         fn: firstThatWorks
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -8375,6 +8474,12 @@ function transformStyleXMerge(path, state) {
   if (node == null || node.callee.type !== 'Identifier' || !state.stylexImport.has(node.callee.name)) {
     return;
   }
+  const evaluatePathFnConfig = {
+    identifiers: {},
+    memberExpressions: {},
+    disableImports: true
+  };
+  state.applyStylexEnv(evaluatePathFnConfig.identifiers);
   let bailOut = false;
   let conditional = 0;
   let currentIndex = -1;
@@ -8481,7 +8586,7 @@ function transformStyleXMerge(path, state) {
           const {
             confident,
             value: styleValue
-          } = evaluate(path, state);
+          } = evaluate(path, state, evaluatePathFnConfig);
           if (!confident || styleValue == null) {
             nonNullProps = true;
             styleNonNullProps = true;
@@ -8617,6 +8722,7 @@ function transformStylexProps(path, state) {
       }
     };
   });
+  state.applyStylexEnv(identifiers);
   const evaluatePathFnConfig = {
     identifiers,
     memberExpressions,
@@ -8942,6 +9048,7 @@ function transformStyleXViewTransitionClass(path, state) {
         fn: keyframes$1
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -9203,6 +9310,31 @@ function styleXTransform() {
           });
         }
       },
+      JSXOpeningElement(path) {
+        const sxPropName = state.options.sxPropName;
+        if (sxPropName === false) {
+          return;
+        }
+        const node = path.node;
+        if (node.name.type !== 'JSXIdentifier' || typeof node.name.name !== 'string' || node.name.name[0] !== node.name.name[0].toLowerCase()) {
+          return;
+        }
+        for (const attr of path.get('attributes')) {
+          if (!attr.isJSXAttribute() || !attr.get('name').isJSXIdentifier() || attr.get('name').node.name !== sxPropName) {
+            continue;
+          }
+          const valuePath = attr.get('value');
+          if (!valuePath.isJSXExpressionContainer()) {
+            continue;
+          }
+          const value = valuePath.get('expression');
+          if (value.isJSXEmptyExpression()) {
+            continue;
+          }
+          attr.replaceWith(undefined(callExpression(memberExpression(identifier('stylex'), identifier('props')), [value.node])));
+          break;
+        }
+      },
       CallExpression(path) {
         const parentPath = path.parentPath;
         if (parentPath.isVariableDeclarator()) {

package/lib/index.js

@@ -370,6 +370,12 @@ const checkRuntimeInjection = unionOf3(boolean(), string(), object({
   from: string(),
   as: string()
 }));
+const checkEnvOption = (value, name = 'options.env') => {
+  if (typeof value !== 'object' || value == null || Array.isArray(value)) {
+    return new Error(`Expected (${name}) to be an object, but got \`${String(JSON.stringify(value))}\`.`);
+  }
+  return value;
+};
 const DEFAULT_INJECT_PATH = '@stylexjs/stylex/lib/stylex-inject';
 class StateManager {
   importPaths = new Set();
@@ -389,6 +395,7 @@ class StateManager {
   stylexViewTransitionClassImport = new Set();
   stylexDefaultMarkerImport = new Set();
   stylexWhenImport = new Set();
+  stylexEnvImport = new Set();
   injectImportInserted = null;
   styleMap = new Map();
   styleVars = new Map();
@@ -412,6 +419,7 @@ class StateManager {
     const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? defaultOptions.enableLegacyValueFlipping, false, 'options.enableLegacyValueFlipping');
     const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? defaultOptions.enableLogicalStylesPolyfill, false, 'options.enableLogicalStylesPolyfill');
     const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? defaultOptions.enableLTRRTLComments, false, 'options.enableLTRRTLComments');
+    const sxPropName = logAndDefault(unionOf(string(), literal(false)), options.sxPropName ?? 'sx', 'sx', 'options.sxPropName');
     const test = logAndDefault(boolean(), options.test ?? defaultOptions.test, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -422,6 +430,10 @@ class StateManager {
     const propertyValidationMode = logAndDefault(unionOf3(literal('throw'), literal('warn'), literal('silent')), options.propertyValidationMode ?? defaultOptions.propertyValidationMode, 'silent', 'options.propertyValidationMode');
     const unstable_moduleResolution = logAndDefault(unionOf(nullish(), CheckModuleResolution), options.unstable_moduleResolution, null, 'options.unstable_moduleResolution');
     const treeshakeCompensation = logAndDefault(boolean(), options.treeshakeCompensation ?? defaultOptions.treeshakeCompensation, false, 'options.treeshakeCompensation');
+    const envInput = logAndDefault(checkEnvOption, options.env ?? {}, {}, 'options.env');
+    const env = Object.freeze({
+      ...envInput
+    });
     const aliasesOption = logAndDefault(unionOf(nullish(), objectOf(unionOf(string(), array(string())))), options.aliases, null, 'options.aliases');
     const aliases = aliasesOption == null ? aliasesOption : Object.fromEntries(Object.entries(aliasesOption).map(([key, value]) => {
       if (typeof value === 'string') {
@@ -437,6 +449,7 @@ class StateManager {
       definedStylexCSSVariables: {},
       dev,
       propertyValidationMode,
+      env,
       enableDebugClassNames,
       enableDebugDataProp,
       enableDevClassNames,
@@ -447,6 +460,7 @@ class StateManager {
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       enableLTRRTLComments,
+      sxPropName,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -478,6 +492,31 @@ class StateManager {
     }
     return null;
   }
+  applyStylexEnv(identifiers) {
+    const env = this.options.env;
+    this.stylexImport.forEach(importName => {
+      const current = identifiers[importName];
+      if (current != null && typeof current === 'object' && !Array.isArray(current)) {
+        if ('fn' in current) {
+          identifiers[importName] = {
+            env
+          };
+        } else {
+          identifiers[importName] = {
+            ...current,
+            env
+          };
+        }
+        return;
+      }
+      identifiers[importName] = {
+        env
+      };
+    });
+    this.stylexEnvImport.forEach(importName => {
+      identifiers[importName] = env;
+    });
+  }
   get canReferenceTheme() {
     return !!this.inStyleXCreate;
   }
@@ -796,6 +835,9 @@ function readImportDeclarations(path, state) {
             if (importedName === 'defaultMarker') {
               state.stylexDefaultMarkerImport.add(localName);
             }
+            if (importedName === 'env') {
+              state.stylexEnvImport.add(localName);
+            }
           }
         }
       }
@@ -862,6 +904,9 @@ function readRequires(path, state) {
           if (prop.key.name === 'defaultMarker') {
             state.stylexDefaultMarkerImport.add(value.name);
           }
+          if (prop.key.name === 'env') {
+            state.stylexEnvImport.add(value.name);
+          }
         }
       }
     }
@@ -3460,7 +3505,6 @@ const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one leve
 const ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
 const ILLEGAL_PROP_ARRAY_VALUE = 'A style array value can only contain strings or numbers.';
 const ILLEGAL_NAMESPACE_VALUE = 'A StyleX namespace must be an object.';
-const INVALID_CONST_KEY = 'Keys in defineConsts() cannot start with "--".';
 const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
 const INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.';
 const INVALID_MEDIA_QUERY_SYNTAX = 'Invalid media query syntax.';
@@ -3483,7 +3527,6 @@ var m = /*#__PURE__*/Object.freeze({
   ILLEGAL_NESTED_PSEUDO: ILLEGAL_NESTED_PSEUDO,
   ILLEGAL_PROP_ARRAY_VALUE: ILLEGAL_PROP_ARRAY_VALUE,
   ILLEGAL_PROP_VALUE: ILLEGAL_PROP_VALUE,
-  INVALID_CONST_KEY: INVALID_CONST_KEY,
   INVALID_MEDIA_QUERY_SYNTAX: INVALID_MEDIA_QUERY_SYNTAX,
   INVALID_PSEUDO: INVALID_PSEUDO,
   INVALID_PSEUDO_OR_AT_RULE: INVALID_PSEUDO_OR_AT_RULE,
@@ -4484,6 +4527,16 @@ function requirePropertyPriorities () {
 	  SIBLING_AFTER: /^:where\(:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/,
 	  ANY_SIBLING: /^:where\(\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\s+~\s+\*,\s+:has\(~\s\.[0-9a-zA-Z_-]+(:[a-zA-Z-]+)\)\)$/
 	};
+	const PSEUDO_PART_REGEX = /::[a-zA-Z-]+|:[a-zA-Z-]+(?:\([^)]*\))?/g;
+	function getCompoundPseudoPriority(key) {
+	  const parts = key.match(PSEUDO_PART_REGEX);
+	  if (!parts || parts.length <= 1 || parts.some(p => p.includes('('))) return;
+	  let total = 0;
+	  for (const part of parts) {
+	    total += part.startsWith('::') ? PSEUDO_ELEMENT_PRIORITY : PSEUDO_CLASS_PRIORITIES[part] ?? 40;
+	  }
+	  return total;
+	}
 	function getAtRulePriority(key) {
 	  if (key.startsWith('--')) {
 	    return 1;
@@ -4524,7 +4577,7 @@ function requirePropertyPriorities () {
 	    return 40 + pseudoBase(siblingAfterMatch[1]);
 	  }
 	  if (key.startsWith(':')) {
-	    const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
+	    const prop = key.split('(')[0];
 	    return PSEUDO_CLASS_PRIORITIES[prop] ?? 40;
 	  }
 	}
@@ -4545,6 +4598,8 @@ function requirePropertyPriorities () {
 	function getPriority(key) {
 	  const atRulePriority = getAtRulePriority(key);
 	  if (atRulePriority) return atRulePriority;
+	  const compoundPriority = getCompoundPseudoPriority(key);
+	  if (compoundPriority != null) return compoundPriority;
 	  const pseudoElementPriority = getPseudoElementPriority(key);
 	  if (pseudoElementPriority) return pseudoElementPriority;
 	  const pseudoClassPriority = getPseudoClassPriority(key);
@@ -4755,7 +4810,7 @@ class PreRule {
     this.value = value;
   }
   get pseudos() {
-    const unsortedPseudos = this.keyPath.filter(key => key.startsWith(':'));
+    const unsortedPseudos = this.keyPath.filter(key => key.startsWith(':') || key.startsWith('['));
     return sortPseudos(unsortedPseudos);
   }
   get atRules() {
@@ -4860,7 +4915,7 @@ function _flattenRawStyleObject(style, keyPath, options) {
       });
       continue;
     }
-    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@')) {
+    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@') && !key.startsWith('[')) {
       const equivalentPairs = {};
       for (const condition in value) {
         const innerValue = value[condition];
@@ -4886,7 +4941,7 @@ function _flattenRawStyleObject(style, keyPath, options) {
         flattened.push([property, PreRuleSet.create(rules)]);
       }
     }
-    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@'))) {
+    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@') || key.startsWith('['))) {
       const pairs = _flattenRawStyleObject(value, [...keyPath, _key], options);
       for (const [property, preRule] of pairs) {
         flattened.push([key + '_' + property, preRule]);
@@ -4916,7 +4971,7 @@ function validateNamespace(namespace, conditions = []) {
       continue;
     }
     if (isPlainObject(val)) {
-      if (key.startsWith('@') || key.startsWith(':')) {
+      if (key.startsWith('@') || key.startsWith(':') || key.startsWith('[')) {
         if (conditions.includes(key)) {
           throw new Error(DUPLICATE_CONDITIONAL);
         }
@@ -4932,7 +4987,7 @@ function validateNamespace(namespace, conditions = []) {
 function validateConditionalStyles(val, conditions = []) {
   for (const key in val) {
     const v = val[key];
-    if (!(key.startsWith('@') || key.startsWith(':') || key.startsWith('var(--') || key === 'default')) {
+    if (!(key.startsWith('@') || key.startsWith(':') || key.startsWith('[') || key.startsWith('var(--') || key === 'default')) {
       throw new Error(INVALID_PSEUDO_OR_AT_RULE);
     }
     if (conditions.includes(key)) {
@@ -5318,11 +5373,8 @@ function styleXDefineConsts(constants, options) {
   const jsOutput = {};
   const injectableStyles = {};
   for (const [key, value] of Object.entries(constants)) {
-    if (key.startsWith('--')) {
-      throw new Error(INVALID_CONST_KEY);
-    }
     const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
-    const constKey = debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${hash(`${exportId}.${key}`)}` : `${classNamePrefix}${hash(`${exportId}.${key}`)}`;
+    const constKey = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${hash(`${exportId}.${key}`)}` : `${classNamePrefix}${hash(`${exportId}.${key}`)}`;
     jsOutput[key] = value;
     injectableStyles[constKey] = {
       constKey,
@@ -5494,12 +5546,15 @@ function getDefaultMarkerClassName(options = defaultOptions) {
   return `${prefix}default-marker`;
 }
 function validatePseudoSelector(pseudo) {
-  if (!pseudo.startsWith(':')) {
-    throw new Error('Pseudo selector must start with ":"');
+  if (!(pseudo.startsWith(':') || pseudo.startsWith('['))) {
+    throw new Error('Pseudo selector must start with ":" or "["');
   }
   if (pseudo.startsWith('::')) {
     throw new Error('Pseudo selector cannot start with "::" (pseudo-elements are not supported)');
   }
+  if (pseudo.startsWith('[') && !pseudo.endsWith(']')) {
+    throw new Error('Attribute selector must end with "]"');
+  }
 }
 function ancestor(pseudo, options = defaultOptions) {
   validatePseudoSelector(pseudo);
@@ -6533,6 +6588,18 @@ function isSafeToSkipNullCheck(expr) {
   }
   return false;
 }
+function hasExplicitNullishFallback(expr) {
+  if (t__namespace.isNullLiteral(expr)) return true;
+  if (t__namespace.isIdentifier(expr) && expr.name === 'undefined') return true;
+  if (t__namespace.isUnaryExpression(expr) && expr.operator === 'void') return true;
+  if (t__namespace.isConditionalExpression(expr)) {
+    return hasExplicitNullishFallback(expr.consequent) || hasExplicitNullishFallback(expr.alternate);
+  }
+  if (t__namespace.isLogicalExpression(expr)) {
+    return hasExplicitNullishFallback(expr.left) || hasExplicitNullishFallback(expr.right);
+  }
+  return false;
+}
 function transformStyleXCreate(path, state) {
   const {
     node
@@ -6601,6 +6668,7 @@ function transformStyleXCreate(path, state) {
         when: stylexWhen
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value,
@@ -6628,7 +6696,7 @@ function transformStyleXCreate(path, state) {
         const isPseudoElement = path.some(p => p.startsWith('::'));
         injectedInheritStyles[variableName] = {
           priority: 0,
-          ltr: `@property ${variableName} { syntax: "*";${isPseudoElement ? '' : ' inherits: false;'}}`,
+          ltr: `@property ${variableName} { syntax: "*"; inherits: ${isPseudoElement ? 'true' : 'false'};}`,
           rtl: null
         };
       });
@@ -6677,14 +6745,21 @@ function transformStyleXCreate(path, state) {
             for (const [className, classPaths] of Object.entries(classPathsPerNamespace[key])) {
               origClassPaths[className] = classPaths.join('_');
             }
-            let dynamicStyles = Object.entries(inlineStyles).map(([_key, v]) => ({
+            let dynamicStyles = Object.entries(inlineStyles).map(([varName, v]) => ({
               expression: v.originalExpression,
               key: v.path.slice(0, v.path.findIndex(p => !p.startsWith(':') && !p.startsWith('@')) + 1).join('_'),
+              varName,
               path: v.path.join('_')
             }));
             if (state.options.styleResolution === 'legacy-expand-shorthands') {
               dynamicStyles = legacyExpandShorthands(dynamicStyles);
             }
+            const nullishVarExpressions = new Map();
+            dynamicStyles.forEach(style => {
+              if (hasExplicitNullishFallback(style.expression)) {
+                nullishVarExpressions.set(style.varName, style.expression);
+              }
+            });
             if (t__namespace.isObjectExpression(prop.value)) {
               const value = prop.value;
               let cssTagValue = t__namespace.booleanLiteral(true);
@@ -6708,9 +6783,23 @@ function transformStyleXCreate(path, state) {
                 let isStatic = true;
                 const exprList = [];
                 classList.forEach((cls, index) => {
-                  const expr = dynamicStyles.find(({
+                  let expr = dynamicStyles.find(({
                     path
                   }) => origClassPaths[cls] === path)?.expression;
+                  if (expr == null && nullishVarExpressions.size > 0) {
+                    const injectedStyle = injectedStyles[cls];
+                    const rule = injectedStyle != null ? typeof injectedStyle.ltr === 'string' ? injectedStyle.ltr : typeof injectedStyle.rtl === 'string' ? injectedStyle.rtl : null : null;
+                    if (rule != null) {
+                      const matches = rule.matchAll(/var\((--x-[^,)]+)[^)]*\)/g);
+                      for (const match of matches) {
+                        const varExpr = nullishVarExpressions.get(match[1]);
+                        if (varExpr != null) {
+                          expr = varExpr;
+                          break;
+                        }
+                      }
+                    }
+                  }
                   const isLast = index === classList.length - 1;
                   const clsWithSpace = isLast ? cls : cls + ' ';
                   if (expr && !isSafeToSkipNullCheck(expr)) {
@@ -6871,6 +6960,7 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
         types: stylexTypes
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident: confident2,
       value: overrides
@@ -6985,6 +7075,7 @@ function transformStyleXDefineVars(callExpressionPath, state) {
         types: stylexTypes
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -7047,10 +7138,16 @@ function transformStyleXDefineConsts(callExpressionPath, state) {
     const varId = variableDeclaratorNode.id;
     const args = callExpressionPath.get('arguments');
     const firstArg = args[0];
+    const evaluatePathFnConfig = {
+      identifiers: {},
+      memberExpressions: {},
+      disableImports: true
+    };
+    state.applyStylexEnv(evaluatePathFnConfig.identifiers);
     const {
       confident,
       value
-    } = evaluate(firstArg, state);
+    } = evaluate(firstArg, state, evaluatePathFnConfig);
     if (!confident) {
       throw callExpressionPath.buildCodeFrameError(messages.nonStaticValue('defineConsts'), SyntaxError);
     }
@@ -7132,6 +7229,7 @@ function transformStyleXKeyframes(path, state) {
         fn: firstThatWorks
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -7203,6 +7301,7 @@ function transformStyleXPositionTry(path, state) {
         fn: firstThatWorks
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -7257,6 +7356,12 @@ function transformStyleXMerge(path, state) {
   if (node == null || node.callee.type !== 'Identifier' || !state.stylexImport.has(node.callee.name)) {
     return;
   }
+  const evaluatePathFnConfig = {
+    identifiers: {},
+    memberExpressions: {},
+    disableImports: true
+  };
+  state.applyStylexEnv(evaluatePathFnConfig.identifiers);
   let bailOut = false;
   let conditional = 0;
   let currentIndex = -1;
@@ -7363,7 +7468,7 @@ function transformStyleXMerge(path, state) {
           const {
             confident,
             value: styleValue
-          } = evaluate(path, state);
+          } = evaluate(path, state, evaluatePathFnConfig);
           if (!confident || styleValue == null) {
             nonNullProps = true;
             styleNonNullProps = true;
@@ -7499,6 +7604,7 @@ function transformStylexProps(path, state) {
       }
     };
   });
+  state.applyStylexEnv(identifiers);
   const evaluatePathFnConfig = {
     identifiers,
     memberExpressions,
@@ -7824,6 +7930,7 @@ function transformStyleXViewTransitionClass(path, state) {
         fn: keyframes$1
       };
     });
+    state.applyStylexEnv(identifiers);
     const {
       confident,
       value
@@ -8085,6 +8192,31 @@ function styleXTransform() {
           });
         }
       },
+      JSXOpeningElement(path) {
+        const sxPropName = state.options.sxPropName;
+        if (sxPropName === false) {
+          return;
+        }
+        const node = path.node;
+        if (node.name.type !== 'JSXIdentifier' || typeof node.name.name !== 'string' || node.name.name[0] !== node.name.name[0].toLowerCase()) {
+          return;
+        }
+        for (const attr of path.get('attributes')) {
+          if (!attr.isJSXAttribute() || !attr.get('name').isJSXIdentifier() || attr.get('name').node.name !== sxPropName) {
+            continue;
+          }
+          const valuePath = attr.get('value');
+          if (!valuePath.isJSXExpressionContainer()) {
+            continue;
+          }
+          const value = valuePath.get('expression');
+          if (value.isJSXEmptyExpression()) {
+            continue;
+          }
+          attr.replaceWith(t__namespace.jsxSpreadAttribute(t__namespace.callExpression(t__namespace.memberExpression(t__namespace.identifier('stylex'), t__namespace.identifier('props')), [value.node])));
+          break;
+        }
+      },
       CallExpression(path) {
         const parentPath = path.parentPath;
         if (parentPath.isVariableDeclarator()) {

package/lib/shared/common-types.js.flow

@@ -47,6 +47,7 @@ export type StyleXOptions = $ReadOnly<{
   classNamePrefix: string,
   debug: ?boolean,
   definedStylexCSSVariables?: { [key: string]: mixed },
+  env?: $ReadOnly<{ [string]: any }>,
   dev: boolean,
   propertyValidationMode?: 'throw' | 'warn' | 'silent',
   enableDebugClassNames?: ?boolean,

package/lib/shared/messages.d.ts

@@ -35,8 +35,6 @@ export declare const ILLEGAL_PROP_ARRAY_VALUE: 'A style array value can only con
 export declare type ILLEGAL_PROP_ARRAY_VALUE = typeof ILLEGAL_PROP_ARRAY_VALUE;
 export declare const ILLEGAL_NAMESPACE_VALUE: 'A StyleX namespace must be an object.';
 export declare type ILLEGAL_NAMESPACE_VALUE = typeof ILLEGAL_NAMESPACE_VALUE;
-export declare const INVALID_CONST_KEY: 'Keys in defineConsts() cannot start with "--".';
-export declare type INVALID_CONST_KEY = typeof INVALID_CONST_KEY;
 export declare const INVALID_PSEUDO: 'Invalid pseudo selector, not on the whitelist.';
 export declare type INVALID_PSEUDO = typeof INVALID_PSEUDO;
 export declare const INVALID_PSEUDO_OR_AT_RULE: 'Invalid pseudo or at-rule.';

package/lib/shared/messages.js.flow

@@ -26,7 +26,6 @@ declare export const ILLEGAL_NESTED_PSEUDO: "Pseudo objects can't be nested more
 declare export const ILLEGAL_PROP_VALUE: 'A style value can only contain an array, string or number.';
 declare export const ILLEGAL_PROP_ARRAY_VALUE: 'A style array value can only contain strings or numbers.';
 declare export const ILLEGAL_NAMESPACE_VALUE: 'A StyleX namespace must be an object.';
-declare export const INVALID_CONST_KEY: 'Keys in defineConsts() cannot start with "--".';
 declare export const INVALID_PSEUDO: 'Invalid pseudo selector, not on the whitelist.';
 declare export const INVALID_PSEUDO_OR_AT_RULE: 'Invalid pseudo or at-rule.';
 declare export const INVALID_MEDIA_QUERY_SYNTAX: 'Invalid media query syntax.';

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

@@ -8,6 +8,7 @@
  */
 
 import type { StyleXOptions } from '../common-types';
+type WhenSelector = `:${string}` | `[${string}`;
 /**
  * Creates selector that observes if the given pseudo-class is
  * active on an ancestor with the "defaultMarker"
@@ -17,7 +18,7 @@ import type { StyleXOptions } from '../common-types';
  * @returns A :where() clause for the ancestor observer
  */
 export declare function ancestor(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -28,7 +29,7 @@ export declare function ancestor(
  * @returns A :has() clause for the descendant observer
  */
 export declare function descendant(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -39,7 +40,7 @@ export declare function descendant(
  * @returns A :where() clause for the previous sibling observer
  */
 export declare function siblingBefore(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -50,7 +51,7 @@ export declare function siblingBefore(
  * @returns A :has() clause for the next sibling observer
  */
 export declare function siblingAfter(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 /**
@@ -61,6 +62,6 @@ export declare function siblingAfter(
  * @returns A :where() clause for the any sibling observer
  */
 export declare function anySibling(
-  pseudo: `:${string}`,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;

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

@@ -9,6 +9,8 @@
 
 import type { StyleXOptions } from '../common-types';
 
+type WhenSelector = StringPrefix<':'> | StringPrefix<'['>;
+
 /**
  * Creates selector that observes if the given pseudo-class is
  * active on an ancestor with the "defaultMarker"
@@ -18,7 +20,7 @@ import type { StyleXOptions } from '../common-types';
  * @returns A :where() clause for the ancestor observer
  */
 declare export function ancestor(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -30,7 +32,7 @@ declare export function ancestor(
  * @returns A :has() clause for the descendant observer
  */
 declare export function descendant(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -42,7 +44,7 @@ declare export function descendant(
  * @returns A :where() clause for the previous sibling observer
  */
 declare export function siblingBefore(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -54,7 +56,7 @@ declare export function siblingBefore(
  * @returns A :has() clause for the next sibling observer
  */
 declare export function siblingAfter(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;
 
@@ -66,6 +68,6 @@ declare export function siblingAfter(
  * @returns A :where() clause for the any sibling observer
  */
 declare export function anySibling(
-  pseudo: StringPrefix<':'>,
+  pseudo: WhenSelector,
   options?: string | StyleXOptions,
 ): string;

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

@@ -13,6 +13,7 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '../shared';
+import type { FunctionConfig } from './evaluate-path';
 import * as t from '@babel/types';
 export type ImportPathResolution =
   | false
@@ -60,6 +61,7 @@ export type StyleXOptions = Readonly<
         enableLogicalStylesPolyfill?: boolean;
         enableLTRRTLComments?: boolean;
         enableMinifiedKeys?: boolean;
+        sxPropName?: string | false;
         importSources: ReadonlyArray<
           string | Readonly<{ from: string; as: string }>
         >;
@@ -87,6 +89,7 @@ export type StyleXOptions = Readonly<
     enableLogicalStylesPolyfill?: boolean;
     enableLTRRTLComments?: boolean;
     enableMinifiedKeys?: boolean;
+    sxPropName?: string | false;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>
     >;
@@ -104,6 +107,7 @@ type StyleXStateOptions = Readonly<
   Omit<
     StyleXOptions,
     | keyof {
+        env: Readonly<{ [$$Key$$: string]: any }>;
         runtimeInjection:
           | (null | undefined | string)
           | Readonly<{ from: string; as: null | undefined | string }>;
@@ -114,6 +118,7 @@ type StyleXStateOptions = Readonly<
         rewriteAliases: boolean;
       }
   > & {
+    env: Readonly<{ [$$Key$$: string]: any }>;
     runtimeInjection:
       | (null | undefined | string)
       | Readonly<{ from: string; as: null | undefined | string }>;
@@ -143,6 +148,7 @@ declare class StateManager {
   readonly stylexViewTransitionClassImport: Set<string>;
   readonly stylexDefaultMarkerImport: Set<string>;
   readonly stylexWhenImport: Set<string>;
+  readonly stylexEnvImport: Set<string>;
   injectImportInserted: null | undefined | t.Identifier;
   readonly styleMap: Map<string, CompiledNamespaces>;
   readonly styleVars: Map<string, NodePath>;
@@ -156,6 +162,7 @@ declare class StateManager {
   get importPathString(): string;
   get importSources(): ReadonlyArray<string>;
   importAs(source: string): null | string;
+  applyStylexEnv(identifiers: FunctionConfig['identifiers']): void;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get runtimeInjection():

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

@@ -13,6 +13,8 @@ import type {
   CompiledNamespaces,
   StyleXOptions as RuntimeOptions,
 } from '../shared';
+import type { FunctionConfig } from './evaluate-path';
+
 import * as t from '@babel/types';
 export type ImportPathResolution =
   | false
@@ -57,6 +59,7 @@ export type StyleXOptions = $ReadOnly<{
   enableLogicalStylesPolyfill?: boolean,
   enableLTRRTLComments?: boolean,
   enableMinifiedKeys?: boolean,
+  sxPropName?: string | false,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,
   >,
@@ -70,6 +73,7 @@ export type StyleXOptions = $ReadOnly<{
 
 type StyleXStateOptions = $ReadOnly<{
   ...StyleXOptions,
+  env: $ReadOnly<{ [string]: any }>,
   runtimeInjection: ?string | $ReadOnly<{ from: string, as: ?string }>,
   aliases?: ?$ReadOnly<{ [string]: $ReadOnlyArray<string> }>,
   rewriteAliases: boolean,
@@ -96,6 +100,7 @@ declare export default class StateManager {
   +stylexViewTransitionClassImport: Set<string>;
   +stylexDefaultMarkerImport: Set<string>;
   +stylexWhenImport: Set<string>;
+  +stylexEnvImport: Set<string>;
   injectImportInserted: ?t.Identifier;
   // `stylex.create` calls
   +styleMap: Map<string, CompiledNamespaces>;
@@ -109,6 +114,7 @@ declare export default class StateManager {
   get importPathString(): string;
   get importSources(): $ReadOnlyArray<string>;
   importAs(source: string): null | string;
+  applyStylexEnv(identifiers: FunctionConfig['identifiers']): void;
   get canReferenceTheme(): boolean;
   get metadata(): { [key: string]: any };
   get runtimeInjection(): ?$ReadOnly<{ from: string, as?: ?string }>;

package/lib/visitors/inline-css.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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';
+/**
+ * Transform inline-css call expressions like `css.color(value)`.
+ * These become arrow functions that return [compiledObj, inlineObj].
+ */
+export declare function transformInlineCSSCall(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+/**
+ * Transform inline-css member expressions like `css.display.flex`.
+ * These become compiled namespace objects: { [key]: className, $$css: true }
+ */
+export declare function transformInlineCSSMemberExpression(
+  path: NodePath<t.MemberExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/inline-css.js.flow

@@ -0,0 +1,30 @@
+/**
+ * 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 '@babel/traverse';
+
+import * as t from '@babel/types';
+import StateManager from '../utils/state-manager';
+/**
+ * Transform inline-css call expressions like `css.color(value)`.
+ * These become arrow functions that return [compiledObj, inlineObj].
+ */
+declare export function transformInlineCSSCall(
+  path: NodePath<t.CallExpression>,
+  state: StateManager,
+): void;
+
+/**
+ * Transform inline-css member expressions like `css.display.flex`.
+ * These become compiled namespace objects: { [key]: className, $$css: true }
+ */
+declare export function transformInlineCSSMemberExpression(
+  path: NodePath<t.MemberExpression>,
+  state: StateManager,
+): void;

package/lib/visitors/stylex-define-consts.js.flow

@@ -8,7 +8,6 @@
  */
 
 import type { NodePath } from '@babel/traverse';
-
 import * as t from '@babel/types';
 import StateManager from '../utils/state-manager';
 /// This function looks for `stylex.defineConsts` calls and transforms them.

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.17.5",
+  "version": "0.18.1",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "browser": "lib/index.browser.js",
@@ -23,8 +23,8 @@
     "@babel/traverse": "^7.26.8",
     "@babel/types": "^7.26.8",
     "@dual-bundle/import-meta-resolve": "^4.1.0",
-    "@stylexjs/shared": "0.17.5",
-    "@stylexjs/stylex": "0.17.5",
+    "@stylexjs/shared": "0.18.1",
+    "@stylexjs/stylex": "0.18.1",
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
@@ -36,8 +36,8 @@
     "@rollup/plugin-replace": "^6.0.1",
     "babel-plugin-syntax-hermes-parser": "^0.32.1",
     "path-browserify": "^1.0.1",
-    "rollup": "^4.24.0",
-    "scripts": "0.17.5"
+    "rollup": "^4.59.0",
+    "scripts": "0.18.1"
   },
   "files": [
     "flow_modules/*",