Cleanup of DOM when moving between routes?

[antonisprovidakis]

A disclaimer:
I've never used Remix, so some things might not apply 100%, but I think you'll get what I'm trying to ask here.

---

Different routes have different dependencies, styles, scripts, etc.
So, for example, when we land on a route/page, a <link rel="stylesheet" type="text/css" href="styles1.css"> is added in the head, styles are downloaded and then applied.

Now, we navigate to another route which has a different dependency. Again, <link rel="stylesheet" type="text/css" href="styles2.css"> is added in the head, and so on.

Is there a way that Remix keeps track of those dependencies which are no longer needed, and so it removes them from the DOM while you navigate from route to route? Actually it can be on the route level or it can be on component level (e.g. component not mounts and then unmounts).
If yes, can you please point to the relevant code?

I'm pretty sure I once saw a relevant tweet from @ryanflorence, but I can't find it to be honest.

I'm working on an SPA, which has multiple routes and components and I'm using css modules.
As you understand, after a while of navigating between routes or mounting new components, etc. the DOM keeps growing.
So I'd like to know if there is a way to keep DOM clean.

[kiliman]

Remix supports linked styles at the route level, but not at the component level. You can use CSS Modules for components.

For route-level CSS, do this in your route:

// routes/some-route.tsx
import styles from '~/styles/some-route.css?url'

export const links = [
  { rel: 'stylesheet', href: styles }
]

Remix will then add the <link> when you're on that route, and remove it when you navigate away.

NOTE: Nested routes will still keep the styles as long as the parent route is active.

[antonisprovidakis]

Thank you 🙇
Can you, please, provide a link to the actual code that handles that?

[kiliman]

Not sure where in the code it handles this off the top of my head, but here's the documentation for it.

https://remix.run/docs/en/main/styling/css