feat(lib)!: use package name for css output file name (#498)

closes #498

Author: bluwy

docs/config/build-options.md

@@ -157,10 +157,28 @@ Optionen, die an [@rollup/plugin-dynamic-import-vars](https://github.com/rollup/
 
 ## build.lib
 
-- **Typ:** `{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string) }`
+- **Typ:** `{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string), cssFileName?: string }`
 - **Verwandt:** [Library-Modus](/guide/build#library-mode)
 
-Bauen Sie als Bibliothek. `entry` ist erforderlich, da die Bibliothek HTML nicht als Eingabe verwenden kann. `name` ist die freigegebene globale Variable und ist erforderlich, wenn `formats` `'umd'` oder `'iife'` enthält. Die Standardformate sind `['es', 'umd']` oder `['es', 'cjs']`, wenn mehrere Eingaben verwendet werden. `fileName` ist der Name der Paketdatei-Ausgabe, standardmäßig ist `fileName` die Optionsnamen aus package.json, er kann auch als Funktion definiert werden, die `format` und `entryAlias` als Argumente akzeptiert.
+Als Bibliothek erstellen. `entry` ist erforderlich, da die Bibliothek HTML nicht als Eintrag verwenden kann. `name` ist die exponierte globale Variable und erforderlich, wenn `formats` `'umd'` oder `'iife'` enthält. Die Standardformate sind `['es', 'umd']` oder `['es', 'cjs']`, wenn mehrere Einträge verwendet werden.
+
+`fileName` ist der Name der ausgegebenen Paketdatei, der standardmäßig dem `"name"` in `package.json` entspricht. Er kann auch als Funktion definiert werden, die `format` und `entryName` als Argumente übernimmt und den Dateinamen zurückgibt.
+
+Wenn Ihr Paket CSS importiert, kann „cssFileName“ verwendet werden, um den Namen der CSS-Datei-Ausgabe anzugeben. Der Standardwert ist derselbe wie „fileName“, wenn dieser als Zeichenfolge festgelegt ist, andernfalls wird ebenfalls auf „name“ in „package.json“ zurückgegriffen.
+
+```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
 

docs/guide/build.md

@@ -185,7 +185,12 @@ import Bar from './Bar.vue'
 export { Foo, Bar }
 ```
 
-Die Ausführung von `vite build` mit dieser Konfiguration verwendet ein Rollup-Preset, das auf die Bereitstellung von Bibliotheken ausgerichtet ist und zwei Bündelformate erstellt: `es` und `umd` (konfigurierbar über `build.lib`):
+Wenn Sie `vite build` mit dieser Konfiguration ausführen, wird eine Rollup-Voreinstellung verwendet, die auf die Auslieferung von Bibliotheken ausgerichtet ist und zwei Bundle-Formate erzeugt:
+
+- `es` und `umd` (für einen einzelnen Eintrag)
+- `es` und `cjs` (für mehrere Einträge)
+
+Die Formate können mit der Option [„build.lib.formats“](/config/build-options.md#build-lib) konfiguriert werden.
 
 ```
 $ vite build
@@ -234,8 +239,33 @@ Oder, wenn mehrere Einstiegspunkte freigegeben werden:
 }
 ```
 
-::: tip Dateierweiterungen
-Wenn die `package.json` nicht `"type": "module"` enthält, generiert Vite unterschiedliche Dateierweiterungen für Node.js-Kompatibilität. `.js` wird zu `.mjs` und `.cjs` wird zu `.js`.
+:::
+
+### CSS-Unterstützung
+
+Wenn Ihre Bibliothek CSS importiert, wird es neben den erstellten JS-Dateien als einzelne CSS-Datei gebündelt, z. B. `dist/my-lib.css`. Der Name lautet standardmäßig `build.lib.fileName`, kann aber auch mit [`build.lib.cssFileName`](/config/build-options.md#build-lib) geändert werden.
+
+Sie können die CSS-Datei in Ihrer `package.json` exportieren, damit sie von Benutzern importiert werden kann:
+
+```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 File Extensions
+If the `package.json` does not contain `"type": "module"`, Vite will generate different file extensions for Node.js compatibility. `.js` will become `.mjs` and `.cjs` will become `.js`.
 :::
 
 ::: tip Umgebungsvariablen

docs/guide/migration.md

@@ -30,7 +30,27 @@ In Vite 5 wurde standardmäßig die Legacy-API für Sass verwendet. Vite 5.4 fü
 
 Ab Vite 6 wird die moderne API standardmäßig für Sass verwendet. Wenn Sie weiterhin die Legacy-API verwenden möchten, können Sie [`css.preprocessorOptions.sass.api: 'legacy'` / `css.preprocessorOptions.scss.api: 'legacy'`](/config/shared-options#css-preprocessoroptions) einstellen. Beachten Sie jedoch, dass die Unterstützung der Legacy-API in Vite 7 entfernt wird.
 
-Um auf die moderne API umzusteigen, siehe [die Sass-Dokumentation](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/).
+Um zur modernen API zu migrieren, lesen Sie bitte die [Sass-Dokumentation](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/).
+
+### CSS-Ausgabedateinamen im Bibliotheksmodus anpassen
+
+In Vite 5 lautete der CSS-Ausgabedateiname im Bibliotheksmodus immer „style.css“ und konnte nicht ohne Weiteres über die Vite-Konfiguration geändert werden.
+
+Ab Vite 6 wird für den Standarddateinamen nun „name“ aus „package.json“ verwendet, ähnlich wie bei den JS-Ausgabedateien. Wenn [`build.lib.fileName`](/config/build-options.md#build-lib) mit einer Zeichenfolge festgelegt ist, wird dieser Wert auch für den Namen der CSS-Ausgabedatei verwendet. Um explizit einen anderen CSS-Dateinamen festzulegen, können Sie die neue Option [`build.lib.cssFileName`](/config/build-options.md#build-lib) verwenden.
+
+Wenn Sie sich bisher auf den Dateinamen `style.css` verlassen haben, sollten Sie für die Migration die Verweise darauf auf den neuen Namen basierend auf Ihrem Paketnamen aktualisieren. Beispiel:
+
+```json [package.json]
+{
+  "name": "my-lib",
+  "exports": {
+    "./style.css": "./dist/style.css" // [!code --]
+    "./style.css": "./dist/my-lib.css" // [!code ++]
+  }
+}
+```
+
+Wenn Sie wie in Vite 5 lieber bei `style.css` bleiben möchten, können Sie stattdessen `build.lib.cssFileName: 'style'` festlegen.
 
 ## Erweitert