From 27c2ec88903bd58092de3e8cf359ba78f613aa38 Mon Sep 17 00:00:00 2001
From: Andreas Philippi <andreas.philippi@digitalservice.bund.de>
Date: Fri, 23 Aug 2024 08:12:24 +0200
Subject: [PATCH] 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:
- https://github.com/vitejs/vite/issues/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              | 6 +++++-
 .storybook/preview.ts   | 1 +
 README.md               | 9 +++++++--
 package.json            | 8 +++++++-
 public/fonts/.gitkeep   | 8 ++++++++
 src/primevue/global.css | 2 --
 6 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 public/fonts/.gitkeep

diff --git a/.gitignore b/.gitignore
index e717e30..829be1f 100644
--- a/.gitignore
+++ b/.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
\ No newline at end of file
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 051d061..b01d9de 100644
--- a/.storybook/preview.ts
+++ b/.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, {
diff --git a/README.md b/README.md
index face514..0ee08fd 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ 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
@@ -29,6 +29,7 @@ Import and apply the RIS UI theme and styling where you set up your application
   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:
diff --git a/package.json b/package.json
index 438e8b9..31c47d6 100644
--- a/package.json
+++ b/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",
diff --git a/public/fonts/.gitkeep b/public/fonts/.gitkeep
new file mode 100644
index 0000000..e48aca5
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/primevue/global.css b/src/primevue/global.css
index fdb56cd..b5c61c9 100644
--- a/src/primevue/global.css
+++ b/src/primevue/global.css
@@ -1,5 +1,3 @@
-@import "@digitalservice4germany/angie/fonts.css";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;