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

stoivo · 2023-11-10T15:38:10Z

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.

<!DOCTYPE html>
<html>
  <head>
    <title>ViteApplicationDemo</title>
    <script src="/vite-dev/@vite/client" crossorigin="anonymous" type="module"></script>
    <link rel="stylesheet" href="/vite-dev/entrypoints/application.css" />
    <script src="/vite-dev/entrypoints/application.js" crossorigin="anonymous" type="module"></script>
  </head>

  <body>
    <h1>Post#index</h1>
<p>Find me in app/views/post/index.html.erb</p>

<div class="red-fill" style="height: 100px; width: 100px; border: 5px solid blue;"></div>
<div class="blue-fill" style="height: 100px; width: 100px; border: 5px solid blue;"></div>
  </body>
</html>

vite devserver is inlineing the css from appliation.js so it becomes

<html><head>
    <title>ViteApplicationDemo</title>
    <script src="/vite-dev/@vite/client" crossorigin="anonymous" type="module"></script>
    <link rel="stylesheet" href="/vite-dev/entrypoints/application.css">
    <script src="/vite-dev/entrypoints/application.js" crossorigin="anonymous" type="module"></script>
  <style type="text/css" data-vite-dev-id="/Users/simon/Downloads/ViteApplicationDemo/app/javascript/blue.css">.blue-fill{ background: blue; }
</style></head>

  <body>
    <h1>Post#index</h1>
<p>Find me in app/views/post/index.html.erb</p>

<div class="red-fill" style="height: 100px; width: 100px; border: 5px solid blue;"></div>
<div class="blue-fill" style="height: 100px; width: 100px; border: 5px solid blue;"></div>
</body></html>

and the red and blue are filled with colors.

When I run rails server without vite I get the following html

<!DOCTYPE html>
<html>
  <head>
    <title>ViteApplicationDemo</title>

    <link rel="stylesheet" href="/vite-dev/assets/application-d6945d36.css" />
    <script src="/vite-dev/assets/application-d2136a89.js" crossorigin="anonymous" type="module"></script>
    <link rel="stylesheet" href="/vite-dev/assets/application-d6945d36.css" media="screen" />
  </head>

  <body>
    <h1>Post#index</h1>
<p>Find me in app/views/post/index.html.erb</p>

<div class="red-fill" style="height: 100px; width: 100px; border: 5px solid blue;"></div>
<div class="blue-fill" style="height: 100px; width: 100px; border: 5px solid blue;"></div>

  </body>
</html>

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?

The text was updated successfully, but these errors were encountered:

stoivo added the bug: pending triage Something doesn't seem to be working, but hasn't been verified label Nov 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

stoivo commented Nov 10, 2023

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

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

Comments

stoivo commented Nov 10, 2023