ElMassimo / ElMassimo/vite_ruby

Fail to load styles from js files when it conflicts with stylesheet tag

Open
#418 0 comments 0 reactions 0 assignees View on GitHub
bug: pending triage
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.