ElMassimo / vite_ruby

⚡️ Vite.js in Ruby, bringing joy to your JavaScript experience
https://vite-ruby.netlify.app/
MIT License
1.28k stars 117 forks source link

Disabling cssCodeSplit breaks CSS file location used by tag helper in Rails #434

Open iamdriz opened 6 months ago

iamdriz commented 6 months ago

Setting cssCodeSplit (https://vitejs.dev/config/build-options#build-csscodesplit) to false in order to create a single CSS file as per the documentation: "If disabled, all CSS in the entire project will be extracted into a single CSS file." causes Vite to create two files if we have app/javascript/entrypoints/style.scss:

style-P1uBkUvy.css  style-w40geAFS.js

The tag helper used to render this stylesheet in the view:

<%= vite_stylesheet_tag 'style.scss', media: 'all', 'data-turbo-track': 'reload' %>

Renders (a non existent file reference, see the .js.css extension):

<link rel="stylesheet" media="all" href="/vite/assets/style-w40geAFS.js.css" data-turbo-track="reload" />

Instead of:

<link rel="stylesheet" media="all" href="/vite/assets/style-P1uBkUvy.css" data-turbo-track="reload" />

Setting cssCodeSplit to true fixes this, but means any CSS imported into JS files will no longer be combined with the main CSS file. Making this setting fragile in the case of this plugin. Is it possible to allow this setting to be able to be set to false without it breaking the tag helper and pointing to the wrong file?

Environment:

bin/vite present?: true
vite_ruby: 3.5.0
vite_rails: 3.0.17
rails: 6.1.7.6
node: v18.13.0
npm: 8.19.3
yarn: 1.22.17
pnpm: 8.10.5
ruby: ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

├─┬ @vitejs/plugin-react@4.2.1
│ └── vite@5.0.12 deduped
├─┬ vite-plugin-ruby@5.0.0
│ └── vite@5.0.12 deduped
└── vite@5.0.12
ElMassimo commented 5 months ago

Hi Cameron!

Have you tried this suggestion from the Troubleshooting guide?