css import order changes between ssr: false and ssr: true
I have been working towards enabling ssr so I can get prerendering working for some of my unauthenticated routes, and now that I have it building I noticed the styles are all messed up. and it's because it isn't using the same css import order when ssr is enabled as when it isn't.
I tried combining all my stylesheets together by importing them in my sass file, and that seems to resolve the issue, but it's not possible to make sure that the css modules are loaded after the initial index.css in that case, so the library css I'm using tends to override the module css.
any ideas?
5 Replies
Can you share how you import css/sass files and use them?
Sorry, I wanted to create a reproducible example before replying -- but at this point it seems like that might be a while.
I am doing scss imports from the main app.tsx
import '@picocss/pico/css/pico.colors.min.css';
import './pico-themes.scss';
import '@picocss/pico/css/pico.blue.min.css';
import './pico-mods.css';
import './index.scss';
import '~/lib/animations.scss';
then lazy importing specific routes
const FeaturedByPage = lazy(() => import('./routes/pub/featured-by/page'));
const NotFoundPage = lazy(() => import('./routes/NotFound'));
and these imports could have css imports, or css module imports
and using a router
<Router>
<Route component={LandingPage} />
{/* <ShowOnMount> */}
<Route path='/about' component={AboutPage} />
<Route path='/pricing' component={PricingPage} />
ssr: false, the css is imported in import order so if the specificity is the same, the last imported style is what gets applied.
ssr: true, if the specificity is the same, the pico styles are overriding index.scss imports etc
Maybe this will help: Theres a comment in the issue with a workaround. This seems to be a Vite issue.
https://github.com/vitejs/vite/issues/3924#issuecomment-2292140776
GitHub
Vite injects css assets in wrong order with dynamic import and css ...
Describe the bug Vite injects css assets in wrong order with dynamic import and css modules. Reproduction Repo to reproduce For example: You have component Button with default styles (text color: r...
ah, I didn't think to use css @layers to fix the problem, thanks! it's weird that it works differently when ssr:false vs ssr:true I figured it was vinxi related
It may be different because SolidStart is streaming in chunks.
That’s why tailwindcss / panda css became so popular. You don’t run into these issues.