@stylexjs/babel-plugin 0.14.1 → 0.14.3

package/lib/index.js

@@ -740,6 +740,7 @@ class StateManager {
     const enableFontSizePxToRem = logAndDefault(boolean(), options.enableFontSizePxToRem ?? false, false, 'options.enableFontSizePxToRem');
     const enableInlinedConditionalMerge = logAndDefault(boolean(), options.enableInlinedConditionalMerge ?? true, true, 'options.enableInlinedConditionalMerge');
     const enableMinifiedKeys = logAndDefault(boolean(), options.enableMinifiedKeys ?? true, true, 'options.enableMinifiedKeys');
+    const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? false, false, 'options.enableLegacyValueFlipping');
     const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? false, false, 'options.enableLogicalStylesPolyfill');
     const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
@@ -770,6 +771,7 @@ class StateManager {
       enableFontSizePxToRem,
       enableInlinedConditionalMerge,
       enableMinifiedKeys,
+      enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
@@ -1278,6 +1280,7 @@ const defaultOptions = {
   enableDevClassNames: false,
   enableDebugDataProp: true,
   enableFontSizePxToRem: false,
+  enableLegacyValueFlipping: false,
   enableLogicalStylesPolyfill: false,
   enableMinifiedKeys: true,
   styleResolution: 'property-specificity',
@@ -2120,9 +2123,18 @@ const shorthands$1 = {
     }, []);
     return [['containIntrinsicWidth', width], ['containIntrinsicHeight', height]];
   },
-  inset: rawValue => [['top', rawValue], ['insetInlineEnd', rawValue], ['bottom', rawValue], ['insetInlineStart', rawValue]],
-  insetInline: rawValue => [...shorthands$1.start(rawValue), ...shorthands$1.end(rawValue)],
-  insetBlock: rawValue => [['top', rawValue], ['bottom', rawValue]],
+  inset: rawValue => {
+    const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
+    return [['top', top], ['insetInlineEnd', right], ['bottom', bottom], ['insetInlineStart', left]];
+  },
+  insetInline: rawValue => {
+    const [start, end = start] = splitValue(rawValue);
+    return [...shorthands$1.start(start), ...shorthands$1.end(end)];
+  },
+  insetBlock: rawValue => {
+    const [top, bottom = top] = splitValue(rawValue);
+    return [['top', top], ['bottom', bottom]];
+  },
   start: rawValue => [['insetInlineStart', rawValue], ['left', null], ['right', null]],
   end: rawValue => [['insetInlineEnd', rawValue], ['left', null], ['right', null]],
   left: rawValue => [['left', rawValue], ['insetInlineStart', null], ['insetInlineEnd', null]],
@@ -2161,7 +2173,7 @@ const shorthands$1 = {
   },
   paddingStart: val => [['paddingInlineStart', val], ['paddingLeft', null], ['paddingRight', null]],
   paddingEnd: val => [['paddingInlineEnd', val], ['paddingLeft', null], ['paddingRight', null]],
