Usage with Next.js - Page specific styles

[hamlim]

Apologies if this question was asked elsewhere already (couldn't find one that discussed this as either an issue or discussion here or on the Next.js repo).

I'm attempting to leverage vanilla-extract with Next.js, it works perfectly in development and works well for individual components within the experience as well. However if I add styles for a page of my application, during a production build Next will error out with the following message:

> Build optimization failed: found pages without a React Component as default export in
pages/index.css

Example directory structure:

src/
  pages/
    index.tsx
    index.css.ts

I could move these styles to some shared components in another directory, e.g. src/components/shared.tsx + src/components/shared.css.ts, however I'd like to colocate the styles with the pages if possible.

Is there something I may be missing with the configuration that would resolve this? (I'm using the recommended @vanilla-extract/next-plugin setup)

[siuvdlec]

The file-system based router is the feature that I dislike the most about next.js, but it offers some implicit benefits so we use it but only as an entry point. So our folder structure is:

src/
  pages/
   index.tsx
  views/
    home/
      components/..
      _test_/..
      index.tsx
      index.css.ts

This is useful if you need to manage other custom components for that view or if you want to add a test directory