Closed ghost closed 1 year ago
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.
@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.
Please look at simplified app I've created to see the issue reproduction (look at UPDATE in the issue description).
@sodatea Relating to added feat-css
tag, I want to emphasize this issue is a bug, but not a feature, because currently Vite produces duplicated CSS in a bundle.
feat: css
means the issue is related to the CSS bundling feature of Vite. It's not indicating that it is a feature request.
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.
I hope it can be solved fastly.
Hey guys, running into the same issue, which causes somewhat reduced performance for us. Hope to see a solution or explanation soon!
Any updates on this issue?
@patak-js Hello sir. Could you be so kind to pay attention to this issue?
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>
Any update on this issue?
bump
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.
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.
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.
This comment was wrong in some parts. Please read my next comment.
@sapphi-red additionalData does prepend, but @use
should reuse style if it is already in head.
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.
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.
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.
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'
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?
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
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:
it comes from https://github.com/vitejs/vite/issues/832
My main.scss looks like:
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
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
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
Used Package Manager
npm
Logs
No response
Validations