From cd88e465379bfbafff274000d3b2dfec1aa40ca3 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 16 Feb 2023 15:25:05 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20split=20fonts=20in?=
 =?UTF-8?q?=20a=20seperate=20CSS=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fonts were de-facto included in the bundled dist/style.css file which
wasn't convenient in situations were consumers wanted to import fonts
by themselves.
---
 .changeset/two-swans-crash.md                 |  5 +++++
 apps/demo/src/index.scss                      |  3 ++-
 packages/react/.storybook/preview.js          |  1 +
 packages/react/package.json                   |  6 ++++--
 .../react/src/docs/installation.stories.mdx   |  1 +
 packages/react/src/fonts.scss                 |  6 ++++++
 packages/react/src/index.scss                 |  6 ------
 packages/react/vite.fonts.config.ts           | 21 +++++++++++++++++++
 8 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/two-swans-crash.md
 create mode 100644 packages/react/src/fonts.scss
 create mode 100644 packages/react/vite.fonts.config.ts

diff --git a/.changeset/two-swans-crash.md b/.changeset/two-swans-crash.md
new file mode 100644
index 0000000..f7a3d78
--- /dev/null
+++ b/.changeset/two-swans-crash.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Split fonts in a separated CSS file
diff --git a/apps/demo/src/index.scss b/apps/demo/src/index.scss
index 4b5426d..5517c1f 100644
--- a/apps/demo/src/index.scss
+++ b/apps/demo/src/index.scss
@@ -1,5 +1,6 @@
-@import "cunningham-tokens";
+@import "@openfun/cunningham-react/fonts";
 @import "@openfun/cunningham-react/style";
+@import "cunningham-tokens";
 
 :root {
   font-family: Roboto, sans-serif;
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
index cfadb90..9a40c97 100644
--- a/packages/react/.storybook/preview.js
+++ b/packages/react/.storybook/preview.js
@@ -1,4 +1,5 @@
 import '../src/index.scss'
+import '../src/fonts.scss'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
diff --git a/packages/react/package.json b/packages/react/package.json
index dd554e2..cafc664 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -16,7 +16,8 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./style": "./dist/style.css"
+    "./style": "./dist/style.css",
+    "./fonts": "./dist/fonts.css"
   },
   "files": [
     "dist/"
@@ -24,7 +25,8 @@
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
     "dev": "yarn storybook & nodemon --watch src --ext '*' --ignore src/cunningham-tokens.ts --ignore src/cunningham-tokens.js --ignore src/cunningham-tokens.css --exec npm run build",
-    "build": "tsc && yarn build-theme && vite build",
+    "build": "tsc && yarn build-theme && vite build && yarn build-fonts",
+    "build-fonts": "vite build -c vite.fonts.config.ts && rm -rf dist/fonts.js",
     "build-theme": "cunningham -o src -g css,ts,js",
     "preview": "vite preview",
     "test": "FORCE_COLOR=1 vitest run",
diff --git a/packages/react/src/docs/installation.stories.mdx b/packages/react/src/docs/installation.stories.mdx
index 1d7b5df..cd786d3 100644
--- a/packages/react/src/docs/installation.stories.mdx
+++ b/packages/react/src/docs/installation.stories.mdx
@@ -53,6 +53,7 @@ Then, add these lines at the top of your main stylesheet file:
   dark
   format={false}
   code={`
+@import "@openfun/cunningham-react/fonts"; // Imports default fonts ( Roboto ). You can also import fonts by yourself.
 @import "@openfun/cunningham-react/style"; // Imports the default theme.
 @import "cunningham-tokens"; // Imports the file you just generated.
   `}
diff --git a/packages/react/src/fonts.scss b/packages/react/src/fonts.scss
new file mode 100644
index 0000000..cea4b41
--- /dev/null
+++ b/packages/react/src/fonts.scss
@@ -0,0 +1,6 @@
+@import "@fontsource/roboto/100";
+@import "@fontsource/roboto/300";
+@import "@fontsource/roboto/400";
+@import "@fontsource/roboto/500";
+@import "@fontsource/roboto/700";
+@import "@fontsource/roboto/900";
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 6126add..76dbdf1 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -1,9 +1,3 @@
-@import "@fontsource/roboto/100";
-@import "@fontsource/roboto/300";
-@import "@fontsource/roboto/400";
-@import "@fontsource/roboto/500";
-@import "@fontsource/roboto/700";
-@import "@fontsource/roboto/900";
 @import "cunningham-tokens";
 @import '@openfun/cunningham-tokens/default-tokens';
 @import './components/Button';
diff --git a/packages/react/vite.fonts.config.ts b/packages/react/vite.fonts.config.ts
new file mode 100644
index 0000000..4ad1442
--- /dev/null
+++ b/packages/react/vite.fonts.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from "vitest/config";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    emptyOutDir: false,
+    outDir: "dist",
+    lib: {
+      entry: {
+        fonts: "./src/fonts.scss",
+      },
+      formats: ["es"],
+    },
+    rollupOptions: {
+      input: "src/fonts.scss",
+      output: {
+        assetFileNames: "fonts.css",
+      },
+    },
+  },
+});