How to style _layout.tsx?

[maurictg]

Hi, I am unable to style a layout.

Environment and reproduction steps:

• Deno 2.8, Fresh 2.3.3
• Create a new Deno project, created with deno run -Ar jsr:@fresh/init
• Make sure you have the following files in the routes folder:

index.tsx

import { define } from "@/utils.ts";
import '@/assets/index.css';
export default define.page(function Home() {
  return (
    <div>Hello world</div>
  );
});

_layout.tsx

import { define } from "@/utils.ts";
import '@/assets/layout.css';
export default define.layout(function Layout({ Component }) {
  return (
    <div>
      <h1 class="layout">Layout</h1>
      <Component />
    </div>
  );
});

assets/layout.css

h1.layout {
    color: red;
}

assets/index.css

h1.test {
    color: green;
}

Result: h1 in index.tsx is colored green, but h1 in layout is not colored red - which is what I should expect.

After running deno task build I have the following files:
_fresh/client/assets/_fresh-route___test-XXXX.css

h1.test{color:green}

_fresh/client/assets/server-entry-XXXX.css

h1.layout{color:red}

So the styles are present. HOWEVER, that server-entry file is never served; so it won't do anything.

Question: is this a bug, should Fresh serve that server-entry.css? Or am I misunderstanding the way of styling?

• No, I don't want Tailwind CSS.
• This issue is written by a human
• Claude and other AIs were unable to solve this problem

Can anyone help? And explain to me what that server-entry CSS file is?

[Hajime-san]

• fix: CSS modules not working in _app/_layout/_error and across routes in non-island components #3781

I think it could be resolved by the PR if it released.