ElMassimo/vite_ruby

Print stylesheets not working with dev server

HashNotAdam opened this issue ยท 1 comments

  • I have tried upgrading by running bundle update vite_ruby.
  • I have read the troubleshooting section before opening an issue.

Description ๐Ÿ“–

I'm building a Rails app that includes both screen and print media. When the dev server is running, bin/vite dev, the print styles are loaded onto the page, but the style tag does not include a media attribute, causing the print styles to override the screen styles. With only the Rails server, the styles are correctly loaded with a media attribute.

Reproduction ๐Ÿž

Repo with example of the issue

Vite Ruby Info

Run bin/rake vite:info and provide the output:

bin/vite present?: true
vite_ruby: 3.3.4
vite_rails: 3.0.15
rails: 7.0.7
node: v18.12.0
npm: 8.19.2
yarn: 1.22.19
pnpm:
ruby: ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

installed packages:
vite_with_print_media_in_dev@ /Users/arice/dev/EducationAdvantage/vite_with_print_media_in_dev
โ”œโ”€โ”ฌ vite-plugin-ruby@3.2.2
โ”‚ โ””โ”€โ”€ vite@4.4.9 deduped
โ””โ”€โ”€ vite@4.4.9

Hi Adam!

In order to control the media for styles you should avoid importing CSS from JS, as Vite does not provide a way to configure that.

Use vite_stylesheet_tag with a CSS entrypoint instead.