[Bug?]: import order of styles is reversed in dev mode

[elite174]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Having this:

import { BannerCarousel } from "@components/BannerCarousel/BannerCarousel";
import { Footer } from "@components/Footer/Footer";
import { Pagination } from "@components/Pagination/Pagination";
import videoGridStyles from "@components/VideoGrid/VideoGrid.module.scss";
import { VideoPreview } from "@components/VideoPreview/VideoPreview";

import styles from "./HomePage.module.scss";

HomePage styles in dev mode is on the top (incorrect), but after build it's on the bottom (correct)

Expected behavior 🤔

Order of styles should be preserved. HomePage styles should be the last one.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

solid-start rc 1

[elite174]

Looks like the problem somewhere here: https://github.com/nksaraf/vinxi/blob/6f3d81beabc8cf003c0095eb9b44198ed02f2784/packages/vinxi-solid/lazy-route.jsx

or in function appendStyles

[elite174]

I do want to fix this, because it makes development really difficult and buggy, especially when you do solid-start for work. @nksaraf how can I help with that? It's difficult to understand in the code what's going on. Importing styles should be DFS, but now it looks more like a BFS.

[elite174]

Investigating: the order of styles is described here: https://github.com/nksaraf/vinxi/blob/6f3d81beabc8cf003c0095eb9b44198ed02f2784/packages/vinxi/lib/manifest/collect-styles.js#L4

Maybe the problem should be fixed here.