fix(fonts): extract fonts to separate stylesheet

Vite automatically base64-encodes and inlines fonts when building in
library mode. This leads to pretty big CSS files, while at the same time
not all fonts are needed all the time. For this reason I split the fonts
into a separate CSS file which will only be copied, not bundled. Fonts
are still provided by @digitalservice4germany/angie and will be copied
on build.

More information:
- vitejs/vite#3295
- https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

BREAKING CHANGE: Fonts now need to be imported separately, see install
instructions in the README for more information.

.gitignore

@@ -1,8 +1,12 @@
+*.tgz
 *storybook.log
 .idea
 .vscode
 dist
 frontend-license-report.csv
 node_modules
+public/fonts.css
+public/fonts/*.woff
+public/fonts/*.woff2
 storybook-static
-talisman_report
+talisman_report

.storybook/preview.ts

@@ -1,6 +1,7 @@
 import { setup } from "@storybook/vue3";
 import PrimeVue from "primevue/config";
 import { RisUiTheme } from "../src/primevue";
+import "../public/fonts.css";
 
 setup((app) => {
   app.use(PrimeVue, {

README.md

@@ -21,14 +21,15 @@ npm install @digitalservicebund/ris-ui
 
 ## Usage
 
-Import and apply the RIS UI theme and styling where you set up your application (typically `main.ts`):
+Import and apply the RIS UI theme, styling, and fonts where you set up your application (typically `main.ts`):
 
 ```diff
   // main.ts
   import { createApp } from "vue";
   import PrimeVue from "primevue/config";
 + import { RisUiTheme } from "@digitalservicebund/ris-ui/primevue";
 + import "@digitalservicebund/ris-ui/primevue/style.css";
++ import "@digitalservicebund/ris-ui/fonts.css"
 
   const app = createApp().use(PrimeVue, {
 +   unstyled: true,
@@ -52,7 +53,7 @@ If you want, also install the Tailwind preset (for colors, spacings, etc.) and p
 
 ## Development
 
-If you want to make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) as well as NPM installed on your machine.
+To make changes to RIS UI, you'll need the current [Node.js LTS](https://nodejs.org/en/download/package-manager) along with npm installed on your machine.
 
 To get started, first clone this repository:
 
@@ -64,6 +65,10 @@ Then install dependencies:
 
 ```sh
 npm install
+
+# This will populate the public/fonts folder. See public/fonts/.gitkeep
+# for more information.
+npm run sync-fonts
 ```
 
 You can now run a local preview to see any changes you make to the code:

package.json

@@ -25,18 +25,24 @@
       "require": "./dist/tailwind/index.cjs",
       "import": "./dist/tailwind/index.js",
       "types": "./dist/tailwind/index.d.ts"
+    },
+    "./fonts.css": {
+      "import": "./dist/fonts.css"
     }
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",
+    "prebuild": "npm run sync-fonts",
     "build": "vite build && vue-tsc --build tsconfig.lib.json --force",
+    "prebuild:storybook": "npm run sync-fonts",
     "build:storybook": "storybook build",
     "prettier:check": "prettier --check .",
     "prettier:fix": "prettier --write --ignore-unknown .",
     "eslint:check": "eslint",
     "eslint:fix": "npm run eslint:check -- --fix",
     "audit:licenses": "license-checker --production --excludePrivatePackages --excludePackages @digitalservicebund/ris-ui@$(cat package.json | jq -r '.version') --onlyAllow \"$(. ./parse-allowed-licenses.sh)\" --csv --out ./frontend-license-report.csv",
-    "typecheck": "vue-tsc"
+    "typecheck": "vue-tsc",
+    "sync-fonts": "rm ./public/fonts/*.woff ./public/fonts/*.woff2; cp ./node_modules/@digitalservice4germany/angie/fonts/* ./public/fonts/;  cp ./node_modules/@digitalservice4germany/angie/fonts.css ./public/"
   },
   "dependencies": {
     "primevue": "~4.0.0",

public/fonts/.gitkeep

@@ -0,0 +1,8 @@
+Fonts are provided by @digitalservicebund/angie. But we need to copy
+them here rather than bundling them with the rest of the CSS since
+Vite would otherwise base64-encode and inline them in the CSS. Because
+we don't need all those fonts, the CSS would be unnecessarily big and
+slow.
+
+Also see:
+https://github.com/vitejs/vite/issues/3295#issuecomment-1353409889

src/primevue/global.css

@@ -1,5 +1,3 @@
-@import "@digitalservice4germany/angie/fonts.css";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;