The component classNames not compiling inside route style file

[yulafezmesi]

Hi, thank you for building the great workaround.

I came across small details while testing things out. so, the classNames inside the component not being compile inside the routeName.css file, instead of compiling root.css file. I tried to reproduce this issue.

Created a tiny component and imported in the index.tsx file, i expected that the text-red-500 class name will be compiled in styles/index.tsx, not inside root.css. Am I missing something?

https://stackblitz.com/edit/node-lxyfa7?file=app%2Fcomponents%2FButton.tsx

Thanks.

[brookslybrand]

Hey, good question I probably didn't do a great job explaining anywhere.

Basically any styles in the components folder are automatically added to root.css. The reason for this is because it's quite difficult to figure out all the various places a component is being used.

Ideally, we would just look through all of the different routes and figure out everywhere a component is used in each branch, and provide the styles at the earliest point in the tree that we can. However, this alone is quite a challenge. Additionally, this requires more than just looking up when a component is called inside of a route—you also need to know all the components that call those components.

All that to say, this is the expected way for this to work: everything in components/ gets put into root.css since it's much easier to reason about, and a lot less room for foot-guns. Would be awesome to see an alternative method though, so if you have any ideas, let me know!