ElMassimo / ElMassimo/vite_ruby
Fail to load styles from js files when it conflicts with stylesheet tag
- Dominant language
- Ruby
- Stars
- 1.6k
- Forks
- 149
- Avg merge
- 5h 13m
- Merged PRs (30d)
- 2
Description
Hi, I am having a issue with loading my styles. I have `application.js` and `application.css`. `application.css` has styles in it and `application.js` bundles all my javascript. One of my js files import a css file. Vite will output two application-.css files like it should but it will load the same asset twice and the other styles zero times.
I have created a reproduction application. https://github.com/stoivo/demo-rails-vite-issue. When going to the root path the red and blue box should be filled with color.
I did a bit of research myself. Not sure if it's usefull but I want to let you know.
It works differently in with and without the vite devserver.
When requesting the root path while the devserver is running, it look like this.
```html
ViteApplicationDemo
Post#index
Find me in app/views/post/index.html.erb
```
vite devserver is inlineing the css from appliation.js so it becomes
```html
ViteApplicationDemo
.blue-fill{ background: blue; }
Post#index
Find me in app/views/post/index.html.erb
```
and the red and blue are filled with colors.
When I run rails server without vite I get the following html
```html
ViteApplicationDemo
Post#index
Find me in app/views/post/index.html.erb
```
As you see it refers to application-d6945d36.css twice. The only the blue box is colored, but not the red
looking at the manifest created
```
# output from when it it compiling assets
transforming...
✓ 3 modules transformed.
rendering chunks...
computing gzip size...
../../public/vite-dev/manifest-assets.json 0.00 kB │ gzip: 0.02 kB
../../public/vite-dev/manifest.json 0.34 kB │ gzip: 0.15 kB
../../public/vite-dev/assets/application-69b43dd1.css 0.03 kB │ gzip: 0.05 kB
../../public/vite-dev/assets/application-d6945d36.css 0.03 kB │ gzip: 0.05 kB
../../public/vite-dev/assets/application-d2136a89.js 0.03 kB │ gzip: 0.05 kB
✓ built in 30ms
Build with Vite complete: /Users/simon/Downloads/ViteApplicationDemo/public/vite-dev
# public/vite-dev/manifest-assets.json
{}
# public/vite-dev/manifest.json
{
"entrypoints/application.css": {
"file": "assets/application-d6945d36.css",
"src": "entrypoints/application.css"
},
"entrypoints/application.js": {
"css": [
"assets/application-d6945d36.css"
],
"file": "assets/application-d2136a89.js",
"isEntry": true,
"src": "entrypoints/application.js"
}
}
```
What do you think? What can we do about it? If we can't fix it maybe we can raise some error if somebody tries to do this?
Contributor guide
Assessment
This issue has not been assessed yet.