# Compilation des thèmes du Portail Familles

Les thèmes personnalisés du Portail Familles sont compilés coté serveur pour :

- Éviter d'alourdir inutilement la Web'App avec des librairies de compilation _"Sass => Css / in browser"_
- Permettre de "recompiler un thème" depuis un patch lors d'une mise à jour

## Architecture

Le portail étant construit sur le framework [Angular](https://angular.dev/), l'UI est basée sur la librairie [Angular Material](https://material.angular.io/). La compilation des thèmes du portail nécessite donc qu'un compilateur _Sass_ ainsi que les librairies _Sass_ d'Angular Material soient disponibles côté serveur.

- `dart-sass` : Pour compiler les thèmes, nous utilisons le compilateur [Dart Sass](https://sass-lang.com/dart-sass/) (binaire Windows disponible ici : [https://github.com/sass/dart-sass/releases/](https://github.com/sass/dart-sass/releases/))
- `theme-src`: codes sources nécessaires à la compilation des thèmes
  - `theme.scss` : fichier principal de base du thème
  - `_func.scss` : quelques fonctions/mixin _Sass_ utilitaires pour la compilation des thèmes
  - `node_modules` : répertoires des librairies `@angular/cdk` et `@angular/material` (uniquement les fichiers `.scss` et `.css`)
- `tmp` : répertoire temporaire où sont compilés les thèmes.

## Fonctionnement

L'api du portail compile les thèmes via la méthode `C_PORTAIL_THEMING.compileTheme()` qui doit recevoir une définition de thème (structure `sThemeDefinition`).

- Cette définition est "traduite" en "template" _Sass_ : ensemble de variables Sass utilisées pour la compilation et permettant la personnalisation du thème. Le fichier `.scss` est enregistré dans le répertoire `tmp` avec un nom aléatoire unique.
- Une copie du fichier `theme.scss` est placée dans le répertoire `tmp` (avec un nom aléatoire unique) en y intégrant l'import du fichier _template_ précédemment généré.
- Appel du compilateur _dart-sass_ via la ligne de commande `dart-sass\sass.bat" ../tmp/[%xThemeFilename%] ../tmp/[%xOutputFilename%]  --load-path="../theme-src/node_modules`
- Lecture du résultat (fichier css du thème ou message d'erreur) dans le fichier `xOutputFilename` (nom aléatoire unique).
