Switch to css modules

[jas7457]

This follows a conversation that was had on slack regarding whether to push people towards css modules or not during the switch to vite. Since ?url does not work properly for production, we can use css modules for now.

I removed some global html,body styles that I thought were superfluous, but if you disagree, let me know and we can import it globally.

[patrickDouglas]

Hm, question about this. Originally, this style would apply to ALL h1 and p tags, right? But now it's only those with the given class. Wouldn't this be better to just apply whatever Module Class name is generated to the outer most component in the render function, and still get these applied?

[patrickDouglas]

Or maybe use the :global exception? https://github.com/css-modules/css-modules#exceptions

[jas7457]

Hm, question about this. Originally, this style would apply to ALL h1 and p tags, right?

Before the switch to vite, it would apply to all h1 and p tags on the route, but would then be removed on route transition and not affect other routes. We could change it to something like .index h1, .index p, but TBH, I've always disliked styling based on tags and would shy away from it. A good example is if we used the Polaris <Text> component and it ends up rendering an h1 or a p, do we really want to style the output of the <Text> component? Probably not.

Or maybe use the :global exception?

We wouldn't want to use global, because that would change every h1, p, etc in the app to use those styles, and would not be removed on route change.

[paulomarg]

I think this is fair - if the styles would linger after a route is unloaded, then we should be specific with them here.

Should we use more semantic class names, like we do for .index and .content, as opposed to more generic ones like .h1? I feel like that might also alleviate some of the "weirdness" of switching to classes.

[jas7457]

Yeah I'm fine with using more semantic class names, I was debating that, good call out.