Ajax form API adds Vite CSS-in-JS modules as CSS

Problem/Motivation

I'm using single-directory components that use Vite module to transform paths from source to destination files. The components are used within form API. To load the component to the form on demand I use Ajax API.

When Vite dev server is in use and component is loading to the form, CSS is not loaded for the component and the form gets stuck, so that no more Ajax submissions are getting triggered although submit buttons are pressed.

Steps to reproduce

1. Enable Vite dev server
2. Create a SDC with some CSS, and have Vite enabled to process the CSS
3. Create form that initially does not include the component
4. Create Ajax submit button that renders the component to some wrapper on Ajax callback using a render array
5. Issue reproduced

More information about Ajax forms here: https://www.drupal.org/docs/develop/drupal-apis/javascript-api/ajax-forms →

Proposed resolution

This seems to be a problem related to how Vite's CSS-in-JS modules are incorrectly handled as CSS by Ajax API (and by extension the underlying library, loadjs) when it has file extension ".css". Although fix to https://www.drupal.org/project/drupal/issues/3334704 🐛 Ajax.js commands stuck when adding JS with nomodule attribute Active might stop the symptoms of the problem, it should be fixed properly so that JavaScript is not loaded as CSS.

Remaining tasks

1. [ ] Figure out whether this can be handled by Vite module or by Drupal core
2. [ ] Fix the issue by making the necessary changes

User interface changes

API changes

Data model changes