Working on adding Vite support for StyleX, help needed

[hyperknot]

StyleX added official Babel + PostCSS config for their library. The community is trying to add a Vite example, but there is no official support. I'm documenting my progress in this issue:
facebook/stylex#1103

I managed to integrate StyleX it with the official Vite React repo:
https://github.com/hyperknot/bug_repro/tree/main/vite_stylex_react

My problem is that when porting the same snippet to the Vite Solid repo, it doesn't work:
https://github.com/hyperknot/bug_repro/tree/main/vite_stylex_solid

The Vite config is almost exactly the same, one has this:

    solid({
      babel: babelConfig,
    }),

while the other has this:

    react({
      babel: babelConfig,
    }),

So the difference / bug in the Solid config lies inside the plugins.

This is the babelConfig value (it is the same in both):

const babelConfig = {
  presets: ['@babel/preset-typescript'],
  plugins: [
    [
      '@stylexjs/babel-plugin',
      {
        dev: process.env.NODE_ENV === 'development',
        test: process.env.NODE_ENV === 'test',
        runtimeInjection: false,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: 'commonJS',
          // rootDir: '..',
        },
        // rewriteAliases: true,
        aliases: {
          '@alias/*': path.resolve('../alias/*'),
        },
      },
    ],
  ],
}

So I'm trying to debug the Solid plugin, and it has a line:
await babel.transformAsync(source, babelOptions);

Here is what that babelOption's value is when calling this function, console.log-ed at runtime:

{
  "filename": "/vite_stylex_solid/app/src/index.tsx",
  "sourceFileName": "/vite_stylex_solid/app/src/index.tsx",
  "presets": [
    "@babel/preset-typescript",
    [
      null,
      {
        "generate": "dom",
        "hydratable": false
      }
    ]
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": true,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_solid/alias/*"
        }
      }
    ],
    [
      null,
      {
        "bundler": "vite"
      }
    ]
  ],
  "ast": false,
  "sourceMaps": true,
  "configFile": false,
  "babelrc": false,
  "parserOpts": {
    "plugins": [
      "jsx",
      "typescript"
    ]
  }
}
{
  "filename": "/vite_stylex_solid/app/src/App.tsx",
  "sourceFileName": "/vite_stylex_solid/app/src/App.tsx",
  "presets": [
    "@babel/preset-typescript",
    [
      null,
      {
        "generate": "dom",
        "hydratable": false
      }
    ]
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": true,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_solid/alias/*"
        }
      }
    ],
    [
      null,
      {
        "bundler": "vite"
      }
    ]
  ],
  "ast": false,
  "sourceMaps": true,
  "configFile": false,
  "babelrc": false,
  "parserOpts": {
    "plugins": [
      "jsx",
      "typescript"
    ]
  }
}

The React plugin - which works correctly - uses this options for the same babel.transformAsync line:
https://github.com/vitejs/vite-plugin-react/blob/1583c5d727265faa668ab3d7009736e9fc01ec9c/packages/plugin-react/src/index.ts#L303

{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
transforming (1) src/main.tsx{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}
transforming (10) ../node_modules/.pnpm/react@19.1.0/node_modules/react/index.js{
  "babelrc": false,
  "configFile": false,
  "presets": [
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@stylexjs/babel-plugin",
      {
        "dev": false,
        "test": false,
        "runtimeInjection": false,
        "treeshakeCompensation": true,
        "unstable_moduleResolution": {
          "type": "commonJS"
        },
        "aliases": {
          "@alias/*": "/vite_stylex_react/alias/*"
        }
      }
    ]
  ],
  "overrides": [],
  "parserOpts": {
    "plugins": []
  }
}

Can you have a look at these options, and point it out to me where can the StyleX parsing bug happen in the Solid version? The React version works correctly.

// I also asked this in Babel discussions:
babel/babel#17408

[jp-knj]

[hyperknot]

Please don't post AI slop.