Vite generates multiple copies of the same stylesheet

[ghost]

Describe the bug

I am using the following vite config option to make global styles available in React components without requirement of usage of "@import '../../syles/main" in each component file:

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "./src/styles/main";
        `
      }
    }
  }

it comes from #832

My main.scss looks like:

@import "./node_modules/normalize.css/normalize";

@import 'fonts';
@import 'colors';
@import 'breakpoints';
@import 'animations';
@import 'layers';

where fonts, colors, breakpoints, animations, layers include global variables.

It works fine in part I can use my variables inside component without importing the main SCSS file, but such approach causes an issue that I have multiple copies of the same stylesheet in a head section of page ( see the screenshot: https://imgur.com/a/k6hGnbP )

Reproduction

1. Create empty app (Vite, React, TSX)
2. Create a global main.scss file
3. Import partials _colors.scss and _fonts.scss to main.scss using @import
4. Create vite.config.js with option similar to described in a bug description section
5. Create at least two different components and add it to your App
6. Add some variables to colors.scss and fonts.scss
7. Use variables from colors.scss and fonts.scss in your two components from step 5 using build-in CSS modules support ([component].module.scss)
8. Run your app and look at head section

Expected result:
There is only one global stylesheet.
Actual result:
There are multiple copies of global stylesheet, where number of copies equals number of unique components,

UPDATE:
I've created a simplified app which one reproduces the issue:
https://github.com/tastytea-github/vite-global-import-issue-reproduction

1. Clone repo
2. Install deps with npm i
3. Run app with npm run dev
4. Look at head section of the rendered page in devtools

Expected state:
styles from main.scss are added globally only once.
Actual state:
styles from main.scss are included to each unique component.

System Info

No

Used Package Manager

npm

Logs

No response

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/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[akrabdev]

This may help with this issue:

vite/src/client/client.ts

Is this intended?

const supportsConstructedSheet = (() => {
  try {
    // new CSSStyleSheet()
    // return true
  } catch (e) {}
  return false
})()

Seems that

if (!style) {
     style = document.createElement('style')
     style.setAttribute('type', 'text/css')
     style.innerHTML = content
     document.head.appendChild(style) 

in updateStyle is always triggered for some reason.

[ghost]

@akrabdev

Is this intended?

Intended to what? Sorry, I didn't get what you mean. I assume the code is commented because it refers to https://wicg.github.io/construct-stylesheets/ which one is still in "A Collection of Interesting Ideas".

in updateStyle is always triggered for some reason.

Sounds truly, but I currently have no idea why.

[ghost]

Please look at simplified app I've created to see the issue reproduction (look at UPDATE in the issue description).

[jerryYuX]

I also encountered the same problem. When I used antd, the antd style generated two copies, one in the xxx.css file and the other in xxx. js file, which resulted in an increase in the total size of my bundles.

[phasetri]

This is a pretty huge issue. I tried building my project, and noticed that the compiled index.css file is enormous (over 1 MB) despite me only writing a few KB worth of CSS code. If you manually inspect the generated .css files, there are a lot of repeated CSS code.

EDIT: Currently using a workaround where I just import my global SCSS file in the top-most component of my project. In the case of Vue, it's the App.vue file:

<style lang="scss">   // Do not include the "scoped" attribute to allow the rules to propagate to the nested components.
@import "@/css/universal/universal.scss";
</style>

[jrson83]

I'm having the issue with vite-plugin-ssr. I'm building a page with preact-client-routing example as startpoint.
The issue exists inside this untouched repo. Just clone and try.

If running npm run dev the import './PageShell.css' inside PageShell.jsx is injected as stylesheet and additionally as <style /> tag in the head. You also see the styles always two times inside the styles inspector.

If running npm run build and npm run server:prod it is injected twice as stylesheet, here _default.page.client.jsx.2942c7fb.css.

I don't know if this is maybe related to vite-plugin-ssr.

[ghost]

Will check it in production build. It seems duplication of styles in dev mode is ok since Vite uses HMR. If production build doesn't generate duplicated styles, then is it enough.

[gegorov]

same problem even if you use individual imports of common scss file in scss componets files. each import ends up duplicated in final compiled styles.css. using @use instead of @import in .scss files doesn't help.

[sapphi-red]

Sorry my comment was wrong in some parts.

For the following reason, it is not a good choice to import files which include styles with additionalData since it leads to duplicated styles.

• Vite processes each css import (including sass/scss) indivisually. This is the same behavior with webpack.
• additionalData is prepended to every scss file which is imported from js.

---

For example, if you set @use 'foo.scss' to additionalData and the follwing files exists.

// foo.scss
.foo { color: red; }

// bar.scss
.bar { color: green; }

// baz.scss
.baz { color: blue; }

// main.js
import './bar.scss'
import './baz.scss'

bar.scss becomes like below.

.foo { color: red; }
.bar { color: green; }

baz.scss becomes like below.

.foo { color: red; }
.baz { color: blue; }

So the final bundled css becomes like below.

.foo { color: red; }
.bar { color: green; }
.foo { color: red; }
.baz { color: blue; }

If all the scss is bundled at once, it could be deduped. But that is not possible to do during dev and also makes css splitting hard.

[mikeplus64]

For the following reason, it is not a good choice to import files which include styles with additionalData since it leads to duplicated styles.

* Vite processes each css import (including sass/scss) indivisually. This is the same behavior with webpack.

* `additionalData` is prepended to **every** scss file which is imported from js.

I might be misinterpreting what you've said here, but for me with my development builds, I'm not using additionalData at all and am running into the issue of multiple copies of the same stylesheet being generated.

[sapphi-red]

It will happen by the same reason for an example like below.

/* foo.css */
.foo { color: red; }

/* bar.css */
@import './foo.css'
.bar { color: green; }

/* baz.css */
@import './foo.css'
.baz { color: blue; }

// main.js
import './bar.css'
import './baz.css'

[wesleyboar]

Will check it in production build. It seems duplication of styles in dev mode is ok since Vite uses HMR. If production build doesn't generate duplicated styles, then is it enough.

When I vite build instead of vite preview, the output CSS still has duplicate content.

@tastytea-github, did you experience the same?

[Bunkerbewohner]

I also have experienced this issue. In my case the same '.less' file is imported by several other modules, and this leads to several duplicate <style> elements in the header that all contain the same CSS. It still works, but surely it would be better if only one style element would be injected for each CSS file.

[jpengelbrecht]

running into this issue on the newer versions as well

[dsvgl]

please have a look at my answer to this (same) issue: https://github.com/nuxt/framework/discussions/8139#discussioncomment-3864265

TL;DR
Don't include scss files with actual css-rules via additionalData. Only files that include variables, mixins, etc.
Working example: https://stackblitz.com/edit/github-hq9bhi?file=app.vue

[cwe-spb]

@dsvgl how i can add global css rules then?

[Alihd1]

Any update on this issue? is there a solution?

[dschmidt]

Here's what I've come up with:

const stripScssMarker = '/* STYLES STRIP IMPORTS MARKER */'

export default {
css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@import "${projectRootDir}/shared_styles";${stripScssMarker}`
          }
        }
      },
