issue of stylexjs refusing to work with Next 15 pages router but works in app router

[Lolhp0]

Hey, I've tried using stylexjs with app router and it works. but when i tried using it with pages router, Im getting an issue of stylex adding class names to the elements but not applying styles to those classes. heres the codes:

next.config.ts

import type { NextConfig } from "next";
import stylexPlugin from "@stylexjs/nextjs-plugin";


const nextConfig: NextConfig = {
  /* config options here */
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  transpilePackages: ["@stylexjs/open-props"],
};


const __dirname = new URL(".", import.meta.url).pathname;

export default stylexPlugin({
  rootDir: __dirname,
})(nextConfig);

.babelrc.js

module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: process.env.NODE_ENV === "development",
        test: process.env.NODE_ENV === "test",
        runtimeInjection: false,
        genConditionalClasses: true,
        treeshakeCompensation: true,
        unstable_moduleResolution: {
          type: "commonJS",
          rootDir: __dirname,
        },
      },
    ],
  ],
};

index.tsx

import * as stylex from "@stylexjs/stylex"

export default function Home() {
  return (
    <>
      <div {...stylex.props(styles.container)}></div>
    </>
  );
}

const styles = stylex.create({
  container: {
    width: "100%",
    minHeight: "100dvh",
    background: "green"
  },
});

[nmn]

The @stylexjs/next-plugin is only tested to work on app/ directory. Please use a next project with a src directory and @stylexjs/cli instead for a more reliable experience. (We will also be improving the CLI further soon)

The CLI will work with app/ or pages/ directory as long as it is in an src/ folder.

The process to use it is as follows:

• Create new project with an src/ folder
• Rename src/ to source/ instead
• Update the tsconfig.json and .gitignore to ignore the src folder
• Set up the CLI to compile source/ into src/.

See this PR for an example: #618

Some caveats:

• The CLI currently doesn't handle @/ aliases correctly. You will have to use relative imports for now. (Should be fixed very soon)
• The CLI has some bugs if you want to also process packages that use StyleX, so using it with a mono-repo might be challenging.
• When using a global CSS file for resets etc, it may accidentally override StyleX styles. (fixing this very soon as well)

[Lolhp0]

alright ill try it and if i have issues ill make sure to open a new post. thanks for the help