♻️(react) split fonts in a seperate CSS file

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

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+Split fonts in a separated CSS file

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;

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].*" },

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",

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.
   `}

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";

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';

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",
+      },
+    },
+  },
+});