@stylexjs/babel-plugin 0.15.3 → 0.15.4

package/lib/index.js

@@ -829,6 +829,7 @@ class StateManager {
     const enableMediaQueryOrder = logAndDefault(boolean(), options.enableMediaQueryOrder ?? false, false, 'options.enableMediaQueryOrder');
     const enableLegacyValueFlipping = logAndDefault(boolean(), options.enableLegacyValueFlipping ?? false, false, 'options.enableLegacyValueFlipping');
     const enableLogicalStylesPolyfill = logAndDefault(boolean(), options.enableLogicalStylesPolyfill ?? false, false, 'options.enableLogicalStylesPolyfill');
+    const enableLTRRTLComments = logAndDefault(boolean(), options.enableLTRRTLComments ?? false, false, 'options.enableLTRRTLComments');
     const test = logAndDefault(boolean(), options.test ?? false, false, 'options.test');
     const configRuntimeInjection = logAndDefault(checkRuntimeInjection, options.runtimeInjection ?? false, false, 'options.runtimeInjection');
     const runtimeInjection = configRuntimeInjection === true ? DEFAULT_INJECT_PATH : configRuntimeInjection === false ? undefined : configRuntimeInjection;
@@ -860,6 +861,7 @@ class StateManager {
       enableMediaQueryOrder,
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
+      enableLTRRTLComments,
       importSources,
       rewriteAliases: typeof options.rewriteAliases === 'boolean' ? options.rewriteAliases : false,
       runtimeInjection,
@@ -978,32 +980,27 @@ class StateManager {
     if (sourceFilePath == null) {
       return false;
     }
+    const themeFileExtension = this.options.unstable_moduleResolution?.themeFileExtension ?? '.stylex';
+    const transformedVarsFileExtension = '.transformed';
+    const isValidStylexFile = matchesFileSuffix(themeFileExtension)(importPath);
+    const isValidTransformedVarsFile = matchesFileSuffix(transformedVarsFileExtension)(importPath);
+    if (!isValidStylexFile && !isValidTransformedVarsFile) {
+      return false;
+    }
     switch (this.options.unstable_moduleResolution?.type) {
       case 'commonJS':
         {
           const aliases = this.options.aliases;
-          const themeFileExtension = this.options.unstable_moduleResolution?.themeFileExtension ?? '.stylex';
-          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
-            return false;
-          }
           const resolvedFilePath = filePathResolver(importPath, sourceFilePath, aliases);
           return resolvedFilePath ? ['themeNameRef', this.getCanonicalFilePath(resolvedFilePath)] : false;
         }
       case 'haste':
         {
-          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? '.stylex';
-          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
-            return false;
-          }
           return ['themeNameRef', addFileExtension(importPath, sourceFilePath)];
         }
       case 'experimental_crossFileParsing':
         {
           const aliases = this.options.aliases;
-          const themeFileExtension = this.options.unstable_moduleResolution.themeFileExtension ?? '.stylex';
-          if (!matchesFileSuffix(themeFileExtension)(importPath)) {
-            return false;
-          }
           const resolvedFilePath = filePathResolver(importPath, sourceFilePath, aliases);
           return resolvedFilePath ? ['filePath', resolvedFilePath] : false;
         }
@@ -1295,6 +1292,7 @@ const defaultOptions = {
   enableMediaQueryOrder: false,
   enableLegacyValueFlipping: false,
   enableLogicalStylesPolyfill: false,
+  enableLTRRTLComments: false,
   enableMinifiedKeys: true,
   styleResolution: 'property-specificity',
   test: false
@@ -7146,10 +7144,13 @@ function evaluatePartialObjectRecursively(path, traversalState, functions = {
         };
       }
       let key = keyResult.value;
+      const valuePath = prop.get('value');
       if (key.startsWith('var(') && key.endsWith(')')) {
-        key = key.slice(4, -1);
+        const inner = key.slice(4, -1);
+        if (keyPath.length === 0) {
+          key = inner;
+        }
       }
-      const valuePath = prop.get('value');
       if (valuePath.isObjectExpression()) {
         const result = evaluatePartialObjectRecursively(valuePath, traversalState, functions, [...keyPath, key]);
         if (!result.confident) {
@@ -8720,7 +8721,13 @@ function isExported(path) {
   }
   return isExported(path.parentPath);
 }
-function processStylexRules(rules, useLayers = false) {
+function processStylexRules(rules, config) {
+  const {
+    useLayers = false,
+    enableLTRRTLComments = false
+  } = typeof config === 'boolean' ? {
+    useLayers: config
+  } : config ?? {};
   if (rules.length === 0) {
     return '';
   }
@@ -8811,7 +8818,11 @@ function processStylexRules(rules, useLayers = false) {
         ltrRule = addSpecificityLevel(ltrRule, index);
         rtlRule = rtlRule && addSpecificityLevel(rtlRule, index);
       }
-      return rtlRule ? [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
+      ltrRule = ltrRule.replace(/\.([a-zA-Z0-9]+), \.([a-zA-Z0-9]+):root/g, '.$1.$1, .$1.$1:root');
+      if (rtlRule) {
+        rtlRule = rtlRule.replace(/\.([a-zA-Z0-9]+), \.([a-zA-Z0-9]+):root/g, '.$1.$1, .$1.$1:root');
+      }
+      return rtlRule ? enableLTRRTLComments ? [`/* @ltr begin */${ltrRule}/* @ltr end */`, `/* @rtl begin */${rtlRule}/* @rtl end */`] : [addAncestorSelector(ltrRule, "html:not([dir='rtl'])"), addAncestorSelector(rtlRule, "html[dir='rtl']")] : [ltrRule];
     }).join('\n');
     return useLayers && pri > 0 ? `@layer priority${index + 1}{\n${collectedCSS}\n}` : collectedCSS;
   }).join('\n');

package/lib/index.js.flow

@@ -47,7 +47,13 @@ export type Rule = [
 ];
 declare function processStylexRules(
   rules: Array<Rule>,
-  useLayers: boolean,
+  config?:
+    | boolean
+    | {
+        useLayers?: boolean,
+        enableLTRRTLComments?: boolean,
+        ...
+      },
 ): string;
 
 export type StyleXTransformObj = $ReadOnly<{

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

@@ -49,6 +49,7 @@ export type StyleXOptions = Readonly<{
   enableMediaQueryOrder?: null | undefined | boolean;
   enableLegacyValueFlipping?: null | undefined | boolean;
   enableLogicalStylesPolyfill?: null | undefined | boolean;
+  enableLTRRTLComments?: null | undefined | boolean;
   enableMinifiedKeys?: null | undefined | boolean;
   styleResolution:
     | 'application-order'

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

@@ -55,6 +55,7 @@ export type StyleXOptions = $ReadOnly<{
   enableMediaQueryOrder?: ?boolean,
   enableLegacyValueFlipping?: ?boolean,
   enableLogicalStylesPolyfill?: ?boolean,
+  enableLTRRTLComments?: ?boolean,
   enableMinifiedKeys?: ?boolean,
   styleResolution:
     | 'application-order' // The last style applied wins.

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

@@ -44,6 +44,7 @@ export type StyleXOptions = Readonly<
       enableMediaQueryOrder?: boolean;
       enableLegacyValueFlipping?: boolean;
       enableLogicalStylesPolyfill?: boolean;
+      enableLTRRTLComments?: boolean;
       enableMinifiedKeys?: boolean;
       importSources: ReadonlyArray<
         string | Readonly<{ from: string; as: string }>
@@ -68,6 +69,7 @@ export type StyleXOptions = Readonly<
     enableMediaQueryOrder?: boolean;
     enableLegacyValueFlipping?: boolean;
     enableLogicalStylesPolyfill?: boolean;
+    enableLTRRTLComments?: boolean;
     enableMinifiedKeys?: boolean;
     importSources: ReadonlyArray<
       string | Readonly<{ from: string; as: string }>

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

@@ -44,6 +44,7 @@ export type StyleXOptions = $ReadOnly<{
   enableMediaQueryOrder?: boolean,
   enableLegacyValueFlipping?: boolean,
   enableLogicalStylesPolyfill?: boolean,
+  enableLTRRTLComments?: boolean,
   enableMinifiedKeys?: boolean,
   importSources: $ReadOnlyArray<
     string | $ReadOnly<{ from: string, as: string }>,

package/package.json

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