[WIP] Investigate approach for bundling CSS into JavaScript files

[Copilot]

What

Investigating the correct approach to bundle CSS into JavaScript files to reduce HTTP requests. The initial attempt using cssCodeSplit: false was incorrect - it still extracts CSS into a separate file (just one file instead of many chunks).

Why

Reduces HTTP request count. CSS is currently being downloaded separately from JS. The goal is to have CSS injected via JavaScript at runtime, eliminating separate CSS file requests entirely.

Additional info (optional)

Current Status: Awaiting clarification on desired approach.

Analysis: According to Vite documentation:

• cssCodeSplit: true (current): Creates separate CSS files for each async chunk
• cssCodeSplit: false: Creates ONE CSS file for the entire project (still separate from JS)
• To truly inject CSS via JavaScript: Requires a plugin like vite-plugin-css-injected-by-js

Possible approaches:

1. Single CSS file approach: Use cssCodeSplit: false (still separate CSS file)
2. True JS-injected CSS: Add vite-plugin-css-injected-by-js plugin (no separate CSS files)

Tradeoffs to consider:

• JS-injected CSS may cause FOUC (Flash of Unstyled Content) until JS executes
• Single CSS file still requires separate HTTP request but easier to cache
• With HTTP/2 multiplexing, multiple small files may not be a significant issue

Files to modify once approach is determined:

• packages/frontend/vite.config.ts
• packages/frontend-embed/vite.config.ts

Checklist

• [x] Read the contribution guide
• [ ] Test working in a local environment
• [ ] (If needed) Update CHANGELOG.md
• [ ] (If possible) Add tests

Original prompt

---

This section details on the original issue you should resolve

<issue_title>CSSをJSファイルにバンドルする</issue_title> <issue_description>いつからかコンポーネントなどのCSSがJSとは別にダウンロードされるように変わっているが、特にそうしなければならない理由がなければJSにバンドルした方がリクエスト数が減る</issue_description>

Comments on the Issue (you are @copilot in this section)

@kakkokari-gtyih ブラウザにCSSとして直接解釈させたほうがCSSの読み込み自体が早く済むのか、それともJS経由で差し込んでも大して時間に影響が出ないかは考えどころ @syuilo 検証のためにもとりあえずバンドルしたいけど設定がいまいちよく分からん

• Fixes misskey-dev/misskey#16963

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[kakkokari-gtyih]

CSS コード分割を有効/無効にします。有効にすると、非同期 JS チャンクでインポートされた CSS はチャンクとして保存され、チャンクがフェッチされるときに一緒にフェッチされます。

無効にした場合、プロジェクト全体のすべての CSS はひとつの CSS ファイルに抽出されます。

なので多分違いそう

[syuilo]

@copilot

CSS コード分割を有効/無効にします。有効にすると、非同期 JS チャンクでインポートされた CSS はチャンクとして保存され、チャンクがフェッチされるときに一緒にフェッチされます。 無効にした場合、プロジェクト全体のすべての CSS はひとつの CSS ファイルに抽出されます。

なので多分違いそう

[Copilot]

@copilot

CSS コード分割を有効/無効にします。有効にすると、非同期 JS チャンクでインポートされた CSS はチャンクとして保存され、チャンクが�...

You're correct - my previous change was incorrect. Setting cssCodeSplit: false still extracts CSS into a separate file (just one file instead of many), it doesn't bundle CSS into the JavaScript files.

To truly bundle CSS into JS files so it's injected at runtime, we would need to use a plugin like vite-plugin-css-injected-by-js.

However, I want to clarify the requirement: Do you want:

1. All CSS in one file (current code with cssCodeSplit: false - reverted in my next commit)
2. CSS actually injected via JavaScript (requires adding a plugin)
3. Something else?

The tradeoff is that injecting CSS via JS means CSS won't be applied until JS executes, which could cause FOUC (Flash of Unstyled Content).