✨(frontend) add custom css style

AntoLC · AntoLC · commit 65e450c6cc8f · 2025-03-31T12:34:04.000+02:00
From the config, we can add custom css style
to the app.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to
 ## Added
 
 - 📄(legal) Require contributors to sign a DCO #779
+- ✨(frontend) add custom css style #771
 
 ## Changed
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts
@@ -174,6 +174,30 @@ test.describe('Config', () => {
       page.locator('#crisp-chatbox').getByText('Invalid website'),
     ).toBeVisible();
   });
+
+  test('it checks FRONTEND_CSS_URL config', async ({ page }) => {
+    await page.route('**/api/v1.0/config/', async (route) => {
+      const request = route.request();
+      if (request.method().includes('GET')) {
+        await route.fulfill({
+          json: {
+            ...config,
+            FRONTEND_CSS_URL: 'http://localhost:123465/css/style.css',
+          },
+        });
+      } else {
+        await route.continue();
+      }
+    });
+
+    await page.goto('/');
+
+    await expect(
+      page
+        .locator('head link[href="http://localhost:123465/css/style.css"]')
+        .first(),
+    ).toBeAttached();
+  });
 });
 
 test.describe('Config: Not loggued', () => {
diff --git a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
@@ -1,4 +1,5 @@
 import { Loader } from '@openfun/cunningham-react';
+import Head from 'next/head';
 import { PropsWithChildren, useEffect } from 'react';
 
 import { Box } from '@/components';
@@ -54,10 +55,17 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
   }
 
   return (
-    <AnalyticsProvider>
-      <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
-        {children}
-      </CrispProvider>
-    </AnalyticsProvider>
+    <>
+      {conf?.FRONTEND_CSS_URL && (
+        <Head>
+          <link rel="stylesheet" href={conf?.FRONTEND_CSS_URL} />
+        </Head>
+      )}
+      <AnalyticsProvider>
+        <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
+          {children}
+        </CrispProvider>
+      </AnalyticsProvider>
+    </>
   );
 };
diff --git a/src/frontend/apps/impress/src/core/config/api/useConfig.tsx b/src/frontend/apps/impress/src/core/config/api/useConfig.tsx
@@ -11,6 +11,7 @@ interface ConfigResponse {
   COLLABORATION_WS_URL?: string;
   CRISP_WEBSITE_ID?: string;
   FRONTEND_THEME?: Theme;
+  FRONTEND_CSS_URL?: string;
   MEDIA_BASE_URL?: string;
   POSTHOG_KEY?: PostHogConf;
   SENTRY_DSN?: string;
