Comments (5)
sabercoy
commented on July 30, 2024
2
Would you like to put some details about the issue and workaround for people coming here later.
The desired behavior is to use CSS Modules and have no visible style changes once the page loads (this is caused by CSS files being loaded in and parsed after the browser has already painted the screen)
The issue begins with how vite behaves differently between its dev server and its build output
In dev, your styles are injected into the initial document, you are not given separate CSS files. This means that you will not see style changes, for all of your styles are there in the beginning globally.
When building, vite takes your styles and separates them into CSS files that get loaded at different times depending on when they are needed. In the case of SolidStart and vinxi, these CSS files are loaded in as part of "modulepreload" functionality. This is intended to have your assets loaded in the background upon an action (such as hovering an anchor tag) so that the page transition happens faster.
The modulepreload functionality is nice during page transition, but awkward during initial load of the page. These CSS files for the page you are loading are fetched by JavaScript, not by link tags in your document's head, so the browser does not wait for them before painting the screen, so when they arrive its too late and you see style changes.
This is not an issue when cssCodeSplit is set to false (it makes just 1 CSS file with ALL styles thats loaded with the initial document) but there are bugs I ran into with this vitejs/vite#1141 (comment)
It is also not an issue with Tailwind because this also just puts all utility classes into 1 CSS file loaded with the initial document.
So what is the workaround for CSS Modules? On initial page load, I check which route path I am entering and inline the CSS Module styles into the document:
import styles_home from '#/routes/pages/home/(home).module.css?inline'
import styles_upload from '#/routes/pages/upload/(upload).module.css?inline'
export default createHandler((context) => (
<StartServer
document={(props) => {
return (
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<style>{context.path === '/' ? styles_home : styles_upload}</style>
{props.assets}
</head>
<body>
<div id='app'>{props.children}</div>
{props.scripts}
</body>
</html>
)
}}
/>
))This will immediately apply the necessary styles, while also still loading (and caching) the separate CSS file, so no change in styles can be seen.
This solution may imply that all route paths can only have 1 CSS file, for having more CSS files further down in the route paths may result in the same issue (and needing to inline more styles with more route logic) but this works for my use case.
from vinxi.
nksaraf
commented on July 30, 2024
Should be fixed in v0.0.63 (#80)
from vinxi.
sabercoy
commented on July 30, 2024
Should be fixed in v0.0.63 (#80)
I am still experiencing this in 0.1.1
from vinxi.
sabercoy
commented on July 30, 2024
After more research this seems to be a behavior of vite and not a bug. I have found a workaround. No worries!
from vinxi.
nksaraf
commented on July 30, 2024
Would you like to put some details about the issue and workaround for people coming here later.
from vinxi.
Related Issues (20)
- Outer variables referenced inside "use server" get treeshaken away. HOT 4
- build continues after failure
- use with vite-env-only HOT 2
- How do I attach a debugger to a process running in `vinxi`? HOT 1
- Add mode flag HOT 1
- [Feature] ability to load multiple featureApps from separate host/sub-domain HOT 2
- exporting a `class` from `"use server"` results in a compile error. HOT 1
- Missing types for `https` object in `server` section. HOT 2
- Imports that should be server-only aren't removed in dev if `verbatimModuleSyntax: true`
- How to add instrumentation to vinxi powered app? HOT 1
- [Proposal] Bundle config file to some outdir
- [BUGS] Styles in prod are injected twice and have wrong order HOT 39
- Extra ./node_modules/ folder created just for .vinxi
- Unable to load static assets in AWS Lambda HOT 2
- Assets incorrectly loaded from unrelated page HOT 1
- Breaking bug in CSS handling in 0.13.3 HOT 3
- The function findAssetsInViteManifest can slow down SSR significantly HOT 11
- Consider adding a README.md to the main `vinxi` package HOT 2
- Some bug in Vite < 5.3.2 or lightnin/sass/... causes parsing exception during prod build
- WebSocket with fs router support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vinxi.