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

[Remix/Vite] Vanilla generated css files doesn't get injected into html after build #1479

Open
2 tasks done
vincent-thomas opened this issue Sep 29, 2024 · 5 comments
Open
2 tasks done

[Remix/Vite] Vanilla generated css files doesn't get injected into html after build #1479

vincent-thomas opened this issue Sep 29, 2024 · 5 comments
Labels
bug Issue is caused by a bug in a Vanilla Extract package remix issue related to the remix integration vite Issue related to vite

Comments

@vincent-thomas
Copy link

Describe the bug

Vanilla css styles do get injected into html in dev mode, but in production they don't get injected. They do generate in the build/client/assets directory but are not 'used'.

I use bun as package manager

NOTE: To have exactly my setup use my flake.nix with the nix package manager. not a must at all but its nice.

Head tag in devmode

<head>
   ...

  <style>
  /* /app/root.css.ts.vanilla.css */
  body {
    background-color: red;
  }
  <link .... />
  <link .... />
  <link .... />
</head>

Head tag in prod

<head>
   ....


   <!-- No vanilla css files here --> 

  <link .... />
  <link .... />
  <link .... />
</head>

Reproduction

https://github.com/vincent-thomas/remix-vanilla-extract-css-repro

System Info

System:
    OS: Linux 6.6 NixOS 24.11 (Vicuna) 24.11 (Vicuna)
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 22.59 GB / 31.25 GB
    Container: Yes
    Shell: 5.9 - /run/current-system/sw/bin/zsh
  Binaries:
    Node: 22.8.0 - /nix/store/xsrv93rg8vi05k9ig6v9mcvcyn01n6n2-nodejs-22.8.0/bin/node
    npm: 10.8.2 - /nix/store/xsrv93rg8vi05k9ig6v9mcvcyn01n6n2-nodejs-22.8.0/bin/npm
    bun: 1.1.29 - /nix/store/mqzlk40bnhx54by2m4lyyc02syippzad-bun-1.1.29/bin/bun

Used Package Manager

npm

Logs

No response

Validations
@askoufis askoufis added vite Issue related to vite remix issue related to the remix integration bug Issue is caused by a bug in a Vanilla Extract package and removed pending triage labels Oct 1, 2024
@askoufis
Copy link
Contributor

askoufis commented Oct 1, 2024 •
edited
Loading

Thanks for raising an issue. I've reproduced it locally and can confirm that the styles are missing. Specifically, it seem like remix is the side-effect import of the VE file, but it doesn't strip the tailwind one. If I export a style and use it within the app, all styles are present in a stylesheet.

I tested this out in a plain vite app and it is not an issue there, so it's specific to remix.

@vincent-thomas
Copy link
Author

Okay i'll open an issue on remix instead

@askoufis
Copy link
Contributor

askoufis commented Oct 2, 2024 •
edited
Loading

@vincent-thomas Sorry if my response sounded dismissive. I'm happy to keep this issue open at least to provide visibility on the VE side, but an issue in Remix would certainly be useful as well.

@vincent-thomas
Copy link
Author

vincent-thomas commented Oct 2, 2024 •
edited
Loading

No problem, i totally understand that issues need to be closed and developer time should be focused on real vanilla extract bugs. Maybe this issue could be referenced under this page (https://vanilla-extract.style/documentation/integrations/remix)?

NOTE: I can open a pull request regarding this.

Btw I really like this library, an issue has been opened remix.

@askoufis askoufis reopened this Oct 3, 2024
@askoufis
Copy link
Contributor

askoufis commented Oct 3, 2024

Tracked in remix remix-run/remix#10045

@askoufis askoufis mentioned this issue Oct 3, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue is caused by a bug in a Vanilla Extract package remix issue related to the remix integration vite Issue related to vite
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@askoufis @vincent-thomas