Does the nextjs plugin require using app directory?

[shawngustaw]

I'm experiencing some odd behavior whenever I try to use styles that involve media queries. Everything works fine, but as soon as I do something like this:

const DARK = '@media (prefers-color-scheme: dark)';

export const colors = stylex.defineVars({
  primaryText: {default: 'black', [DARK]: 'white'},
});

the styles of my entire app break - the classes are all generated but no stylesheet is included. I'm wondering if this related to app directory vs pages? I tried to create a reproducible example and I actually can't get styles to work at all if I only use the pages directory when using the latest nextjs version. I also noticed unless I include a globals.css file in my app/layout.tsx file the same issue occurs in app router.

I'm still on Next 13 using pages directory - is there anything I'm missing? Any hints as to why this is happening?

[nmn]

Yes the included nextjs plugin only works with app directory. The plugin for pages directory is simpler, however, so if you can share a stackblitz example, I'll be happy to help you.

[nmn]

Hey, I've updated https://github.com/nmn/nextjs-app-dir-stylex with a new pages branch that should mostly work.

Everything for production builds is working from what I can tell. However, during development (npm run dev), support theming is broken. I'm not completely sure why this is happenning, and it might be a bug in StyleX so I will verify.

[nmn]

There are some bugs with HMR as well, so I don't think the pages directory is going to be a very good experience at the moment. I've already reached out to people at Vercel for help making the integration better.

[shawngustaw]

Hmm, if that's the case I think I might start the migration to app router. I think I'm still also seeing issues which may be resolved once #202 is merged so I'll keep you posted. Thanks again for the quick response!

[nmn]

The Pages directory is being weird to be honest, because even with runtime style injection, styles aren't being injected consistently. I last tried to make things work within Next 12. The webpack build has changed consistently.

[nmn]

I've been thinking more about this problem and there might be a simple way to side-step Next's webpack build and make stylex work by using Rollup instead. Will report back if I make this work.

I didn't like this approach because it feels wasteful, but it's really no different than what Tailwind does, so it might be OK.