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.

[dai-shi]

As I understand, there are two approaches.

1. Use React feature <style>
2. Use Vite feature https://vite.dev/guide/features.html#css

For 1, it's already working if we use <style>. Otherwise, style libraries needs to follow React 19 convention and it's not Waku's responsibility.
For 2, it would be Waku's responsibility, but my knowledge isn't enough at the moment. It shouldn't be Waku's specific problem, so there might be some existing ways out there.

I hope someone can help this.

[Suzan-Dev]

For me, I used CSS Modules (https://vite.dev/guide/features.html#css-modules)
<button className={styles.button}>Click me</button>
worked well but there was typescript error

Cannot find module './style.module.css' or its corresponding type declarations

so, I just added css.d.ts file myself with

declare module "*.module.css" {
  const classes: { readonly [key: string]: string };
  export default classes;
}

[dai-shi]

That's what I did too.
https://github.com/wakujs/waku/blob/92758b9c72c2292a9883d1e727c0084148dd8d57/examples/04_cssmodules/src/types.d.ts

Yours seems better. Would mind opening a PR?

[Suzan-Dev]

That's what I did too. https://github.com/wakujs/waku/blob/92758b9c72c2292a9883d1e727c0084148dd8d57/examples/04_cssmodules/src/types.d.ts

Yours seems better. Would mind opening a PR?

To update the cssmodules example or to include it in waku itself?

[dai-shi]

Simply change this file only: https://github.com/wakujs/waku/blob/main/examples/04_cssmodules/src/types.d.ts

[Suzan-Dev]

@dai-shi here's the PR #1369
so the question is are we still going to support global css by page or ask user to use CSS modules instead?

[dai-shi]

I think it's a different issue.
I think it would be nice to support css with react features (instead of vite features). We will probably look into it after v1 release. But, I'm happy if people experiment it before that. (Note that it requires decent knowledge around React 19.)

Meanwhile, suggesting css modules would be a workaround.