I have a demo of the bug I'm seeing on a larger project reproduced here:
https://codesandbox.io/p/sandbox/next-js-redundant-importing-793szd

If you inspect the language selector (the 'en' at the top) you'll see the .picker class is duplicated in both the page and layout CSS files. I've narrowed down the cause to using an index file and if I just import each piece from it's file directly it all works, however that makes imports way more verbose and I'd like to avoid that.

If you look at the language feature folder you'll see a root-level index.ts that re-exports the language helper file and the LanguagePicker component. The LangaugePicker gets used in the Header component (used in layout.tsx) . The languages array is used on the /[lang]/page.tsx file and in the LanguagePicker component.

If I change the import in page.tsx from:

import { languages } from "@/features/language/";

to

import { languages } from "@/features/language/helpers/languages";

I no longer get the duplicate CSS in the page and layout CSS files. I was hoping to avoid this but I'm not sure if I can. Has anyone run into this and is there a solution I'm missing?