From c2290f8e7798fa206975266122923eacc4be3e2e Mon Sep 17 00:00:00 2001
From: Jun Shindo <46585162+jay-es@users.noreply.github.com>
Date: Fri, 1 Nov 2024 20:30:06 +0900
Subject: [PATCH] feat(lib)!: use package name for css output file name

---
 config/build-options.md | 22 ++++++++++++++++++++--
 guide/build.md          | 30 +++++++++++++++++++++++++++++-
 guide/migration.md      | 20 ++++++++++++++++++++
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/config/build-options.md b/config/build-options.md
index 42b5d16d..0c3346f6 100644
--- a/config/build-options.md
+++ b/config/build-options.md
@@ -162,10 +162,28 @@ CSS コード分割を有効/無効にします。有効にすると、非同期
 
 ## build.lib
 
-- **型:** `{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string) }`
+- **型:** `{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string), cssFileName?: string }`
 - **関連:** [ライブラリーモード](/guide/build#library-mode)
 
-ライブラリーとしてビルドします。ライブラリーではエントリーとして HTML を使用できないため、`entry` が必要です。`name` は公開されているグローバル変数で、`formats` に `'umd'` や `'iife'` が含まれている場合に必要です。デフォルトの `formats` は `['es', 'umd']` で、複数のエントリーを使用する場合は `['es', 'cjs']` です。`fileName` は出力されるパッケージファイルの名前です。デフォルトの `fileName` は package.json の name オプションですが、`format` と `entryName` を引数にとる関数として定義することもできます。
+ライブラリーとしてビルドします。ライブラリーではエントリーとして HTML を使用できないため、`entry` が必要です。`name` は公開されているグローバル変数で、`formats` に `'umd'` や `'iife'` が含まれている場合に必要です。
+
+`fileName` はパッケージファイルの出力名で、デフォルトでは `package.json` の `"name"` となります。 また、`format` と `entryName` を引数として受け取り、ファイル名を返す関数として定義することもできます。
+
+パッケージが CSS をインポートしている場合、`cssFileName` を使用して出力される CSS ファイルの名前を指定できます。文字列が設定されている場合は、デフォルトで `fileName` と同じ値になります。それ以外の場合、`package.json` の `"name"` にフォールバックします。
+
+```js twoslash [vite.config.js]
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: ['src/main.js'],
+      fileName: (format, entryName) => `my-lib-${entryName}.${format}.js`,
+      cssFileName: 'my-lib-style',
+    },
+  },
+})
+```
 
 ## build.manifest
 
diff --git a/guide/build.md b/guide/build.md
index 86cf2774..25da52aa 100644
--- a/guide/build.md
+++ b/guide/build.md
@@ -200,7 +200,12 @@ import Bar from './Bar.vue'
 export { Foo, Bar }
 ```
 
-この設定で `vite build` を実行するとライブラリーの出荷を目的とした Rollup プリセットが使用され 2 つのバンドルフォーマットが生成されます。`es` と `umd`（`build.lib` で設定可能）:
+この設定で `vite build` を実行するとライブラリーの出荷を目的とした Rollup プリセットが使用され 2 つのバンドルフォーマットが生成されます:
+
+- `es` と `umd`（単一のエントリー用）
+- `es` と `cjs`（複数のエントリー用）
+
+フォーマットは [`build.lib.formats`](/config/build-options.md#build-lib) オプションで設定できます。
 
 ```
 $ vite build
@@ -251,6 +256,29 @@ dist/my-lib.umd.cjs 0.30 kB / gzip: 0.16 kB
 
 :::
 
+### CSS サポート
+
+ライブラリーが CSS をインポートしている場合、ビルドされた JS ファイルとは別に、単一の CSS ファイルとしてバンドルされます（例えば、`dist/my-lib.css` など）。デフォルトのファイル名は `build.lib.fileName` ですが、[`build.lib.cssFileName`](/config/build-options.md#build-lib) で変更することもできます。
+
+ユーザーがインポートできるように、`package.json` で CSS ファイルをエクスポートできます:
+
+```json {12}
+{
+  "name": "my-lib",
+  "type": "module",
+  "files": ["dist"],
+  "main": "./dist/my-lib.umd.cjs",
+  "module": "./dist/my-lib.js",
+  "exports": {
+    ".": {
+      "import": "./dist/my-lib.js",
+      "require": "./dist/my-lib.umd.cjs"
+    },
+    "./style.css": "./dist/my-lib.css"
+  }
+}
+```
+
 ::: tip ファイル拡張子
 `package.json` が `"type": "module"` を含まない場合、Vite は Node.js の互換性のため異なるファイル拡張子を生成します。`.js` は `.mjs` に、`.cjs` は `.js` になります。
 :::
diff --git a/guide/migration.md b/guide/migration.md
index a035c08e..85a5e8fe 100644
--- a/guide/migration.md
+++ b/guide/migration.md
@@ -32,6 +32,26 @@ Vite 6 以降では、モダン API がデフォルトで Sass に使用され
 
 モダン API に移行するには、[Sass のドキュメント](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/)を参照してください。
 
+### ライブラリーモードでの CSS 出力ファイル名のカスタマイズ
+
+Vite 5 では、ライブラリーモードでの CSS 出力ファイル名は常に　`style.css`　であり、Vite の設定ファイルから簡単に変更することはできませんでした。
+
+Vite 6 からは、デフォルトのファイル名は JS 出力ファイルと同様に `package.json` の `"name"` を使用するようになりました。[`build.lib.fileName`](/config/build-options.md#build-lib) が文字列で設定されている場合、その値は CSS 出力ファイル名にも使用されます。別の CSS ファイル名を明示的に設定するには、新しい [`build.lib.cssFileName`](/config/build-options.md#build-lib) を使用して設定できます。
+
+移行するには、`style.css` ファイル名に依存していた場合は、そのファイル名への参照をパッケージ名に基づく新しい名前に更新する必要があります。例:
+
+```json [package.json]
+{
+  "name": "my-lib",
+  "exports": {
+    "./style.css": "./dist/style.css" // [!code --]
+    "./style.css": "./dist/my-lib.css" // [!code ++]
+  }
+}
+```
+
+Vite 5 のように `style.css` を使い続けたい場合は、代わりに `build.lib.cssFileName: 'style'` を設定できます。
+
 ## 高度な内容
 
 少数のユーザーにのみ影響するその他の重大な変更があります。