-  paddingLeft: val => [['paddingLeft', val], ['paddingStart', null], ['paddingEnd', null]],
+  paddingLeft: val => [['paddingLeft', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
   paddingRight: val => [['paddingRight', val], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
   paddingVertical: val => {
     const [top, bottom = top] = splitValue(val);
@@ -2870,7 +2882,7 @@ function flipShadow(value) {
     }
     builtDefs.push(parts.join(' '));
   }
-  const rtl = builtDefs.join(', ');
+  const rtl = builtDefs.join(',');
   if (rtl !== value) {
     return rtl;
   }
@@ -3054,43 +3066,55 @@ const propertyToRTL = {
     }
     return [key, words.map(word => word === 'start' || word === 'insetInlineStart' ? 'right' : word === 'end' || word === 'insetInlineEnd' ? 'left' : word).join(' ')];
   },
-  cursor: _ref40 => {
+  cursor: function (_ref40) {
     let [key, val] = _ref40;
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+    if (!options.enableLegacyValueFlipping) {
+      return null;
+    }
     return cursorFlip[val] != null ? [key, cursorFlip[val]] : null;
   },
-  'box-shadow': _ref41 => {
+  'box-shadow': function (_ref41) {
     let [key, val] = _ref41;
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+    if (!options.enableLegacyValueFlipping) {
+      return null;
+    }
     const rtlVal = flipShadow(val);
     return rtlVal ? [key, rtlVal] : null;
   },
-  'text-shadow': _ref42 => {
+  'text-shadow': function (_ref42) {
     let [key, val] = _ref42;
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
+    if (!options.enableLegacyValueFlipping) {
+      return null;
+    }
     const rtlVal = flipShadow(val);
     return rtlVal ? [key, rtlVal] : null;
   }
 };
-function generateRTL(_ref43) {
-  let [key, value] = _ref43;
+function generateRTL(pair) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions;
   const {
     enableLogicalStylesPolyfill,
     styleResolution
   } = options;
+  const [key] = pair;
   if (styleResolution === 'legacy-expand-shorthands') {
     if (!enableLogicalStylesPolyfill) {
       if (legacyValuesPolyfill[key]) {
-        return legacyValuesPolyfill[key]([key, value]);
+        return legacyValuesPolyfill[key](pair);
       }
       return null;
     }
     if (inlinePropertyToRTL[key]) {
-      return inlinePropertyToRTL[key]([key, value]);
+      return inlinePropertyToRTL[key](pair);
     }
   }
   if (!propertyToRTL[key]) {
     return null;
   }
-  return propertyToRTL[key]([key, value]);
+  return propertyToRTL[key](pair, options);
 }
 
 const longHandPhysical = new Set();
@@ -4298,18 +4322,18 @@ function getDefaultValue(value) {
 function styleXDefineVars(variables, options) {
   const {
     classNamePrefix,
-    themeName,
+    exportId,
     debug,
     enableDebugClassNames
   } = {
     ...defaultOptions,
     ...options
   };
-  const themeNameHash = classNamePrefix + hash(themeName);
+  const varGroupHash = classNamePrefix + hash(exportId);
   const typedVariables = {};
   const variablesMap = objMap(variables, (value, key) => {
     const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
-    const nameHash = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? varSafeKey + '-' + classNamePrefix + hash(`${themeName}.${key}`) : classNamePrefix + hash(`${themeName}.${key}`);
+    const nameHash = key.startsWith('--') ? key.slice(2) : debug && enableDebugClassNames ? varSafeKey + '-' + classNamePrefix + hash(`${exportId}.${key}`) : classNamePrefix + hash(`${exportId}.${key}`);
     if (isCSSType(value)) {
       const v = value;
       typedVariables[nameHash] = {
@@ -4332,7 +4356,7 @@ function styleXDefineVars(variables, options) {
     } = _ref;
     return `var(--${nameHash})`;
   });
-  const injectableStyles = constructCssVariablesString(variablesMap, themeNameHash);
+  const injectableStyles = constructCssVariablesString(variablesMap, varGroupHash);
   const injectableTypes = objMap(typedVariables, (_ref2, nameHash) => {
     let {
       initialValue: iv,
@@ -4346,13 +4370,13 @@ function styleXDefineVars(variables, options) {
   });
   return [{
     ...themeVariablesObject,
-    __themeName__: themeNameHash
+    __varGroupHash__: varGroupHash
   }, {
     ...injectableTypes,
     ...injectableStyles
   }];
 }
-function constructCssVariablesString(variables, themeNameHash) {
+function constructCssVariablesString(variables, varGroupHash) {
   const rulesByAtRule = {};
   for (const [key, {
     nameHash,
@@ -4366,12 +4390,12 @@ function constructCssVariablesString(variables, themeNameHash) {
   const result = {};
   for (const [atRule, value] of Object.entries(rulesByAtRule)) {
     const suffix = atRule === 'default' ? '' : `-${hash(atRule)}`;
-    const selector = `:root, .${themeNameHash}`;
+    const selector = `:root, .${varGroupHash}`;
     let ltr = `${selector}{${value.join('')}}`;
     if (atRule !== 'default') {
       ltr = wrapWithAtRules(ltr, atRule);
     }
-    result[themeNameHash + suffix] = {
+    result[varGroupHash + suffix] = {
       ltr,
       rtl: null,
       priority: priorityForAtRule(atRule) * 0.1
@@ -4383,7 +4407,7 @@ function constructCssVariablesString(variables, themeNameHash) {
 function styleXDefineConsts(constants, options) {
   const {
     classNamePrefix,
-    themeName,
+    exportId,
     debug,
     enableDebugClassNames
   } = {
@@ -4397,10 +4421,10 @@ function styleXDefineConsts(constants, options) {
       throw new Error(INVALID_CONST_KEY);
     }
     const varSafeKey = (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_');
-    const nameHash = debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${hash(`${themeName}.${key}`)}` : `${classNamePrefix}${hash(`${themeName}.${key}`)}`;
+    const constKey = debug && enableDebugClassNames ? `${varSafeKey}-${classNamePrefix}${hash(`${exportId}.${key}`)}` : `${classNamePrefix}${hash(`${exportId}.${key}`)}`;
     jsOutput[key] = value;
-    injectableStyles[nameHash] = {
-      constKey: nameHash,
+    injectableStyles[constKey] = {
+      constKey,
       constVal: value,
       priority: 0,
       ltr: '',
@@ -4411,7 +4435,7 @@ function styleXDefineConsts(constants, options) {
 }
 
 function styleXCreateTheme(themeVars, variables, options) {
-  if (typeof themeVars.__themeName__ !== 'string') {
+  if (typeof themeVars.__varGroupHash__ !== 'string') {
     throw new Error('Can only override variables theme created with defineVars().');
   }
   const {
@@ -4451,9 +4475,9 @@ function styleXCreateTheme(themeVars, variables, options) {
       };
     }
   }
-  const themeClass = `${overrideClassName} ${themeVars.__themeName__}`;
+  const themeClass = `${overrideClassName} ${themeVars.__varGroupHash__}`;
   return [{
-    [themeVars.__themeName__]: themeClass,
+    [themeVars.__varGroupHash__]: themeClass,
     $$css: true
   }, stylesToInject];
 }
@@ -4464,8 +4488,8 @@ function styleXKeyframes(frames) {
     classNamePrefix = 'x'
   } = options;
   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, generateLTR));
-  const rtlStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateRTL(entry) ?? entry));
+  const ltrStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateLTR(entry, options)));
+  const rtlStyles = objMap(expandedObject, frame => objMapEntry(frame, entry => generateRTL(entry, options) ?? entry));
   const ltrString = constructKeyframesObj(ltrStyles);
   const rtlString = constructKeyframesObj(rtlStyles);
   const animationName = classNamePrefix + hash('<>' + ltrString) + '-B';
@@ -4767,7 +4791,7 @@ function evaluateThemeRef(fileName, exportName, state) {
     if (key.startsWith('--')) {
       return `var(${key})`;
     }
-    const strToHash = key === '__themeName__' ? utils.genFileBasedIdentifier({
+    const strToHash = key === '__varGroupHash__' ? utils.genFileBasedIdentifier({
       fileName,
       exportName
     }) : utils.genFileBasedIdentifier({
@@ -4779,9 +4803,9 @@ function evaluateThemeRef(fileName, exportName, state) {
       debug,
       enableDebugClassNames
     } = state.traversalState.options;
-    const varSafeKey = key === '__themeName__' ? '' : (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_') + '-';
+    const varSafeKey = key === '__varGroupHash__' ? '' : (key[0] >= '0' && key[0] <= '9' ? `_${key}` : key).replace(/[^a-zA-Z0-9]/g, '_') + '-';
     const varName = debug && enableDebugClassNames ? varSafeKey + state.traversalState.options.classNamePrefix + utils.hash(strToHash) : state.traversalState.options.classNamePrefix + utils.hash(strToHash);
-    if (key === '__themeName__') {
+    if (key === '__varGroupHash__') {
       return varName;
     }
     return `var(--${varName})`;
@@ -5484,6 +5508,9 @@ function validateDynamicStyleParams(path, params) {
   }
 }
 
+function isSafeToSkipNullCheck(expr) {
+  return t__namespace.isBinaryExpression(expr) && ['+', '-', '*', '/', '**'].includes(expr.operator) || t__namespace.isUnaryExpression(expr) && ['-', '+'].includes(expr.operator);
+}
 function transformStyleXCreate(path, state) {
   const {
     node
@@ -5631,66 +5658,39 @@ function transformStyleXCreate(path, state) {
             }
             if (t__namespace.isObjectExpression(prop.value)) {
               const value = prop.value;
-              value.properties = value.properties.map(prop => {
-                if (!t__namespace.isObjectProperty(prop)) {
-                  return prop;
+              const conditionalProps = [];
+              value.properties.forEach(prop => {
+                if (!t__namespace.isObjectProperty(prop) || t__namespace.isPrivateName(prop.key)) {
+                  return;
                 }
                 const objProp = prop;
                 const propKey = objProp.key.type === 'Identifier' && !objProp.computed ? objProp.key.name : objProp.key.type === 'StringLiteral' ? objProp.key.value : null;
-                if (propKey != null) {
-                  const dynamicMatch = dynamicStyles.filter(_ref4 => {
+                if (propKey == null || propKey === '$$css') {
+                  conditionalProps.push(objProp);
+                  return;
+                }
+                const classList = t__namespace.isStringLiteral(objProp.value) ? objProp.value.value.split(' ') : [];
+                const exprList = [];
+                classList.forEach(cls => {
+                  const expr = dynamicStyles.find(_ref4 => {
                     let {
-                      key
+                      path
                     } = _ref4;
-                    return key === propKey;
-                  });
-                  if (dynamicMatch.length > 0) {
-                    const value = objProp.value;
-                    if (t__namespace.isStringLiteral(value)) {
-                      const classList = value.value.split(' ');
-                      if (classList.length === 1) {
-                        const cls = classList[0];
-                        const expr = dynamicMatch.find(_ref5 => {
-                          let {
-                            path
-                          } = _ref5;
-                          return origClassPaths[cls] === path;
-                        })?.expression;
-                        if (expr != null) {
-                          objProp.value = t__namespace.conditionalExpression(t__namespace.binaryExpression('==', expr, t__namespace.nullLiteral()), t__namespace.nullLiteral(), value);
-                        }
-                      } else if (classList.some(cls => dynamicMatch.find(_ref6 => {
-                        let {
-                          path
-                        } = _ref6;
-                        return origClassPaths[cls] === path;
-                      }))) {
-                        const exprArray = classList.map((cls, index) => {
-                          const expr = dynamicMatch.find(_ref7 => {
-                            let {
-                              path
-                            } = _ref7;
-                            return origClassPaths[cls] === path;
-                          })?.expression;
-                          const suffix = index === classList.length - 1 ? '' : ' ';
-                          if (expr != null) {
-                            return t__namespace.conditionalExpression(t__namespace.binaryExpression('==', expr, t__namespace.nullLiteral()), t__namespace.stringLiteral(''), t__namespace.stringLiteral(cls + suffix));
-                          }
-                          return t__namespace.stringLiteral(cls + suffix);
-                        });
-                        const [first, ...rest] = exprArray;
-                        objProp.value = rest.reduce((acc, curr) => {
-                          return t__namespace.binaryExpression('+', acc, curr);
-                        }, first);
-                      }
-                    }
+                    return origClassPaths[cls] === path;
+                  })?.expression;
+                  if (expr && !isSafeToSkipNullCheck(expr)) {
+                    exprList.push(t__namespace.conditionalExpression(t__namespace.binaryExpression('!=', expr, t__namespace.nullLiteral()), t__namespace.stringLiteral(cls), expr));
+                  } else {
+                    exprList.push(t__namespace.stringLiteral(cls));
                   }
-                }
-                return objProp;
+                });
+                const joined = exprList.length === 0 ? t__namespace.stringLiteral('') : exprList.reduce((acc, curr) => t__namespace.binaryExpression('+', acc, curr));
+                conditionalProps.push(t__namespace.objectProperty(objProp.key, joined));
               });
-              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([value, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref8 => {
-                let [key, value] = _ref8;
-                return t__namespace.objectProperty(t__namespace.stringLiteral(key), value.expression);
+              const conditionalObj = t__namespace.objectExpression(conditionalProps);
+              prop.value = t__namespace.arrowFunctionExpression(params, t__namespace.arrayExpression([conditionalObj, t__namespace.objectExpression(Object.entries(inlineStyles).map(_ref5 => {
+                let [key, val] = _ref5;
+                return t__namespace.objectProperty(t__namespace.stringLiteral(key), val.expression);
               }))]));
             }
           }
@@ -5698,11 +5698,11 @@ function transformStyleXCreate(path, state) {
         return prop;
       });
     }
-    const listOfStyles = Object.entries(injectedStyles).map(_ref9 => {
+    const listOfStyles = Object.entries(injectedStyles).map(_ref6 => {
       let [key, {
         priority,
         ...rest
-      }] = _ref9;
+      }] = _ref6;
       return [key, rest, priority];
     });
     state.registerStyles(listOfStyles, path);
@@ -5743,15 +5743,15 @@ function findNearestStatementAncestor(path) {
   return findNearestStatementAncestor(path.parentPath);
 }
 function legacyExpandShorthands(dynamicStyles) {
-  const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref0, i) => {
+  const expandedKeysToKeyPaths = dynamicStyles.flatMap((_ref7, i) => {
     let {
       key
-    } = _ref0;
+    } = _ref7;
     return flatMapExpandedShorthands([key, 'p' + i], {
       styleResolution: 'legacy-expand-shorthands'
     });
-  }).map(_ref1 => {
-    let [key, value] = _ref1;
+  }).map(_ref8 => {
+    let [key, value] = _ref8;
     if (typeof value !== 'string') {
       return null;
     }
@@ -5846,7 +5846,7 @@ function transformStyleXCreateTheme(callExpressionPath, state) {
     if (typeof overrides !== 'object' || overrides == null) {
       throw callExpressionPath.buildCodeFrameError(messages.nonStyleObject('createTheme'), SyntaxError);
     }
-    if (typeof variables.__themeName__ !== 'string' || variables.__themeName__ === '') {
+    if (typeof variables.__varGroupHash__ !== 'string' || variables.__varGroupHash__ === '') {
       throw callExpressionPath.buildCodeFrameError('Can only override variables theme created with defineVars().', SyntaxError);
     }
     let [overridesObj, injectedStyles] = createTheme(variables, overrides, state.options);
@@ -5970,7 +5970,7 @@ function transformStyleXDefineVars(callExpressionPath, state) {
     const exportName = varId.name;
     const [variablesObj, injectedStylesSansKeyframes] = defineVars(value, {
       ...state.options,
-      themeName: utils.genFileBasedIdentifier({
+      exportId: utils.genFileBasedIdentifier({
         fileName,
         exportName
       })
@@ -6031,13 +6031,13 @@ function transformStyleXDefineConsts(callExpressionPath, state) {
       throw new Error(messages.cannotGenerateHash('defineConsts'));
     }
     const exportName = varId.name;
-    const themeName = utils.genFileBasedIdentifier({
+    const exportId = utils.genFileBasedIdentifier({
       fileName,
       exportName
     });
     const [transformedJsOutput, jsOutput] = defineConsts(value, {
       ...state.options,
-      themeName
+      exportId
     });
     callExpressionPath.replaceWith(convertObjectToAST(transformedJsOutput));
     const styles = Object.entries(jsOutput).map(_ref => {

package/lib/shared/common-types.d.ts

@@ -46,6 +46,7 @@ export type StyleXOptions = Readonly<{
   enableDebugDataProp?: null | undefined | boolean;
   enableDevClassNames?: null | undefined | boolean;
   enableFontSizePxToRem?: null | undefined | boolean;
+  enableLegacyValueFlipping?: null | undefined | boolean;
   enableLogicalStylesPolyfill?: null | undefined | boolean;
   enableMinifiedKeys?: null | undefined | boolean;
   styleResolution:

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

@@ -52,6 +52,7 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugDataProp?: ?boolean,
   enableDevClassNames?: ?boolean,
   enableFontSizePxToRem?: ?boolean,
+  enableLegacyValueFlipping?: ?boolean,
   enableLogicalStylesPolyfill?: ?boolean,
   enableMinifiedKeys?: ?boolean,
   styleResolution:

package/lib/shared/physical-rtl/generate-rtl.d.ts

@@ -9,7 +9,7 @@
 
 import type { StyleXOptions } from '../common-types';
 declare function generateRTL(
-  $$PARAM_0$$: Readonly<[string, string]>,
+  pair: Readonly<[string, string]>,
   options: StyleXOptions,
 ): null | undefined | Readonly<[string, string]>;
 export default generateRTL;

package/lib/shared/physical-rtl/generate-rtl.js.flow

@@ -9,6 +9,6 @@
 
 import type { StyleXOptions } from '../common-types';
 declare export default function generateRTL(
-  $ReadOnly<[string, string]>,
+  pair: $ReadOnly<[string, string]>,
   options: StyleXOptions,
 ): ?$ReadOnly<[string, string]>;

package/lib/shared/stylex-create-theme.d.ts

@@ -10,7 +10,7 @@
 import type { InjectableStyle, StyleXOptions } from './common-types';
 declare function styleXCreateTheme(
   themeVars: {
-    readonly __themeName__: string;
+    readonly __varGroupHash__: string;
     readonly [$$Key$$: string]: string;
   },
   variables: {

package/lib/shared/stylex-create-theme.js.flow

@@ -13,7 +13,7 @@ import type { InjectableStyle, StyleXOptions } from './common-types';
 // and returns a hashed className with variables overrides.
 //
 declare export default function styleXCreateTheme(
-  themeVars: { +__themeName__: string, +[string]: string },
+  themeVars: { +__varGroupHash__: string, +[string]: string },
   variables: { +[string]: string | { default: string, +[string]: string } },
   options?: StyleXOptions,
 ): [{ $$css: true, +[string]: string }, { [string]: InjectableStyle }];

package/lib/shared/stylex-define-consts.d.ts

@@ -12,8 +12,8 @@ import type { ConstsConfig } from './stylex-consts-utils';
 declare function styleXDefineConsts<Vars extends ConstsConfig>(
   constants: Vars,
   options: Readonly<
-    Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
-      themeName: string;
+    Omit<Partial<StyleXOptions>, keyof ({ exportId: string })> & {
+      exportId: string;
     }
   >,
 ): [

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

@@ -12,7 +12,7 @@ import type { ConstsConfig } from './stylex-consts-utils';
 
 declare export default function styleXDefineConsts<Vars: ConstsConfig>(
   constants: Vars,
-  options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, exportId: string, ... }>,
 ): [
   { [string]: string | number }, // jsOutput JS output
   { [string]: InjectableConstStyle }, // metadata for registerinjectableStyles

package/lib/shared/stylex-define-vars.d.ts

@@ -13,15 +13,15 @@ type VarsKeysWithStringValues<Vars extends VarsConfig> = Readonly<{
   [$$Key$$: keyof Vars]: string;
 }>;
 type VarsObject<Vars extends VarsConfig> = Readonly<
-  Omit<VarsKeysWithStringValues<Vars>, keyof ({ __themeName__: string })> & {
-    __themeName__: string;
+  Omit<VarsKeysWithStringValues<Vars>, keyof ({ __varGroupHash__: string })> & {
+    __varGroupHash__: string;
   }
 >;
 declare function styleXDefineVars<Vars extends VarsConfig>(
   variables: Vars,
   options: Readonly<
-    Omit<Partial<StyleXOptions>, keyof ({ themeName: string })> & {
-      themeName: string;
+    Omit<Partial<StyleXOptions>, keyof ({ exportId: string })> & {
+      exportId: string;
     }
   >,
 ): [VarsObject<Vars>, { [$$Key$$: string]: InjectableStyle }];

package/lib/shared/stylex-define-vars.js.flow

@@ -15,12 +15,12 @@ type VarsKeysWithStringValues<Vars: VarsConfig> = $ReadOnly<{
 
 type VarsObject<Vars: VarsConfig> = $ReadOnly<{
   ...VarsKeysWithStringValues<Vars>,
-  __themeName__: string,
+  __varGroupHash__: string,
 }>;
 
 // Similar to `stylex.create` it takes an object of variables with their values
 // and returns a string after hashing it.
 declare export default function styleXDefineVars<Vars: VarsConfig>(
   variables: Vars,
-  options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
+  options: $ReadOnly<{ ...Partial<StyleXOptions>, exportId: string, ... }>,
 ): [VarsObject<Vars>, { [string]: InjectableStyle }];

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

@@ -46,6 +46,7 @@ export type StyleXOptions = Readonly<
       enableDebugDataProp?: boolean;
       enableDevClassNames?: boolean;
       enableInlinedConditionalMerge?: boolean;
+      enableLegacyValueFlipping?: boolean;
       enableLogicalStylesPolyfill?: boolean;
       enableMinifiedKeys?: boolean;
       importSources: ReadonlyArray<
@@ -68,6 +69,7 @@ export type StyleXOptions = Readonly<
     enableDebugDataProp?: boolean;
     enableDevClassNames?: boolean;
     enableInlinedConditionalMerge?: boolean;
+    enableLegacyValueFlipping?: boolean;
     enableLogicalStylesPolyfill?: boolean;
     enableMinifiedKeys?: boolean;
     importSources: ReadonlyArray<

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

@@ -48,6 +48,7 @@ export type StyleXOptions = $ReadOnly<{
   enableDebugDataProp?: boolean,
   enableDevClassNames?: boolean,
   enableInlinedConditionalMerge?: boolean,
+  enableLegacyValueFlipping?: boolean,
   enableLogicalStylesPolyfill?: boolean,
   enableMinifiedKeys?: boolean,
   importSources: $ReadOnlyArray<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.14.1",
+  "version": "0.14.3",
   "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.14.1",
+    "@stylexjs/stylex": "0.14.3",
     "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.14.1"
+    "scripts": "0.14.3"
   },
   "files": [
     "flow_modules/*",