Skip to content

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

Open
@iamdriz

Description

@iamdriz

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/[email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug: pending triageSomething doesn't seem to be working, but hasn't been verified

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions