Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vite lossily combines `link[rel=stylesheet]` and `link[rel=stylesheet][media="(prefers-color-scheme:dark)"]`

See original GitHub issue

Describe the bug

Vite lossily (note the media attribute) combines

<link rel=stylesheet href="a.css" />
<link rel=stylesheet href="b.css" media="(prefers-color-scheme:dark)" />

<link rel=stylesheet href="c123.css" />

How to prevent this? Ideally both files were optimized and name-hashed, but not combined into one and the media attribute preserved:

<link rel=stylesheet href="a123.css" />
<link rel=stylesheet href="b456.css" media="(prefers-color-scheme:dark)" />

Reproduction

https://stackblitz.com/edit/vitejs-vite-tbytgv?devtoolsheight=33&file=index.html

System Info

N/A

Used Package Manager

npm

Logs

❯ npm run build
$ vite build
vite v2.7.13 building for production...
✓ 3 modules transformed.
dist/assets/favicon.17e50649.svg   1.49 KiB
dist/index.html                    0.35 KiB
dist/assets/index.3d17f766.css     0.05 KiB / gzip: 0.05 KiB

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
The provided reproduction is a minimal reproducible example of the bug.

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

surmacommented, Jul 20, 2022

I ran into this issue, because I provide print styles and screen styles:

<!doctype html>
<link rel="stylesheet" href="/screen.css" media="screen" />
<link rel="stylesheet" href="/print.css" media="print" />

Only ever one of these files should load. But vite combines them into one, breaking my site a bit 😅

1reaction

Lastor-Chencommented, May 19, 2022

Hello, I have same issues for this. I want to split scss files into mobile and desktop for mobile optimization. It’s working on serve mode. (css is the same)

<link rel="stylesheet" href="/src/styles/mobile.scss">
<link rel="stylesheet" href="/src/styles/desktop.scss" media="(min-width: 768px)">

But vite combie these on build and lost the media attribute.

<link rel="stylesheet" href="/assets/style.c5411e4b.css">

I tried to set rollup options like this.

// vite.config
export default defineConfig({
  return {
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('.scss')) {
              // e.g. ".../styles/desktop.scss" to "desktop"
              const cssName = id.split('styles/')[1].split('.')[0]
              return cssName
            }
          },
        },
      },
    },
  }
})

vite split the css files as expected. but still could not save the media attribute. So I manually add the media attribute after build.

// build output
<link rel="stylesheet" href="/assets/mobile.6f120d68.css">
<link rel="stylesheet" href="/assets/desktop.76768932.css">

I saw PR #6751, will this feature be released in the next version?

Edit

Well, I thought link media would allow browser to automatically choose which one to download. But it doesn’t seem to work that way. I got it wrong.

Top Results From Across the Web

The External Resource Link element - HTML - MDN Web Docs

The HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link ...

Features | Vite

Vite is pre-configured to support CSS @import inlining via postcss-import . Vite aliases are also respected for CSS @import . In addition, all...

What is the utility of the media attribute in the Link tag?

First render at 1100ms; The style rendering is deferred until all css are downloaded and parsed (CSS render blocking). The second version using ......

A Complete Guide to CSS Media Queries

CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles based on those ...

Media queries - web.dev