CSS imported in layout is global regardless of the layout

[hipstersmoothie]

I have the following

pages/
  some-route/
       _layout.tsx
  other-router/
       _layout.tsx
  _layout.tsx

I have some global styles I want to only apply on some-route/ and not outer-route/. I tried to move them to just that layout that applies to some-route/ but the CSS is present on all pages

[dai-shi]

I think it's simply unsupported. @Aslemammad thoughts?

Currently, we simply use Vite to collect CSS styles, so it's like SPA.
We know this approach has a limitation and we may look for a new approach, but I'm not sure if route-based style will be supported with it.

[hipstersmoothie]

I feel like this could be a pretty powerful pattern to support!

[hipstersmoothie]

Seems simple to support

https://vitejs.dev/config/build-options.html#build-csscodesplit

[dai-shi]

Thanks for the link. I'm not sure if it's that simple, because Waku supports RSC without SSR. But, we should definitely improve the CSS handling and code splitting for styles is something that should be addressed.

[rmarscher]

It would be interesting to experiment with React 19 style hoisting instead of importing css through vite. https://react.dev/reference/react-dom/components/style

[dai-shi]

Yes, that would be interesting. It's not on the roadmap explicitly, but something we should investigate. Feel free to experiment.