Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS Preprocessor for link elements has inconsistency between Dev and build #8406

Closed
7 tasks done
markmcintyre opened this issue May 31, 2022 · 6 comments
Closed
7 tasks done

CSS Preprocessor for link elements has inconsistency between Dev and build #8406

markmcintyre opened this issue May 31, 2022 · 6 comments
Labels
feat: css inconsistency Inconsistency between dev & build pending triage

Comments

@markmcintyre
Copy link

Describe the bug

link elements are not correctly compiled in dev mode, however they work as expected when built for production.

That is, if index.html contains a link element in the head like so:

<html>
   <head>
      <link rel="stylesheet" type="sass" href="./style.scss" />
   </head>
   <body>...</body>
</html>

Then, running with npm run dev will not compile or pre-process the link tag. It will be inclued verbatim as it appears in the source.

Development (npm run dev) example:

    <link rel="stylesheet" type="sass" href="./style.scss" />

However, running with npm run build will indeed compile the link tag, and substitute the compiled CSS correctly.

Production (npm run build) example:

   <link rel="stylesheet" href="/assets/index.35298318.css">

No errors or issues are output to the logs in either case.

Reproduction

https://stackblitz.com/edit/vitejs-vite-2wumsd?file=index.html

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1
    Memory: 90.56 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.6.0 - /opt/homebrew/bin/node
    npm: 7.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 98.0
    Safari: 15.4
  npmPackages:
    vite: ^2.9.9 => 2.9.9

Used Package Manager

npm

Logs

No response

Validations
@sapphi-red sapphi-red added the inconsistency Inconsistency between dev & build label May 31, 2022
@sapphi-red
Copy link
Member

related: #8397

@0xIndalamar
Copy link

0xIndalamar commented Jun 1, 2022 •
edited

UPD:

<link rel="stylesheet" href="./style.scss" />

Just like this should work fine

@poyoho
Copy link
Member

poyoho commented Jun 1, 2022

I think it is expected. Because type="scss" make browser no make a request to vite. after remove the attr it work well.

@markmcintyre
Copy link
Author

markmcintyre commented Jun 1, 2022 •
edited

@iDumpOnYou: Confirmed. Removing the type does indeed work for me on Dev. This is still an inconsistency, but I'm OK closing this issue if this is expected behaviour.

@dennismcknight-tr
Copy link

I'm seeing the opposite now on Vite 4.2.0.

If I include a custom link element pointing to a SCSS file inside my index.html it works great when running locally (npm run dev), however when I run the build the link element gets completely removed :-(

I'm trying to find a solution to include SCSS at the very end of all CSS/SCSS that gets injected into my page, but this seems to be impossible. No matter how I order things in main.js Vite continually updates the head with additional js and css includes over time, appearing after anything I have specified. It makes it so I cannot override the styles of other frameworks without have to use !important or insane specificity rules.

So I tried including my SCSS link element into the body so that it would always appear after everything in the head, but this doesn't appear to be working solution since I can't get past the build phase now.

I've got no other ideas at the moment, any suggestions?

@sapphi-red sapphi-red mentioned this issue May 11, 2023
Closed
7 tasks
@sapphi-red sapphi-red changed the title CSS Preprocessor for link elements not working in DEV only CSS Preprocessor for link elements has inconsistency between Dev and build May 11, 2023
@bluwy
Copy link
Member

bluwy commented Nov 12, 2023 •
edited

Closing this for now according to #8406 (comment). The way we handle links now isn't very ideal. In builds, we're re-printing the CSS links which leads to this. So issues like additional attributes are not copied over.

For further work on this, I think we can follow #8739 and #9402. @dennismcknight-tr your issue should be related to #8739

@bluwy bluwy closed this as not planned Won't fix, can't repro, duplicate, stale Nov 12, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Nov 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
feat: css inconsistency Inconsistency between dev & build pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@markmcintyre @bluwy @poyoho @sapphi-red @0xIndalamar @dennismcknight-tr