@stylexjs/babel-plugin 0.14.1 → 0.14.2

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]],
@@ -3054,17 +3066,29 @@ 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;
   }
@@ -3090,7 +3114,7 @@ function generateRTL(_ref43) {
   if (!propertyToRTL[key]) {
     return null;
   }
-  return propertyToRTL[key]([key, value]);
+  return propertyToRTL[key]([key, value], 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];
 }
@@ -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})`;
@@ -5846,7 +5870,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 +5994,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 +6055,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/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.2",
   "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.2",
     "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.2"
   },
   "files": [
     "flow_modules/*",