plugins: [
{
          name: 'vite-plugin-strip-css',
          transform(src: string, id) {
            if (id.endsWith('.vue') && !id.includes('node_modules') && src.includes('@extend')) {
              console.warn(
                'You are using @extend in your component. This is likely not working in your styles. Please use mixins instead.',
                id.replace(`${projectRootDir}/`, '')
              )
            }
            if (id.includes('lang.scss')) {
              const split = src.split(stripScssMarker)
              const newSrc = split[split.length - 1]

              return {
                code: newSrc,
                map: null
              }
            }
          }
        }]
}

Just needs an additional import of the style file from index.html. I had to create a shared_styles_proxy.scss file which imports the shared_styles.scss because otherwise vite would tell me shared_style.scss was already imported.

The downside is that code that modifies the shared style doesn't work like this. We had to get rid of all @extend usages in our codebase, which luckily were only a few.

Hope this helps.

[RohitKaushal7]

Is this issue not fixable..?

[dschmidt]

Is this issue not fixable..?

It would be incredibly hard to fix it in a generic way, see my answer for a workaround that is applicable in certain circumstances (if you don't use @extend).

[RohitKaushal7]

@dschmidt Yes I used your workaround. It works perfectly fine. 💘 Thank You.

I was facing an issue that was also removing other imports ( google fonts etc.. ) which I fixed by excluding my main file (which also had the fonts imports) from this replacement.
PS: I am using vite with react.

const SPLIT_CSS_MARK = '/* ##SPLIT_CSS_MARK## */'
export default ({ command }) => {
  return defineConfig({
    ...
    plugins: [
      ...
      {
        // ⚙️ custom plugin to remove duplicated css caused by css.preprocessorOptions.scss.additionalData
        name: 'vite-plugin-strip-css',
        transform(src: string, id) {
          if (id.includes('.scss')) {
            if (id.includes('src/index.scss')) {
              // Keep the common file only in root css file
              return { code: src, map: null }
            }

            const split = src.split(SPLIT_CSS_MARK)
            const newSrc = split[split.length - 1]
            return { code: newSrc, map: null }
          }
        },
      },
    ],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData:
            `@use "./src/styles/common.scss" as *;` + SPLIT_CSS_MARK,
        },
      },
    },
  })
}