Issue with CSS not being imported in preload

[cyocun]

Hello, I am experiencing an issue where CSS files that should be preloaded are not being imported correctly when using the getPreloadTags function. This is specifically happening with JavaScript files, but their associated CSS is being ignored.

Issue Details The getPreloadTags function retrieves only JavaScript files set to be preloaded. In my project, there are CSS files associated with these JavaScript files, which should also be preloaded but are overlooked.

Specific Example For instance, the CSS file for _NewsViewer-RVxJboXR.js, which is supposed to be loaded with "assets/js/news.ts", is actually not being loaded. Here is a snippet of my configuration:

{
  "../node_modules/gsap/ScrollToPlugin.js": {
    "file": "js/ScrollToPlugin-m5fB07MO.js",
    "isDynamicEntry": true,
    "src": "../node_modules/gsap/ScrollToPlugin.js"
  },
  "_NewsViewer-!~{00c}~.js": {
    "file": "css/NewsViewer-QMHCohq6.css",
    "src": "_NewsViewer-!~{00c}~.js"
  },
  "_NewsViewer-RVxJboXR.js": {
    "css": [
      "css/NewsViewer-QMHCohq6.css"
    ],
    "file": "js/NewsViewer-RVxJboXR.js",
    "imports": [
      "_index-PSRgZBYE.js",
      "_index-35H_NU9g.js",
      "_ScrollTrigger-532t8Yj4.js"
    ]
  },
  "_ScrollTrigger-532t8Yj4.js": {
    "file": "js/ScrollTrigger-532t8Yj4.js"
  },

...

  "assets/js/news.ts": {
    "css": [
      "css/news-eg2dUq-U.css"
    ],
    "file": "js/news-w1vu3k_v.js",
    "imports": [
      "_NewsViewer-RVxJboXR.js",
      "_index-PSRgZBYE.js",
      "_index-35H_NU9g.js",
      "_ScrollTrigger-532t8Yj4.js"
    ],
    "isEntry": true,
    "src": "assets/js/news.ts"
  }
}

Attempted Solutions I am currently considering manually adding specific CSS files to the preload list, but this doesn't seem like an optimal solution.

Questions How can I ensure that CSS files included in the preload list are properly loaded using the getPreloadTags function (or any other method)? Is there a way to automatically include CSS files in the preload list along with JavaScript files?

Any suggestions or advice would be greatly appreciated. Thank you in advance.

[idleberg]

Would you say this is a bug or more of a feature request?

In general, I'd like to follow the defaults of Vite and its first-party ecosystem. That means I need to verify the behaviour using one of the default plugins (e.g. Svelte, Vue, etc.) Can you assist me by providing a minimal example that illustrates what you describe. I assume you have a JavaScript file (NewsViewer?) that has an import for CSS?

[cyocun]

I believe this issue arose from importing CSS in a JS file (actually TS), which is not an uncommon use case. For instance, importing CSS that comes with a library directly into JS. So, this is, hmm, not exactly a bug, but rather a feature that should be present! So, I would classify it as a request 🙂

I plan to prepare a simple sample file, but it might take some time. Please bear with me.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 14 days with no activity.