The documented Turbopack/StyleX setup produces different layout output from the Babel StyleX setup for the same Astryx template.

[dxwizco]

Description

The TopNavMegaMenu template (https://astryx.atmeta.com/templates?preview=shell-top-nav) renders with incorrect grid spacing when using the documented @stylexswc/nextjs-plugin/turbopack integration in a Next.js 16.3.5 project.

The same Astryx template and component code renders correctly when StyleX is compiled using @stylexjs/babel-plugin.

The issue appears to be related to the generated StyleX/CSS output rather than the component code itself.

Expected:

C1 | C2 | C3

Actual:

C1 | C2 | empty | empty | C3

The important comparison is that the same template works correctly in the Astryx template preview and in another Next.js 16.3.5 project, while this fresh project shows the incorrect spacing when using the Turbopack StyleX plugin.

Switching the project to the Babel StyleX configuration makes the layout render correctly.

This makes it appear that the Turbopack/SWC StyleX compilation path may be generating different CSS/class output from the Babel StyleX compilation path for this Astryx component.

Reproduction

Environment

• Next.js: 16.3.5
• React: 19.3.0
• @astryxdesign/core: 0.6.2
• @astryxdesign/theme-neutral: 0.6.2
• @stylexjs/stylex: 0.19.1
• @stylexswc/nextjs-plugin: 0.18.6
• Bundler: Turbopack
• pnpm: 12.4.2

Steps

1. Create a fresh Next.js 16.3.5 project.
2. Install the Astryx packages and @stylexswc/nextjs-plugin.
3. Configure the Turbopack plugin:

import stylexPlugin from "@stylexswc/nextjs-plugin/turbopack";

const nextConfig = {};

export default stylexPlugin({
  rsOptions: {
    aliases: {
      "@/*": ["./src/*"],
    },
    unstable_moduleResolution: {
      type: "commonJS",
    },
  },
})(nextConfig);

4. Install/copy the shell-top-nav template without modifying its component implementation.
5. Run:

pnpm dev

6. Open the page and inspect the TopNavMegaMenu layout.

The Grid columns={2} gap={2} inside the mega menu does not produce the expected layout and shows unexpected horizontal spacing.

Comparison

The same template works correctly when using the Babel StyleX compiler:

@stylexjs/babel-plugin@0.19.1

with the corresponding babel.config.js.

Adding @stylex; to globals.css without the required StyleX PostCSS configuration produces:

Unknown at rule: @stylex

Adding the PostCSS plugin alone does not resolve the layout issue.

Expected result

The template should render the same layout with the documented Turbopack StyleX integration as it does with the Babel StyleX configuration.

Actual result

The layout differs when using @stylexswc/nextjs-plugin/turbopack, while the Babel configuration produces the expected layout.

package.json — Working (Babel/StyleX)

{
  "name": "astryx-working",
  "version": "0.1.0",
  "private": true,
  "astryx": {
    "theme": "@astryxdesign/theme-neutral"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "@astryxdesign/cli": "^0.6.2",
    "@astryxdesign/core": "^0.6.2",
    "@astryxdesign/theme-neutral": "^0.6.2",
    "@heroicons/react": "^2.2.0",
    "@stylexjs/stylex": "^0.19.1",
    "next": "16.3.5",
    "react": "19.3.0",
    "react-dom": "19.3.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^8.0.1",
    "@babel/preset-typescript": "^8.0.1",
    "@stylexjs/babel-plugin": "^0.19.1",
    "@stylexjs/postcss-plugin": "^0.19.1",
    "@types/node": "^26.6.1",
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0",
    "autoprefixer": "^10.6.1",
    "eslint": "^10.10.0",
    "eslint-config-next": "16.3.5",
    "typescript": "^7.0.2"
  },
}

package.json — Not working (Turbopack/StyleX SWC)

{
  "name": "astryx-notworking",
  "version": "0.1.0",
  "private": true,
  "astryx": {
    "theme": "@astryxdesign/theme-neutral"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "@astryxdesign/cli": "^0.6.2",
    "@astryxdesign/core": "^0.6.2",
    "@astryxdesign/theme-neutral": "^0.6.2",
    "@heroicons/react": "^2.2.0",
    "@stylexjs/stylex": "^0.19.1",
    "next": "16.3.5",
    "react": "19.3.0",
    "react-dom": "19.3.0"
  },
  "devDependencies": {
    "@stylexswc/nextjs-plugin": "^0.18.6",
    "@types/node": "^26.6.1",
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0",
    "eslint": "^10.10.0",
    "eslint-config-next": "16.3.5",
    "typescript": "^7.0.2"
  },
}

Astryx Version

"@astryxdesign/core": "^0.6.2",

Environment

Environment

• OS: Windows 11
• Node.js: [your Node.js version]
• pnpm: 12.4.2
• Next.js: 16.3.5
• React: 19.3.0
• @astryxdesign/core: 0.6.2
• @astryxdesign/theme-neutral: 0.6.2
• @stylexjs/stylex: 0.19.1
• @stylexswc/nextjs-plugin: 0.18.6
• Bundler: Turbopack
• Browser: [e.g. Chrome 140.x]