📝 [DOC] ADR-57 - Migration des fichiers SCSS dans le dossier des comp…

…osants

docs/adr/0057-migration-css-dans-les-composants.md

@@ -0,0 +1,83 @@
+# 57. Migration des fichiers CSS dans le dossier des composants
+
+Date : 2024-11-205
+
+## État
+
+Proposé
+
+## Contexte
+
+Le paradigme d’Ember impose de séparer tous les fichiers (controllers, templates, styles) en gardant la même arborescence pour s’y retrouver.
+
+Exemple :
+```
+|-- app
+| |-- components
+| | |-- monComposant.hbs
+| |-- styles
+| | |-- app.scss
+| | |-- components
+| |   |-- monComposant.scss
+```
+
+Dans le cas des styles, c'est parfois laborieux de retrouver le fichier correspondant au composant sur lequel on travaille.
+
+Le paradigme des frameworks plus récents comme VueJS ou Svelte propose un fichier unique qui intègre la logique, le template, et son css scopé. Dans le cas de ReactJS, la norme est de mettre le fichier CSS à côté du fichier de composant correspondant.
+
+Exemple :
+```
+|-- app
+| |-- components
+| | |-- monComposant.jsx
+| | |-- monComposant.scss
+```
+
+L'apparition des fichiers en .gjs chez Ember indique qu'ils veulent s'orienter de plus en plus vers ce paradigme, bien que le CSS ne soit pas encore inclus dans leur fichier.
+
+## Solution
+
+Mettre les fichiers `.[s]css` dans le dossier des composants.
+
+Exemple :
+```
+// PixAdmin
+
+|-- app
+| |-- components
+| | |-- certification-centers
+| | | |-- information.gjs
+| | | |-- information.scss
+| | | |-- membership-item.gjs
+| | | |-- membership-item.scss
+```
+
+### Mise en oeuvre
+
+Le build du CSS se fait dans le fichier `ember-cli-build.js`, à la racine du projet : [https://cli.emberjs.com/release/advanced-use/stylesheets/](Stylesheet compilation - Advanced use - Ember CLI Guides)
+
+La compilation se fait avec le package : [https://www.npmjs.com/package/ember-cli-sass](ember-cli-sass)
+Ce package nous permet de gérer les paths à inclure pour compiler les fichiers `scss`.
+
+Pour mettre les fichiers de style avec les composants, il suffit d'ajouter le path vers les composants dans `ember-cli-build.js`.
+
+```javascript
+const app = new EmberApp(defaults, {
+  sassOptions: {
+    includePaths: ['node_modules/@1024pix/pix-ui/addon/styles', 'node_modules/flatpickr/dist', 'app/components'],
+  }
+})
+```
+
+Rien d'autre.
+
+Exemple avec la PR suivante : [https://github.com/1024pix/pix/pull/9992]([TECH] : bouger le fichier nav.scss du dossier globals vers le dossier composants)
+
+### Avantages
+- Très simple à mettre en place
+- Pour un composant donné, les styles sont plus faciles à retrouver et à maintenir
+
+### Inconvénients
+- On est hors du paradigme d’Ember, risque de problèmes futurs inattendus
+- Est-ce qu'on garde les styles globaux dans le dossier "styles" ?
+